TS TypeScript

目录

• 一、核心概念：什么是 TypeScript
• 二、前置准备：快速搭建 TS 环境
• 三、TS 核心常用语法（高频）
  • 1. 基础类型（原始类型）
  • 2. 复杂类型（引用类型）
    • （1）数组类型
    • （2）对象类型（接口 Interface / 类型别名 Type Alias）
  • 3. 函数类型
  • 4. 类型推断
  • 5. 泛型（Generic）
• 四、TS 与 JS 的核心区别
• 五、实战价值：为什么企业项目优先用 TS
  • 总结

一、核心概念：什么是 TypeScript

1. 定义：TypeScript 是由微软开发的开源编程语言，是 JavaScript（JS）的超集（兼容所有 JS 语法，所有 JS 代码都可以直接作为 TS 代码运行），核心新增了「静态类型系统」和部分 ES6+ 以上的语法特性。
2. 核心价值：
   • 「提前报错」：编译阶段（运行前）就能发现类型错误，避免 JS 运行时才暴露问题（尤其适合大型项目）。
   • 「代码提示」：编辑器提供精准的代码补全、接口提示，提升开发效率。
   • 「代码可维护性」：类型注解让代码语义更清晰，便于团队协作和后续重构。
3. 运行流程：TS 无法直接在浏览器/Node.js 中运行，需要通过 TypeScript 编译器（tsc） 编译为 JS 代码，再执行。
4. 适用场景：中大型前端项目（React/Vue/Angular）、Node.js 后端项目，小型项目可酌情使用（避免增加配置成本）。

二、前置准备：快速搭建 TS 环境

1. 安装 TypeScript（全局安装，用于提供 tsc 编译命令）

npm install -g typescript

2. 验证安装

tsc -v # 输出版本号即安装成功（如 Version 5.3.3）

3. 简单示例运行
   • 步骤 1：创建 hello.ts 文件，写入 TS 代码

   // 定义变量并指定类型
   const message: string = "Hello TypeScript!";
   console.log(message);
   

   • 步骤 2：编译 TS 为 JS

   tsc hello.ts # 生成 hello.js 文件（兼容 ES5 语法）
   

   • 步骤 3：运行 JS 代码

   node hello.js # 输出：Hello TypeScript!
   

4. 可选：配置 tsconfig.json（项目级配置，指定编译规则，执行 tsc --init 生成）

三、TS 核心常用语法（高频）

TS 的核心是「类型注解」，即给变量、函数、对象等指定明确的类型，以下是企业开发中最常用的语法。

1. 基础类型（原始类型）

TS 支持 JS 的原始类型，并增加了 void、never 等特殊类型，语法：变量名: 类型 = 值。

// 1. 字符串类型
const username: string = "张三";
// 2. 数字类型（整数/浮点数/NaN 都支持）
const age: number = 28;
const price: number = 99.9;
// 3. 布尔类型
const isAdult: boolean = true;
// 4. 空值类型（void：通常用于函数无返回值）
function sayHello(): void {
  console.log("Hello!"); // 无 return 语句，返回值为 void
}
// 5. 空类型（null/undefined：默认是所有类型的子类型）
const nullValue: null = null;
const undefinedValue: undefined = undefined;

2. 复杂类型（引用类型）

（1）数组类型

两种声明方式，推荐第一种（更清晰）。

// 方式 1：类型[]
const userIds: number[] = [1, 2, 3, 4];
const names: string[] = ["张三", "李四", "王五"];
// 方式 2：Array<类型>
const ages: Array<number> = [25, 28, 30];

（2）对象类型（接口 Interface / 类型别名 Type Alias）

用于约束对象的结构（字段名、字段类型、是否可选），是 TS 中最常用的语法之一。

• 接口（Interface）：推荐用于约束对象、类的结构，支持「继承」。

// 定义接口（约束用户对象结构）
interface User {
  id: number; // 必选字段
  name: string; // 必选字段
  age?: number; // 可选字段（加 ? 表示可省略）
  readonly gender: string; // 只读字段（初始化后不可修改）
}

// 使用接口约束变量
const user: User = {
  id: 1,
  name: "张三",
  gender: "男" // 只读字段，初始化后不可修改
  // age 可选，可省略
};

