1. keyof和in
1.1 keyof
keyof 与 Object.keys 略有相似，只不过 keyof 取 interface 的键
interface Point {
x: number;
y: number;
}
// type keys = "x" | "y"
type keys = keyof Point;
假设有一个 object 如下所示，我们需要使用 typescript 实现一个 get 函数来获取它的属性值
const data = {
a: 3,
hello: 'world'
}
function get(o: object, name: string) {
return o[name]
}
我们刚开始可能会这么写，不过它有很多缺点
- 无法确认返回类型：这将损失
ts最大的类型校验功能 - 无法对
key做约束：可能会犯拼写错误的问题
这时可以使用 keyof 来加强 get 函数的类型功能
function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
return o[name]
}
1.2 in
in 则可以遍历枚举类型，例如
type Keys = "a" | "b"
type Obj = {
[p in Keys]: any
} // -> { a: any, b: any }
keyof 产生枚举类型,，in 使用枚举类型遍历，所以他们经常一起使用，看下 Partial 源码
type Partial<T> = { [P in keyof T]?: T[P] };
上面语句的意思是 keyof T 拿到 T 所有属性名，然后 in 进行遍历，将值赋给 P，最后 T[P] 取得相应属性的值
2. Required & Partial & Pick
type Required<T> = {
[P in keyof T]-?: T[P];
};
type Partial<T> = {
[P in keyof T]?: T[P];
};
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
interface User {
id: number;
age: number;
name: string;
};
// 相当于: type PartialUser = { id?: number; age?: number; name?: string; }
type PartialUser = Partial<User>
// 相当于: type PickUser = { id: number; age: number; }
type PickUser = Pick<User, "id" | "age">
这几个类型已内置在
Typescript中
3. Condition Type
类似于 js 中的 三目 运算符，可以使用它扩展一些基本类型
T extends U ? X : Y
type isTrue<T> = T extends true ? true : false
// 相当于 type t = false
type t = isTrue<number>
// 相当于 type t = false
type t1 = isTrue<false>
4. never & Exclude & Omit
type Exclude<T, U> = T extends U ? never : T;
// 相当于: type A = 'a'
type A = Exclude<'x' | 'a', 'x' | 'y' | 'z'>
结合 Exclude 可以推出 Omit 的写法
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
interface User {
id: number;
age: number;
name: string;
};
// 相当于: type PickUser = { age: number; name: string; }
type OmitUser = Omit<User, "id">
5. 内置工具类
1. Partial<T> // 将类型 T 的所有属性变为可选属性。
2. Required<T> // 将类型 T 的所有可选属性变为必需属性。
3. Readonly<T>// 将类型 T 的所有属性变为只读属性。
4. Record<K, T>// 将类型 K 的所有属性映射到类型 T。
5. Pick<T, K>// 从类型 T 中选择属性 K，返回一个新类型。
6. Omit<T, K>// 从类型 T 中排除属性 K，返回一个新类型。
7. Exclude<T, U> // 从类型 T 中排除类型 U，返回一个新类型。
8. Extract<T, U> // 从类型 T 中提取类型 U，返回一个新类型。
9. NonNullable<T> // 从类型 T 中排除 null 和 undefined，返回一个新类型。
10. ReturnType<T> // 获取函数类型 T 的返回值类型。
11. InstanceType<T> // 获取构造函数类型 T 的实例类型。
12. ThisType<T> // 用于定义 this 的类型，通常用于函数类型的定义。
13. Parameters<T> // 获取函数类型 T 的参数类型，返回一个元组类型。
14. ConstructorParameters<T> // 获取构造函数类型 T 的参数类型，返回一个元组类型。
15. Unpack<T> // 获取 Promise<T> 的类型，返回 T。
16. Awaited<T> // 获取 Promise<T> 的类型，返回 T。
17. ThisParameterType<T> // 获取函数类型 T 的 this 参数类型。
18. OmitThisParameter<T> // 从函数类型 T 中排除 this 参数，返回一个新类型。
19. Uppercase<T> // 将字符串字面量类型 T 转换为大写字母。
20. Lowercase<T> // 将字符串字面量类型 T 转换为小写字母。
21. Capitalize<T> // 将字符串字面量类型 T 的首字母转换为大写字母。
22. Uncapitalize<T> // 将字符串字面量类型 T 的首字母转换为小写字母。
23. Awaited<T> /// 获取 Promise<T> 的类型，返回 T。
24. ThisParameterType<T> // 获取函数类型 T 的 this 参数类型。
25. OmitThisParameter<T> // 从函数类型 T 中排除 this 参数，返回一个新类型。
6. interface & type的区别
一般来说，interface 与 type 区别很小，比如以下两种写法差不多
interface A {
a: number;
b: number;
};
type B = {
a: number;
b: number;
}
其中 interface 可以如下合并多个，而 type 只能使用 & 类进行连接
interface A {
a: number;
}
interface A {
b: number;
}
const a: A = {
a: 3,
b: 4
}
