源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

TypeScript 类型系统

2026/04/14
3
0

引言

TypeScript 是 JavaScript 的超集，提供了静态类型检查功能，极大提升了代码的可读性和可维护性。TypeScript 类型系统包含：基本类型、数组、元组、枚举、对象、函数、联合类型、交叉类型、任意类型、void、null、undefined、never 等。这套类型系统可以帮助开发者精准定义变量、函数参数和返回值，减少潜在错误，提高开发效率。

类型注解

类型注解是 TypeScript 中指定变量、函数参数、返回值类型的核心机制。通过类型注解，编译器会在编译阶段捕获类型错误，从源头提升代码质量。

// number 就是类型注解
let age: number = 18;

  • 作用：为变量添加类型约束，确保变量的值始终符合预期的类型

  • 规则：语法为 变量名: 类型，冒号前后可加空格增强可读性

  • 限制：一旦定义类型，变量只能赋值对应类型的值，否则编译器会报错

基本类型

TypeScript 的基本类型分为两类：JavaScript 原有类型 和 TypeScript 新增类型，覆盖了开发中所有场景的类型定义。

JS 原有类型

完全兼容 JavaScript 的所有基础类型，无任何学习成本：

原始类型

  • number：数值类型（整数、浮点数）

  • string：字符串类型

  • boolean：布尔类型（true / false）

  • null：空值

  • undefined：未定义值

  • symbol：ES 6 引入的唯一标识符

  • bigint：ES 11 引入的大整数类型

对象类型

  • object：引用类型，包含数组、普通对象、函数等

TS 新增类型

为静态类型检查扩展的专用类型：

  • 联合类型：一个值可以是多种类型之一

  • 交叉类型：合并多个类型的所有属性和方法

  • 类型别名：自定义类型名称，简化复杂类型书写

  • 接口：定义对象 / 函数的标准结构

  • 元组：固定长度、固定类型的数组

  • 字面量类型：约束变量为具体的值

  • 枚举：定义一组命名常量，提升代码语义化

  • void：函数无返回值时使用

  • any：任意类型，关闭类型检查

  • never：永远不会发生的值（如抛出异常、死循环）

// 基础类型完整示例
let age: number = 25;
let username: string = "John";
let isValid: boolean = true;
let data: null = null;
let status: undefined = undefined;
const key: symbol = Symbol("unique key");
let bigNumber: bigint = 100n;

数组类型

TypeScript 可以指定数组中元素的类型，保证数组元素的统一性，提供两种定义方式：

  • 元素类型 + 方括号 []（最常用）

  • 泛型写法 Array<元素类型>

// 方式 1：元素类型 + 方括号
let numbers: number[] = [1, 2, 3, 4, 5];

// 方式 2：泛型写法
let names: Array<string> = ["Alice", "Bob", "Charlie"];

// 任意类型数组（不推荐，丢失类型检查）
let mixedArray: any[] = [1, "two", true];

// 元组（特殊数组，固定长度+固定类型）
let tuple: [number, string, boolean] = [42, "TypeScript", true];

联合与交叉类型

联合类型

使用 | 符号连接多个类型，表示值可以是其中任意一种类型。

// 变量支持字符串/数字两种类型
let result: string | number;
result = "Hello, TypeScript";
result = 42;
// result = true; 报错：不支持布尔类型

// 函数参数使用联合类型
function formatInput(value: string | number): string {
  return typeof value === "string" ? value.toUpperCase() : value.toFixed(2);
}

console.log(formatInput("abc"));   // 输出: ABC
console.log(formatInput(123.456)); // 输出: 123.46

交叉类型

使用 & 符号连接多个类型，表示值必须同时满足所有类型，常用于合并对象类型。

type Name = { name: string };
type Age = { age: number };
// 交叉类型：同时拥有 name 和 age 属性
type Person = Name & Age;

const user: Person = { name: "Tom", age: 20 };

类型别名

使用 type 关键字定义类型别名，为复杂类型创建自定义名称，提升代码复用性和可读性。

  • 基础用法：简化联合 / 基础类型书写

// 定义类型别名
type UserID = string | number;
let userId: UserID = "user123";
userId = 456;

  • 复杂对象类型

type Person = {
  id: UserID;
  name: string;
  age: number;
};

let user: Person = { id: 789, name: "John Doe", age: 30 };

