TypeScript-从0开始-20260408

TypeScript

一、TypeScript 优缺点与集成

1. TypeScript 与 JavaScript 的区别

问题：TypeScript 与 JavaScript 的区别

答案： 核心回答：TypeScript 是 JavaScript 的超集，增加了静态类型检查和面向对象特性。

详细说明：

方面	JavaScript	TypeScript
类型系统	动态类型	静态类型（可选）
编译	解释执行	编译为 JS
类型推断	无	有
接口/泛型	无	有
编译时检查	无	有
IDE 支持	一般	优秀

代码示例：

// TypeScript 类型注解
let name: string = '张三';
let age: number = 25;
let isActive: boolean = true;

// 函数类型
function greet(name: string): string {
    return `Hello, ${name}`;
}

// 接口
interface User {
    name: string;
    age: number;
    email?: string; // 可选属性
}

const user: User = {
    name: '张三',
    age: 25
};

// 泛型
function identity<T>(arg: T): T {
    return arg;
}

---

2. TypeScript 的优势

问题：TypeScript 的优势

答案： 核心回答：TypeScript 提供类型安全、更好的 IDE 支持、更易维护的大型代码库。

代码示例：

// 类型安全
function processUser(user: User) {
    console.log(user.name);
}
processUser({ name: '张三', age: 25 }); // 正确
// processUser('invalid'); // 编译错误

// 代码补全
// IDE 会提示 string 方法

// 重构支持
// 类型定义使得重构更安全

---

3. TypeScript 的缺点

问题：TypeScript 的缺点

答案： 核心回答：需要编译步骤、类型定义可能繁琐、有学习成本。

代码示例：

// 1. 需要编译
// tsc main.ts

// 2. 类型定义繁琐
const config: {
    apiUrl: string;
    timeout: number;
    headers?: Record<string, string>;
} = {
    apiUrl: 'https://api.example.com',
    timeout: 3000
};

// 3. any 类型滥用会失去类型安全
function legacy(data: any) {
    return data.foo.bar;
}

---

4. TypeScript 编译原理

问题：TypeScript 编译原理

答案： 核心回答：TypeScript 编译器解析源码生成 AST，绑定符号，进行类型检查，最后输出 JavaScript。

代码示例：

// TypeScript 编译流程
// 1. 解析 - 源码 → AST
// 2. 绑定 - 创建符号表
// 3. 检查 - 类型检查
// 4. 发射 - 输出 JS

---

5. TypeScript 类型声明

问题：TypeScript 类型声明

答案： 核心回答：使用 declare 或 .d.ts 文件声明类型。

代码示例：

// 声明模块
declare module 'my-module' {
    export function doSomething(): void;
}

// 声明全局变量
declare const GLOBAL_CONFIG: {
    apiUrl: string;
};

// .d.ts 文件示例
interface Window {
    myPlugin: {
        init(): void;
        destroy(): void;
    };
}

---

二、TypeScript 配置与编译

6. 编译选项

问题：编译选项

答案： 核心回答：tsconfig.json 中的 compilerOptions 控制编译行为。

代码示例：

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "ESNext",
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "outDir": "./dist",
        "rootDir": "./src",
        "declaration": true,
        "sourceMap": true
    }
}

---

7. strict 选项

问题：strict 选项

答案： 核心回答：启用所有严格类型检查选项。

代码示例：

{
    "compilerOptions": {
        "strict": true
    }
}

---

三、其他 TypeScript 特性

8. 枚举

问题：TypeScript 枚举

答案： 核心回答：枚举是一组命名常量，分为数字枚举和字符串枚举。

代码示例：

// 数字枚举
enum Direction {
    Up,    // 0
    Down,  // 1
    Left,  // 2
    Right  // 3
}

// 字符串枚举
enum Message {
    Success = '操作成功',
    Error = '操作失败'
}

// const 枚举
const enum Color {
    Red = '#ff0000'
}

---

9. never 类型

问题：never 类型

答案： 核心回答：never 表示永不返回的类型。

代码示例：

// 函数永不返回
function throwError(msg: string): never {
    throw new Error(msg);
}

function infiniteLoop(): never {
    while (true) {}
}

---

10. unknown 类型

问题：unknown 类型

答案： 核心回答：unknown 是安全的 any，必须进行类型检查后才能使用。

代码示例：

let unknownValue: unknown;
// unknownValue.toFixed(2); // Error
if (typeof unknownValue === 'number') {
    unknownValue.toFixed(2); // OK
}

---

11. 元组

问题：TypeScript 元组

答案： 核心回答：元组是固定长度、每元素类型已知的数组。

代码示例：

let tuple: [string, number];
tuple = ['hello', 42];

// 解构
const [name, age] = tuple;

// 函数返回元组
function getUser(): [string, number] {
    return ['张三', 25];
}

---

12. 函数重载

问题：TypeScript 函数重载

答案： 核心回答：同一函数名不同参数类型的多个签名。

代码示例：

function reverse(str: string): string;
function reverse(arr: number[]): number[];
function reverse<T>(value: T[] | string): T[] | string {
    if (typeof value === 'string') {
        return value.split('').reverse().join('');
    }
    return value.slice().reverse();
}

---

13. 泛型

问题：泛型

答案： 核心回答：泛型是创建可复用组件的类型变量。

代码示例：

// 泛型函数
function identity<T>(arg: T): T {
    return arg;
}

// 泛型接口
interface Container<T> {
    value: T;
}

// 泛型约束
function longest<T extends { length: number }>(a: T, b: T): T {
    return a.length > b.length ? a : b;
}

---

14. 类型推断与类型断言

问题：类型推断与类型断言

答案： 核心回答：TypeScript 自动推断类型，类型断言强制指定类型。

代码示例：

// 类型推断
let x = 3; // number
let y = [1, 2, 3]; // number[]

// 类型断言
let someValue: unknown = 'hello';
let strLength: number = (someValue as string).length;

// 非空断言
element!.style.color = 'red';

---

15. 接口与类型别名

问题：type 与 interface 的区别

答案： 核心回答：interface 用于对象结构，type 用于联合类型等复杂类型。

代码示例：

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

// type
type Point = { x: number; y: number };
type Color = 'red' | 'green' | 'blue';

// 区别：interface 可声明合并
interface A { a: number; }
interface A { b: string; }

---

16. 装饰器

问题：装饰器

答案： 核心回答：装饰器是修改类行为的特殊函数。

代码示例：

// 方法装饰器
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const original = descriptor.value;
    descriptor.value = function(...args: any[]) {
        console.log(`Calling ${propertyKey}`);
        return original.apply(this, args);
    };
}

class Calculator {
    @log
    add(a: number, b: number): number {
        return a + b;
    }
}

---

四、工具类型

17. 常用工具类型

问题：常用工具类型

答案： 核心回答：Partial、Required、Readonly、Pick、Omit 等是内置工具类型。

代码示例：

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

// Partial - 所有属性可选
type PartialUser = Partial<User>;

// Required - 所有属性必需
type RequiredUser = Required<User>;

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

// Pick - 选取部分属性
type UserPreview = Pick<User, 'name' | 'email'>;

// Omit - 排除部分属性
type UserWithoutAge = Omit<User, 'age'>;

// ReturnType - 获取函数返回类型
function getUser() { return { name: '张三' }; }
type UserType = ReturnType<typeof getUser>;