TypeScript 入门：给 JavaScript 加类型

TypeScript（TS）是 JavaScript 的超集，最大的改进是加入了静态类型系统。它能在编译时发现错误，让大型项目更可靠，已成为前端主流。

一、为什么用 TypeScript

• 编译时类型检查，减少运行时错误
• IDE 智能提示更强大
• 重构更安全、更放心
• 代码即文档，类型即契约

二、基础类型

let name: string = "张三";
let age: number = 25;
let isStudent: boolean = true;
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ["张三", 25];

三、接口（Interface）

interface User {
  id: number;
  name: string;
  age?: number;          // 可选属性
  readonly email: string; // 只读
}

function greet(user: User) {
  console.log(user.name);
}

四、类型别名

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

五、泛型

泛型让函数/类型可复用，类似"类型变量"：

function first(arr: T[]): T {
  return arr[0];
}
const n = first([1, 2, 3]);        // T 推断为 number
const s = first(['a', 'b']);        // T 推断为 string

泛型初学抽象，但理解"T 是占位类型，调用时确定"后就清晰了。它让工具函数、数据结构能保持类型信息。

六、工具类型

Partial          // 所有属性变可选
Required         // 所有属性变必填
Pick// 只选部分属性
Omit    // 排除部分属性
Readonly         // 全部只读

七、类型断言

const el = document.getElementById('app') as HTMLDivElement;
// 或
const el2 = document.getElementById('app');

八、小结

TypeScript 是前端进阶的必修课。类型系统初学有学习成本，但带来的开发体验和代码质量提升是巨大的。建议新项目直接用 TS。