// 接口继承（复用已有接口结构）
interface UserDetail extends User {
  address: string; // 新增字段
}

const userDetail: UserDetail = {
  id: 2,
  name: "李四",
  gender: "男",
  address: "北京市"
};

• 类型别名（Type Alias）：更灵活，可约束任意类型（对象、数组、原始类型等），支持「联合类型」。

// 定义类型别名（约束订单对象）
type Order = {
  orderId: number;
  orderAmount: number;
  createTime: string;
};

// 使用类型别名
const order: Order = {
  orderId: 1001,
  orderAmount: 999.9,
  createTime: "2026-02-04"
};

// 联合类型（变量可以是多种类型之一）
type Status = "success" | "fail" | "pending";
const orderStatus: Status = "success"; // 只能取这三个值之一

3. 函数类型

约束函数的「参数类型」和「返回值类型」，避免传入错误类型的参数。

// 1. 普通函数（明确参数类型和返回值类型）
function add(a: number, b: number): number {
  return a + b; // 必须返回数字类型，否则编译报错
}

const result = add(1, 2); // 正确
// const result2 = add(1, "2"); // 报错：第二个参数应为 number 类型

// 2. 可选参数（加 ?，必须放在必选参数后面）
function getUserInfo(id: number, name?: string): string {
  return name ? `ID: ${id}, 姓名: ${name}` : `ID: ${id}`;
}

// 3. 箭头函数（常用在 React/Vue 中）
const multiply = (a: number, b: number): number => {
  return a * b;
};

4. 类型推断

TS 具有「类型推断」能力，当变量初始化时，可省略类型注解，TS 会自动推断变量类型（简化代码）。

// 无需指定类型，TS 自动推断为 string 类型
const message = "Hello TS";
// message = 123; // 报错：无法将 number 类型赋值给 string 类型

// 函数返回值也可自动推断（推荐明确指定，更清晰）
function subtract(a: number, b: number) {
  return a - b; // TS 自动推断返回值为 number 类型
}

5. 泛型（Generic）

解决「类型复用」问题，让函数/接口/类支持多种类型，而无需写多个重复的类型约束（企业开发高频使用）。

// 泛型函数：T 是类型变量，代表任意类型，调用时指定具体类型
function getArray<T>(data: T, length: number): T[] {
  return new Array(length).fill(data);
}

// 调用时指定类型为 number，返回 number[] 数组
const numberArray = getArray<number>(1, 3); // [1, 1, 1]
// 调用时指定类型为 string，返回 string[] 数组
const stringArray = getArray<string>("a", 3); // ["a", "a", "a"]

四、TS 与 JS 的核心区别

对比维度	TypeScript	JavaScript
类型系统	静态类型（编译阶段检查类型）	动态类型（运行阶段检查类型）
报错时机	编译阶段（运行前）	运行阶段（运行时）
代码提示	精准补全、接口提示，开发效率高	提示有限，依赖开发者经验
项目适配	中大型项目、团队协作项目	小型项目、快速原型开发
运行方式	需编译为 JS 才能运行	可直接在浏览器/Node.js 中运行
学习成本	略高（需掌握类型语法、泛型等）	较低（语法简单，入门快）

五、实战价值：为什么企业项目优先用 TS

1. 减少 Bug：编译阶段发现类型错误，避免线上因类型问题导致的故障（如把字符串当数字运算）。
2. 提升开发效率：编辑器（VS Code）提供精准的代码补全、接口提示，减少查文档和拼写错误的时间。
3. 便于团队协作：类型注解让代码语义更清晰，新人接手项目时能快速理解变量、函数的用途。
4. 更好的兼容性：TS 可编译为不同版本的 JS（如 ES5），兼容低版本浏览器。
5. 生态完善：主流前端框架（React/Vue/Angular）、库都提供了完善的 TS 类型支持。

总结

1. TypeScript 是 JavaScript 的超集，核心新增「静态类型系统」，编译为 JS 后运行。
2. 核心常用语法：基础类型、接口/类型别名、函数类型、泛型，掌握这些可应对 80% 的日常开发。
3. TS 的核心价值是「提前报错」和「提升开发效率」，是中大型前端/Node.js 项目的首选。
4. 入门 TS 可从「类型注解」开始，逐步过渡到「泛型」等高级语法，无需一次性掌握所有特性。