Typescript 基础复习 - 速通版

TS 并不改变 JS 运行时行为——所有类型在编译后都被擦除，它是给开发者和编译器看的'文档 + 校验器'，不影响线上性能。

// 原始类型let name: string = "Tom";let age: number = 18;let isAdmin: boolean = true;// 数组：两种写法let list1: number[] = [1, 2, 3];let list2: Array<number> = [1, 2, 3];// 元组 Tuple：固定长度、各位置类型已知let pair: [string, number] = ["id", 42];// 空值类let u: undefined = undefined;let n: null = null;function log(): void { console.log("hi"); }// 任意类型（尽量少用）let anything: any = 1;anything = "now string"; // 不报错——绕过了类型检查

// 开发者显式写明类型function greet(name: string): string {  return `Hello, ${name}`;}

// 编译器自动推导，不用写let x = 1;        // 推断为 numberlet arr = [1, 2]; // 推断为 number[]// 推断不出时必须显式标注：let v;     // 推断为 any（strict 下 noImplicitAny 会报错）function add(a: number, b: number) { return a + b; }// 返回值也能推断，但公共 API 建议显式写 return 类型

// interface 可声明合并（同名多次声明会合并）——常用于扩展第三方库interface Window { myPlugin: Plugin }interface Window { other: string } // 合并，不报错// type 能做 interface 做不了的事type ID = string | number;          // 联合type Point = { x: number } & { y: number }; // 交叉type Gender = "male" | "female";      // 字面量联合type Pair = [string, number];          // 元组

function printId(id: string | number) {  console.log(id);}

type WithName = { name: string };type WithAge  = { age: number };type Person = WithName & WithAge;// { name: string; age: number }

let dir: "up" | "down" | "left" | "right";dir = "up";   // OK// dir = "middle"; // 报错——只能取这四个字面量之一const n = 42;    // const 推断为字面量类型 42let  m = 42;     // let 推断为 number（可变）

// 完整标注：(参数) => 返回值type Add = (a: number, b: number) => number;const add: Add = (a, b) => a + b;// 可选参数 ? / 默认值 / 剩余参数function fn(a: string, b?: number, c: boolean = false, ...rest: string[]) {}// 函数重载：同一个函数根据入参返回不同类型// 【1】重载签名（只写类型，没有函数体）：多个，供 TS 做类型匹配function format(input: string): string;function format(input: number): string[];// 【2】实现签名（带函数体）：只能有 1 个，必须兼容上面所有重载签名function format(input: string | number): string | string[] {  // 实现签名（对外不可见）  return typeof input === "string" ? input : [`#${input}`];}

// 不用泛型：丢失类型function identity1(arg: any): any { return arg; }// 用泛型 T：传入什么类型，返回就是什么类型function identity<T>(arg: T): T { return arg; }const s = identity<string>("hi"); // s: string// 泛型约束 extends：要求 T 至少有某些结构function len<T extends { length: number }>(x: T): number {  return x.length;}// 常见用法：泛型函数 / 泛型接口 / 泛型工具类型interface ApiResponse<T> {  code: number;  data: T;  msg: string;}type UserResp = ApiResponse<{ id: number; name: string }>;

// 数字枚举：默认从 0 自增，可手动指定enum Direction { Up = 1, Down, Left, Right }// Up=1, Down=2, Left=3, Right=4// 字符串枚举：可读性好，序列化友好enum OrderStatus {  PENDING = "PENDING",  PAID    = "PAID",  SHIPPED = "SHIPPED",}// 常量枚举：编译时内联，不生成对象，体积更小const enum Color { Red, Green, Blue }// 相当于：const enum Color {  Red,    // 0 （默认从0开始自增）  Green,  // 1  Blue    // 2}// 也可以手动赋值：const enum Color {  Red = 10,  Green, // 11  Blue = 20}

enum Color { Red = 0, Green = 1 }// 编译后 JS 对象是双向的：// Color[0] = "Red";// Color["Red"] = 0;const val = Color[0]; // ✅ 运行时可以拿到 "Red"

const Colors = ['red','green'] as const; // readonly ["red", "green"]type Color = typeof Colors[number]; //  "red" | "green"

