TypeScript 核心知识点（覆盖 90% 开发场景）

一、基础语法（20%）------ 搞定类型标注的核心规则

1. 基础类型（必懂）

ini 复制代码

// 原始类型（TS 自动推断，也可手动标注）
const str: string = "hello";
const num: number = 100;
const bool: boolean = true;
const n: null = null;
const u: undefined = undefined;

// 数组（两种等价写法，推荐前者）
const arr1: string[] = ["a", "b"];
const arr2: Array<number> = [1, 2];

// 元组（固定长度+类型的数组）
const tuple: [string, number] = ["name", 18];

// 任意类型（尽量少用，兜底用 unknown 替代）
let anyVal: any = "任意值";
anyVal = 100; // 无类型校验

// 未知类型（安全的 any，需类型收窄才能用）
let unkVal: unknown = "未知值";
if (typeof unkVal === "string") {
  console.log(unkVal.length); // 类型收窄后可用
}

2. 接口 / 类型别名（核心，80% 场景用 interface）

typescript 复制代码

// 接口（支持扩展、合并，推荐用于对象类型）
interface User {
  id: number;
  name: string;
  age?: number; // 可选属性
  readonly phone: string; // 只读属性
}

// 类型别名（支持联合/交叉类型，更灵活）
type Status = "success" | "error" | "loading"; // 联合类型
type UserWithStatus = User & { status: Status }; // 交叉类型

// 接口扩展
interface AdminUser extends User {
  role: string;
}

3. 函数类型（必懂）

typescript 复制代码

// 函数参数+返回值标注
const add = (a: number, b: number): number => {
  return a + b;
};

// 可选参数（必须放最后）
const getUser = (id: number, name?: string): User => {
  return { id, name: name || "默认名", phone: "123456" };
};

// 函数类型别名（复用函数签名）
type Fn = (x: number) => number;
const double: Fn = (x) => x * 2;

二、核心场景（60%）------ 开发中高频用到的 TS 能力

1. 泛型（核心中的核心，解决类型复用）

typescript 复制代码

// 泛型函数（适配任意类型，保留类型安全）
function wrap<T>(value: T): { data: T } {
  return { data: value };
}
const res1 = wrap<string>("hello"); // { data: string }
const res2 = wrap<number>(100); // { data: number }

// 泛型接口（适配不同结构的返回数据）
interface ApiRes<T> {
  code: number;
  data: T;
}
// 复用：用户列表接口
type UserListRes = ApiRes<User[]>;
// 复用：商品接口
type GoodsRes = ApiRes<{ id: number; price: number }>;

// 泛型约束（限制泛型范围）
function getLength<T extends { length: number }>(obj: T): number {
  return obj.length;
}
getLength("abc"); // 合法
getLength([1,2]); // 合法
// getLength(100); // 报错：数字没有length

2. 类型收窄（处理 unknown / 联合类型）

scala 复制代码

// 类型守卫（typeof）
function print(val: string | number) {
  if (typeof val === "string") {
    console.log(val.toUpperCase()); // 收窄为string
  } else {
    console.log(val.toFixed(2)); // 收窄为number
  }
}

// 类型守卫（instanceof）
class Animal {}
class Dog extends Animal {
  bark() {}
}
function fn(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark(); // 收窄为Dog
  }
}

// 类型守卫（in）
interface Cat {
  meow: () => void;
}
function pet(animal: Dog | Cat) {
  if ("bark" in animal) {
    animal.bark();
  } else {
    animal.meow();
  }
}

3. 工具类型（TS 内置，直接用）

不用记底层实现，记住「什么时候用」即可：

typescript 复制代码

// Partial：把所有属性变成可选
type PartialUser = Partial<User>; // { id?: number; name?: string; ... }

// Required：把所有属性变成必选
type RequiredUser = Required<User>; // 去掉age的?

// Pick：挑选指定属性
type UserBase = Pick<User, "id" | "name">; // 只保留id和name

// Omit：排除指定属性
type UserWithoutPhone = Omit<User, "phone">; // 排除phone

// Record：快速定义键值对类型
type Dict = Record<string, number>; // { [key: string]: number }

4. 异步 / Promise 类型（前端请求必用）

javascript 复制代码

// Promise 类型标注
const fetchData = async (): Promise<User> => {
  const res = await fetch("/api/user");
  return res.json();
};

// 调用异步函数
const useData = async () => {
  const user = await fetchData(); // user 是 User 类型
  console.log(user.name);
};

三、React 结合场景（10%）------ 前端开发专属

1. 组件 Props 类型

typescript 复制代码

// 无 React.FC 写法（推荐）
interface ButtonProps {
  text: string;
  onClick?: () => void;
  children?: React.ReactNode;
}
const Button = ({ text, onClick }: ButtonProps) => {
  return <button onClick={onClick}>{text}</button>;
};

2. Hooks 类型标注

javascript 复制代码

// useState（复杂类型手动标注）
const [user, setUser] = useState<User | null>(null);

// useRef（DOM/普通值区分）
const inputRef = useRef<HTMLInputElement>(null);
const timerRef = useRef<NodeJS.Timeout | null>(null);

// 事件类型（React 内置）
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  console.log(e.currentTarget);
};

四、避坑 & 实战技巧（核心原则）

1. 少用 any，多用 unknown / 类型收窄

any 会关闭 TS 校验，是「类型安全的敌人」，兜底优先用 unknown。

2. 类型定义和数据结构「完全匹配」

typescript 复制代码

// 错误：数组类型和数据不匹配
interface Res {
  items: string[]; // 实际是对象数组
}
// 正确：
interface Res {
  items: { id: number; name: string }[];
}

3. 异步函数必标注 Promise 或让 TS 自动推断

dart 复制代码

// 推荐：自动推断（简洁）
const test = async () => {
  const res = await instance.get<ApiRes<User>>("/data");
  return res.data;
};
// 推荐：手动标注（清晰）
const test = async (): Promise<ApiRes<User>> => {
  const res = await instance.get<ApiRes<User>>("/data");
  return res.data;
};

总结（90% 场景核心要点）

基础层：掌握基础类型、接口 / 类型别名、函数类型标注，搞定 80% 的基础类型场景；
核心层：泛型（复用类型）、类型收窄（处理未知类型）、内置工具类型，搞定复杂场景；
实战层：Promise 异步类型、React 组件 / Hooks 类型，适配前端业务开发；
原则层：少用 any、类型和数据匹配、异步函数标注 Promise，保证类型安全。

这套知识点覆盖了前端开发中 90% 的 TS 场景，不用死记硬背，在项目中落地 2-3 个组件 / 接口请求，就能熟练掌握。遇到小众场景（如装饰器、高级类型），按需查文档即可。