TypeScript 使用手册

1. TypeScript 简介

核心价值：

• 静态类型检查：编译时捕获类型错误（如 string 误用为 number）。
• 类型推导：自动推断变量类型（如 let age = 30 → age: number）。
• ES6+ 支持：支持类、模块、箭头函数等现代语法。
• 工具增强：编辑器智能提示、重构支持。

// 示例：类型错误检测
let price: number = 100;
price = "200"; // 🚨 编译错误：不能将类型 'string' 分配给类型 'number'

2. 环境搭建

安装：

npm install -g typescript  # 全局安装 TS 编译器
tsc --init                 # 生成 tsconfig.json

编译：

tsc app.ts                 # 编译单个文件
tsc                        # 编译所有文件（需 tsconfig.json）

3. 基础类型

内置类型：

let isDone: boolean = true;
let count: number = 42;
let name: string = "Alice";
let list: number[] = [1, 2, 3];      // 数组
let tuple: [string, number] = ["a", 1]; // 元组
let anything: any = "可以任意赋值";    // 慎用！
let nothing: void = undefined;       // 常用于无返回值的函数

特殊类型：

let u: undefined = undefined;       // 仅能赋值为 undefined
let n: null = null;                 // 仅能赋值为 null
let random: unknown = "Hello";      // 比 any 更安全的顶层类型
if (typeof random === "string") {
  console.log(random.length);       // 需类型收窄后才能操作
}

4. 接口（Interface）

定义对象结构：

interface User {
  id: number;
  name: string;
  email?: string;    // 可选属性
  readonly role: "admin" | "user"; // 只读属性 + 字面量联合类型
}

const alice: User = {
  id: 1,
  name: "Alice",
  role: "admin",     // ✅ 合法
};
alice.role = "user"; // 🚨 错误：只读属性不可修改

函数类型：

interface SearchFunc {
  (source: string, keyword: string): boolean; // 定义函数签名
}

const search: SearchFunc = (src, kw) => src.includes(kw);

5. 类（Class）

基础语法：

class Animal {
  private _age: number; // 私有属性（仅类内访问）
  constructor(public name: string, age: number) { // 参数属性简写
    this._age = age;
  }

  public move(distance: number = 0) {
    console.log(`${this.name} moved ${distance}m`);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

const dog = new Dog("Buddy", 3);
dog.bark();    // ✅ "Woof!"
dog.move(10);  // ✅ "Buddy moved 10m"

6. 泛型（Generics）

复用类型逻辑：

function identity<T>(arg: T): T { // T 是类型变量
  return arg;
}
const output = identity<string>("hello"); // 显式指定 T 为 string
const inferred = identity(42);           // 自动推导 T 为 number

// 泛型约束
interface Lengthwise {
  length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // ✅ 因为 T 被约束为有 length 属性
  return arg;
}

7. 高级类型

联合类型（Union）：

type Status = "pending" | "success" | "error"; // 字面量联合
type ID = number | string;                    // 类型联合

function printId(id: ID) {
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // 类型收窄
  } else {
    console.log(id.toFixed(2));
  }
}

交叉类型（Intersection）：

interface Employee {
  id: number;
  role: string;
}
interface Contact {
  email: string;
}
type EmployeeContact = Employee & Contact; // 合并类型

const emp: EmployeeContact = {
  id: 1,
  role: "dev",
  email: "dev@example.com",
};

类型别名（Type Alias）：

type Point = {
  x: number;
  y: number;
};
type Callback = (data: string) => void; // 函数类型别名

8. 模块系统

导出/导入：

// math.ts
export const PI = 3.14;
export function circleArea(radius: number): number {
  return PI * radius ** 2;
}

// app.ts
import { PI, circleArea } from "./math";
console.log(circleArea(10)); // 314

默认导出：

// logger.ts
export default class Logger {
  log(message: string) {
    console.log(message);
  }
}

// app.ts
import MyLogger from "./logger"; // 名称自由定义
const logger = new MyLogger();

9. 配置文件 tsconfig.json

关键配置项：

{
  "compilerOptions": {
    "target": "ES2020",        // 编译目标 JS 版本
    "module": "ESNext",        // 模块系统 (CommonJS/ES6)
    "strict": true,             // 启用所有严格检查
    "outDir": "./dist",         // 输出目录
    "esModuleInterop": true,    // 改进 CommonJS/ES6 互操作
    "skipLibCheck": true        // 跳过库类型检查（提升性能）
  },
  "include": ["src/**/*.ts"],  // 包含文件
  "exclude": ["node_modules"]   // 排除文件
}

---

10. 与 JavaScript 互操作

使用 .d.ts 类型声明：

// 为 JS 库提供类型（如 lodash）
declare module "lodash" {
  export function chunk<T>(array: T[], size: number): T[][];
}

渐进式迁移：

1. 将 .js 重命名为 .ts，逐步修复类型错误。
2. 使用 // @ts-ignore 临时忽略错误（慎用）。

---

最佳实践

1. 避免 any：优先用 unknown + 类型收窄。
2. 启用严格模式：tsconfig.json 中设置 "strict": true。
3. 类型即文档：为函数/接口添加 JSDoc 注释：

   /** 计算用户折扣后的价格 */
   function applyDiscount(price: number, discount: number): number {
     return price * (1 - discount);
   }

4. 使用工具链：
   • ESLint：代码规范检查
   • Prettier：代码格式化
   • ts-node：直接运行 TS 文件

延伸学习：

• 官方 Handbook
• TypeScript Playground（在线实验）
• 高级主题：装饰器、条件类型、映射类型

通过类型系统提升代码健壮性，享受开发效率与维护性的双重提升！ 🚀