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

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>;