type T = readonly ["red", "green"];type Color = T[number]; // 等价于 "red" | "green"

const el = document.querySelector("#name") as HTMLInputElement;el.value; // 断言后能访问 value// 另一种写法（在 .tsx 里必须用 as，避免 <> 被当成 JSX）const s = <string>input;// 相当于：const s = input as string

// typeof 守卫function toUpper(x: string | number) {  if (typeof x === "string") {    x.toUpperCase(); // 这里 x 被收窄为 string  }}// instanceof / in 守卫if (x instanceof Date) x.getFullYear();if ("id" in obj) obj.id;// 自定义类型谓词 (value is Type)function isString(v: unknown): v is string {  return typeof v === "string";}

interface User {   id: number;   name: string;   email: string }type UserUpdate = Partial<User>;          // 全可选type UserName   = Pick<User, "id" | "name">; // 只留 id, nametype UserNoMail = Omit<User, "email">;    // 去掉 emailtype UserMap    = Record<number, User>;     // { [id]: User }

// 内置 ReturnType 实现，提取函数返回类型type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

T extends (...args: any[]) => infer R  // 判断 T 是否是函数类型

type MyAwaited<T> = T extends Promise<infer V> ? V : T;type P = Promise<number>;// 拿到 Promise 包裹的类型type Res = MyAwaited<P>; // number// 不是 promisetype Res2 = MyAwaited<string>; // string

type MyParameters<T> = T extends (...args: infer Args) => any ? Args : never;type Fn = (a: number, b: string) => void;type Params = MyParameters<Fn>; // [number, string]

type GetArrayItem<T> = T extends (infer Item)[] ? Item : T;type T1 = GetArrayItem<string[]>; // stringtype T2 = GetArrayItem<number[]>; // numbertype T3 = GetArrayItem<boolean>; // boolean

let u: unknown = 123;u.length; // ❌ 报错！不能直接访问属性let s: string = u; // ❌ 不能直接赋值// ✅ 必须收窄后才能使用if (typeof u === "string") {  let s: string = u;  console.log(u.length);}

// 场景1：抛出异常，永远没有返回值 → neverfunction crash(): never {  throw new Error("boom");}// 场景2：死循环，永远不会返回function loop(): never {  while(true) {}}

type Shape =   | { type: "circle"; r: number }  | { type: "square"; size: number }  | { type: "rect"; w: number; h: number };function getArea(shape: Shape) {  switch (shape.type) {    case "circle":      return Math.PI * shape.r **2;    case "square":      return shape.size **2;    case "rect":      return shape.w * shape.h;    default:      // ✅ 穷尽检查      const _exhaustiveCheck: never = shape;      throw new Error(`unknown shape: ${JSON.stringify(_exhaustiveCheck)}`);  }}

// 不写return，返回voidfunction log(): void {  console.log("hi");}// 可以return undefined，合法function log2(): void {  return undefined;}// ❌ 不能return其他值function log3(): void {  return 123;}

interfacePoint{ x: number; y: number }functiondraw(p: Point) {   console.log(p.x, p.y); }const obj = { x: 1, y: 2, z: 3 }; // 多了个 z，仍然兼容draw(obj); // OK：形状足够// 但对象字面量直接传会触发"多余属性检查"（excess property check）draw({ x:1, y:2, z:3 }); // 报错：对象字面量只能指定已知属性

项目里怎么配的 strict ？

strict = true 会自动开启下面所有选项：

{  "compilerOptions": {    "strict": true,    // 下面这些全部自动启用    "noImplicitAny": true,    "noImplicitThis": true,    "strictNullChecks": true,    "strictFunctionTypes": true,    "strictPropertyInitialization": true,    "strictBindCallApply": true,    "useUnknownInCatchVariables": true,    "alwaysStrict": true  }}

⭐ strictNullChecks

默认关闭时：`string` 类型变量 可以赋值 null /undefined。

开启后：`string`  不包含 null、undefined，必须显式写联合类型 `string | null`。

 解决大量空值导致的运行时报错，是 strict 里价值最高的一项之一。

后续再介绍 zod 相关的结合 AI 结构化输出 等内容。