当前位置：首页 > article >正文

解释 TypeScript 中的类型系统，如何定义和使用类型？

article 2025/3/13 6:56:35

1. 类型系统的核心作用

TypeScript类型系统本质上是JavaScript的静态类型增强方案，提供三个核心价值：

开发阶段类型检查（类似编译时eslint）
更清晰的API文档（类型即文档）
更好的IDE自动补全支持

代码示例：

// 错误示范：未指定类型导致潜在隐患
function add(a, b) {
  return a + b;
}
add('hello', 123); // 运行时错误但编译期不报错

// 正确类型标注
function add(a: number, b: number): number {
  return a + b;
}
add('hello', 123); // 编译时报错：类型不匹配

2. 类型定义方式（重点考察点）

(1) 基础类型

// 原生类型
let name: string = 'Alice';
let age: number = 28;
let isStudent: boolean = true;

// 数组类型
let hobbies: string[] = ['reading', 'coding'];
let scores: number[] = [90, 85, 92];

// 元组类型（固定长度的异构数组）
let user: [string, number] = ['Bob', 30];

(2) 接口（Interface）

用于描述对象结构的最常用方式

interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
  address: {
    city: string;
    zipCode: string;
  };
}

// 正确实现
const user: User = {
  id: 1,
  name: 'Charlie',
  address: { city: 'Shanghai', zipCode: '200000' }
};

// 错误实现（缺少必要属性）
const invalidUser = { name: 'David' }; // 编译报错

(3) 类型别名（Type Alias）

适用于复杂类型抽象

type Point = {
  x: number;
  y: number;
};

type Rectangle = {
  topLeft: Point;
  bottomRight: Point;
};

// 更复杂的联合类型
type ResponseData<T> = {
  data: T;
  error?: string;
};

(4) 联合类型（Union Types）

处理多种可能类型

function processInput(value: string | number) {
  if (typeof value === 'string') {
    console.log(`String input: ${value}`);
  } else {
    console.log(`Number input: ${value.toFixed(2)}`);
  }
}

processInput('hello');    // 执行字符串分支
processInput(42);       // 执行数字分支
processInput(true);      // 编译时报错：类型不在联合类型中

(5) 交叉类型（Intersection Types）

合并多个类型特征

interface Serializable {
  serialize(): string;
}

class Person {
  name: string;
  age: number;
}

// 创建同时满足两个条件的类型
type SerializablePerson = Person & Serializable;

class SerializablePersonImpl extends Person implements Serializable {
  serialize() {
    return JSON.stringify({ name: this.name, age: this.age });
  }
}

3. 高级类型技巧

(1) 类型推断（Type Inference）

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Alice', age: 30 };
const userName = getProperty(user, 'name'); // 推断为string类型

(2) 类型守卫（Type Guards）

function isNumber(value: any): value is number {
  return typeof value === 'number';
}

function printValue(value: any) {
  if (isNumber(value)) {
    console.log(`Number: ${value}`); // 类型被缩小为number
  } else {
    console.log(`String: ${value}`); // 类型被缩小为string
  }
}

(3) 映射类型（Mapped Types）

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

interface User {
  name: string;
  age: number;
}

type ReadonlyUser = Readonly<User>; 
// 所有属性变为只读

4. 日常开发实践建议

(1) 严格模式配置

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

strict模式开启后：
- 所有变量必须有显式类型声明
- 不能将null/undefined赋值给非允许类型
- 函数参数必须显式标注类型

(2) 合理使用any类型

// 不推荐
function handleData(data: any) {
  console.log(data.name); // 可能存在运行时错误
}

// 推荐改进
function handleData(data: { name: string }) {
  console.log(data.name);
}

// 必要时使用类型断言
const userInput = document.querySelector('#input') as HTMLInputElement;

(3) 类型安全的API设计

// 错误示范：返回不确定类型
function fetchUserData(id: number) {
  return fetch(`/api/users/${id}`).then(response => response.json());
}

// 正确实现
interface UserResponse {
  id: number;
  name: string;
  email: string;
}

async function fetchUserData(id: number): Promise<UserResponse> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error('Network error');
  }
  return response.json() as UserResponse; // 显式断言类型
}

(4) 类型别名的合理使用

// 不推荐过度嵌套
type DeepReadonly<T> = {
  readonly [P in keyof T]-?: DeepReadonly<T[P]>;
};

// 推荐分层抽象
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

type DeepReadonly<T> = {
  readonly [P in keyof T]: DeepReadonly<T[P]>;
};

5. 常见陷阱与注意事项

(1) 类型合并冲突

interface A {
  x: number;
}

interface B {
  x: string;
}

// 合并会产生联合类型 {x: number} | {x: string}
type C = A & B; // 编译错误：类型不兼容

(2) 函数重载歧义

function process(value: number): number;
function process(value: string): string;

function process(value: any) {
  if (typeof value === 'number') return value * 2;
  else return value.toUpperCase();
}

// 更好的实现方式
function process<T>(value: T): T extends number ? number : string {
  return typeof value === 'number' ? value * 2 : value.toUpperCase();
}

(3) 类型推断失效场景

function createArray<T>(length: number, value: T): T[] {
  return Array(length).fill(value);
}

const result = createArray(3, 'hello'); // 正确推断为string[]
const numericResult = createArray(3, 5); // 正确推断为number[]

6. 性能考量

类型定义不会影响运行时性能（TS编译后生成纯JS）
复杂类型系统会增加编译时间，建议：
- 合理拆分大型类型定义
- 使用条件类型代替深度递归结构
- 避免不必要的类型运算符

7. 工具类型实战

// Partial类型：将所有属性变为可选
type PartialUser = Partial<User>;

// Required类型：将所有属性变为必选
type RequiredUser = Required<User>;

// Omit类型：排除指定属性
type PublicUser = Omit<User, 'email'>;

// Extract类型：提取共有类型
type CommonProps = Extract<User, Admin>; 

// Readonly类型：只读属性集合
type ReadonlyUser = Readonly<User>;

// Record类型：键值对映射
type AgeMap = Record<string, number>;