📝 TypeScript 终极复习清单（10 分钟全览）

---

1️⃣ 基础语法

• 变量声明：let / const，类型可省略（TS 自动推断）

• 基本类型：number, string, boolean, null, undefined, any, unknown, never

• 数组/元组

const arr: number[] = [1,2,3]
const tuple: [string, number] = ['a', 1]

• 枚举/字面量类型

type Role = 'admin' | 'user'
enum RoleEnum { Admin, User }

---

2️⃣ 函数与泛型

• 函数类型

function add(a: number, b: number): number { return a + b }

• 可选参数 & 默认参数

function greet(name?: string) {}

• 泛型函数

function identity<T>(arg: T): T { return arg }

• 泛型约束

function merge<T extends object, U extends object>(a: T, b: U): T & U { return {...a,...b} }

---

3️⃣ 对象与类型别名

• interface / type

interface User { id: number; name: string }
type PartialUser = Partial<User>

• Mapped Types

type Nullable<T> = { [K in keyof T]: T[K] | null }
type RemoveNullable<T> = { [K in keyof T as Exclude<K,'id'>]: T[K] }

• 工具类型：Partial<T>, Required<T>, Pick<T,K>, Omit<T,K>, Record<K,T>, ReturnType<T>, Parameters<T>

---

4️⃣ 高阶类型模板

• 深度可选/深度只读

type DeepPartial<T> = { [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K] }
type DeepReadonly<T> = { readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K] }

• 按值类型筛选

type PickByType<T,V> = { [K in keyof T as T[K] extends V ? K : never]: T[K] }
type OmitByType<T,V> = { [K in keyof T as T[K] extends V ? never : K]: T[K] }

• 联合转交叉

type UnionToIntersection<U> = (U extends any ? (k: U)=>void : never) extends ((k: infer I)=>void) ? I : never

• 元组工具

type First<T extends any[]> = T extends [infer F, ...any[]] ? F : never
type Last<T extends any[]> = T extends [...any[], infer L] ? L : never

• 异步返回类型

type ReturnTypeAsync<T> = T extends (...args:any)=>Promise<infer R> ? R : never

---

5️⃣ React / Vue 高阶

• React Hooks

const [state, setState] = useState<number>(0)
const ref = useRef<HTMLInputElement>(null)
const [count, dispatch] = useReducer(reducer, 0)

• 泛型组件

type ListProps<T> = { items: T[], render: (item:T)=>React.ReactNode }
function List<T>({items, render}:ListProps<T>) { return <>{items.map(render)}</> }

• Vue Composition API

const count = ref<number>(0)
const double = computed(() => count.value * 2)

---

6️⃣ Node / API 类型

• Express

app.get('/user/:id', (req: Request<{id:string}>, res: Response) => {})

• 统一接口类型

interface ApiResponse<T> { code: number; message: string; data: T }
async function fetchUser(): Promise<ApiResponse<User>> { ... }

---

7️⃣ 模块与全局声明

• global.d.ts：全局变量 / 接口

declare global {
  interface Window { __APP_VERSION__: string }
  const __BUILD_TIME__: string
}

• module.d.ts：模块或资源类型声明

declare module '*.png'
declare module '*.scss' { const classes: {[key:string]:string}; export default classes }
declare module 'legacy-lib' { export function init(): void }

---

8️⃣ 类型守卫 & 类型安全技巧

• 自定义类型守卫

function isString(value: unknown): value is string { return typeof value === 'string' }

• 事件系统类型安全

type Events = { login: {user:string} }
class EventBus<E> { on<K extends keyof E>(event:K, cb:(p:E[K])=>void); emit<K extends keyof E>(event:K, p:E[K]) }

• Template Literal + Capitalize

type EventHandler = `on${Capitalize<'click'|'hover'>}` // onClick | onHover

---

9️⃣ 团队 & 项目实践

1. 开启 "strict": true

2. 接口统一放 types/

3. 工具类型集中出口 types/index.ts

4. 推断优先，避免冗余类型

5. global.d.ts 管理全局变量

6. module.d.ts 管理资源导入/无类型库

---

🔟 小结口诀

场景	技巧
基础类型	自动推断 + 明确可选/必选
对象类型	interface / type + Mapped Types
泛型	泛型约束 + 工具类型
高阶类型	DeepPartial / DeepReadonly / PickByType
React/Vue	Hooks + 泛型组件 + Ref
Node/API	Request/Response + ApiResponse
全局/模块	global.d.ts / module.d.ts
类型守卫	value is Type
事件系统	泛型 + 索引类型
模板字面量	on${Capitalize}