函数类型

TypeScript 可以精准定义函数参数类型和返回值类型，支持可选参数、默认参数、无返回值等场景。

// 1. 基础写法：指定参数 + 返回值类型
const add = (a: number, b: number): number => {
  return a + b;
};

// 2. 无返回值：使用 void 类型
const greet = (name: string): void => {
  console.log(`hi ${name}`);
};

// 3. 可选参数：参数名后加 ?，必须放在必选参数后
const addOptional = (a: number, b: number, c?: number): number => {
  return c ? a + b + c : a + b;
};

// 4. 默认参数：自带类型推导
const addDefault = (a: number, b: number = 10): number => a + b;

对象类型

TypeScript 中对象类型用于描述对象的结构（属性类型、方法类型），支持可选属性、只读属性。

// 定义对象类型
type Person = {
  name: string;       // 必选属性
  age: number;
  readonly gender: string; // 只读属性：不可修改
  hobby?: string;     // 可选属性
  sayHi(): void;      // 方法类型
};

// 使用对象类型约束变量
const person: Person = {
  name: "John",
  age: 25,
  gender: "male",
  sayHi() {
    console.log(`hi ${this.name}`);
  },
};

person.sayHi();
// person.gender = "female"; 报错：只读属性不可修改

接口

接口（interface）用于定义对象 / 函数的标准结构，是 TypeScript 中最常用的类型定义方式，支持扩展和声明合并。

// 定义接口
interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

// 使用接口约束对象
const person: Person = {
  name: "John",
  age: 25,
  sayHello() {
    console.log("Hello!");
  },
};

  • 使用场景：interface 专用于定义对象 / 类结构；type 更通用，可定义基础类型、联合类型等。

元组

元组（Tuple）是特殊的数组：固定长度 + 每个位置的元素类型固定，用于描述有序的异构数据。

// 定义元组：[字符串, 数字, 布尔]
let myTuple: [string, number, boolean] = ["John", 25, true];

应用场景

  • 函数返回多个值（替代对象，更简洁）

function getUserInfo(userId: string): [string, number] {
  return ["John Doe", 25];
}
const [name, age] = getUserInfo("123"); // 解构赋值，更优雅

  • 固定结构的数据集合

// 三维坐标
let coordinates: [number, number, number] = [10, 20, 30];

注意事项

  • 通过索引访问元素，类型严格匹配

  • 越界赋值不推荐，会破坏元组的类型约束

  • 可使用 readonly 定义只读元组：readonly [string, number]

类型推论

TypeScript 会自动推断变量类型，无需手动写类型注解，简化代码书写。

推论规则

  • 初始化赋值推论（最常用）：根据变量初始值自动推导类型

let message = "Hello, TypeScript!"; // 推论为 string
let count = 42;                    // 推论为 number
let isActive = true;               // 推论为 boolean

  • 联合类型推论：多类型赋值时自动推导为联合类型

let value = 42;
value = "Hello"; // 推论为 string | number

最佳实践

能自动推论的类型，无需手动写注解；无法推论的场景（如无初始值），必须写类型注解。

类型断言

类型断言是编译时的类型转换，告诉编译器「我确定这个值的类型」，不会改变运行时结构。 TypeScript 推荐使用 as 语法（兼容 JSX）。

两种写法

let value: any = "Hello, TypeScript!";

// 1. 尖括号语法（不推荐用于 JSX）
let length1: number = (<string>value).length;

// 2. as 语法（官方推荐）
let length2: number = (value as string).length;

常用场景

// 获取输入框元素，断言为 HTMLInputElement
const input = document.getElementById("myInput") as HTMLInputElement;
input.value = "TypeScript";

注意事项

  • 谨慎使用：断言会跳过类型检查，错误断言会导致运行时报错

  • 非空断言：! 告诉编译器值不为 null/undefined

    const el = document.getElementById("app")!;

总结

  1. 核心语法：类型注解是 TS 基础，变量: 类型 是最核心的书写格式；

  2. 类型分类：兼容 JS 原有类型，扩展了联合 / 交叉 / 元组 / 接口等专用类型；

  3. 简化书写：类型推论自动推导类型，类型别名 / 接口复用类型定义；

  4. 实用技巧：ts-node 直接运行 TS 代码，类型断言用于 DOM 等特殊场景。