typescript 记录

extends 是一个大忙人

• 在 JS 中，担当类的继承重担，例如 App extends Component
• 在 TS 类型中，当泛型约束，例如 type ToUpper = xxx
• 在 TS 类型中，条件判断的关键词 type ReturnType = T extends () => infer R ? R : never’

@babel/preset-typescript 方案

• 在这之前，我们采用 awesome-typescript-loader 方案对 TypeScript 进行处理
• 我们知道 TypeScript 是一个将 TypeScript 转换为指定版本 JS 代码的编译器，而 Babel 同样是一个将新版本 JS 新语法转换为低版本 JS 代码的编译器
• 所以我们之前的方案每次修改了一点代码，都会将 TS 代码传递给 TypeScript 转换为 JS，然后再将这份 JS 代码传递给 Babel 转换为低版本 JS 代码
• 因此我们需要配置两个编译器，并且每次做了一点更改，都会经过两次编译
• 而@babel/preset-typescript 是直接移除 TypeScript，转为 JS，这使得它的编译速度飞快，并且只需要管理 Babel 一个编译器就行了
• 采用@typescript-eslint 配置 ESLint 来进行类型检测，VSCode 自带 TS 检测，可以忽略

keyof 和 in

keyof: 取 interface 的键后保存为联合类型

interface userInfo {
  name: string;
  age: number;
}
type keyofValue = keyof userInfo;
// keyofValue = "name" | "age"

in: 取联合类型的值，主要用于数组和对象的构建

切记不要用于 interface, 否则会报错

type name = "firstname" | "lastname";
type TName = {
  [key in name]: string;
};
// TName = { firstname: string, lastname: string }

应用

function getValue<T extends Object, K extends keyof T>(o: T, key: K): T[K] {
  return o[key];
}
const obj1 = { name: "张三", age: 18 };
const values = getValue(obj1, "name");
// 如果第二个参数不是obj1中的参数就会报错