|
TypeScript中的实用工具类型是一些预定义的泛型类型,可用于操作或创建其它新类型。这些实用工具类型在所有TypeScript项目中都是全局可用的,因此无需添加任务依赖项即可使用它们。
1.Partial
将Type的所有属性都设置为可选的类型。
- 1 interface Person {
- 2 name: string;
- 3 age: number;
- 4 email: string;
- 5 }
- 6
- 7 type PartialPerson = Partial<Person>;
- 8
- 9 //相当于
- 10 // interface Person {
- 11 // name?: string | undefined;
- 12 // age?: number | undefined;
- 13 // email?: string | undefined;
- 14 // }
- 15
- 16 interface Todo {
- 17 title: string;
- 18 description: string;
- 19 }
- 20
- 21 function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
- 22 return { ...todo, ...fieldsToUpdate };
- 23 }
- 24
- 25 const todo1 = {
- 26 title: "organize desk",
- 27 description: "clear clutter",
- 28 };
- 29
- 30 const todo2 = updateTodo(todo1, {
- 31 description: "throw out trash",
- 32 });
复制代码 2.Required
与Partical 相反,该类型由Type中所有属性设置为required组成。
- 1 interface Person {
- 2 name?: string | undefined;
- 3 age?: number | undefined;
- 4 email?: string | undefined;
- 5 }
- 6
- 7
- 8 type RequiredPerson = Required<Person>;
- 9
- 10 // 相当于
- 11 // interface Person {
- 12 // name: string;
- 13 // age: number;
- 14 // email: string;
- 15 // }
复制代码 3.Omit
构建一个新类型--从类型 Type 中获取所有属性,然后从中剔除 Keys 属性。
- 1 interface User {
- 2 id: number;
- 3 name: string;
- 4 email: string;
- 5 age: number;
- 6 }
- 7
- 8 type UserWithoutEmail = Omit<User, 'email'>;
- 9
- 10 // 相当于
- 11 // interface Person {
- 12 // id: string;
- 13 // name: string;
- 14 // age: number;
- 15 // }
复制代码 也可以移除多个属性,
- 1 interface User {
- 2 id: number;
- 3 name: string;
- 4 email: string;
- 5 age: number;
- 6 }
- 7
- 8 type UserWithoutEmailAndName = Omit<User, 'email' | 'name'>;
- 9
- 10 // 相当于
- 11 // interface Person {
- 12 // id: string;
- 13 // age: number;
- 14 // }
复制代码 4.Pick
从类型 Type 中挑选部分属性 Keys 来构造类型,与Omit相反。
- 1 interface User {
- 2 id: number;
- 3 name: string;
- 4 email: string;
- 5 age: number;
- 6 }
- 7
- 8 type UserWithEmailAndName = Pick<User, 'email' | 'name'>;
- 9
- 10 // 相当于
- 11 // interface Person {
- 12 // name: string;
- 13 // email: string;
- 14 // }
复制代码 可以组合使用这些类型,创造新的类型
- 1 interface User {
- 2 id: number;
- 3 name: string;
- 4 email: string;
- 5 age: number;
- 6 }
- 7
- 8 type PartialPick = Partial<Pick<User, 'email' | 'name'>>;
- 9
- 10 // 相当于
- 11 // interface Person {
- 12 // name?: string | undefined;
- 13 // email?: string | undefined;
- 14 // }<br>
复制代码 - 1 interface User {
- 2 id: number;
- 3 name: string;
- 4 email: string;
- 5 age: number;
- 6 }
- 7
- 8 type OmitPartialPick = Omit<Partial<Pick<User, 'email' | 'name'>>, 'email'>;
- 9
- 10 // 相当于
- 11 // interface Person {
- 12 // name?: string | undefined;
- 13 // }
复制代码 5.Readonly
通过该Type构造新类型,并将它所有的属性设置为只读的,也就意味着构造出的类型的属性不能被再次赋值。
- 1 interface Person {
- 2 id: number;
- 3 name: string;
- 4 age: number;
- 5 }
- 6
- 7 type ReadonlyPerson = Readonly<Person>;
- 8
- 9 //相当于
- 10 // interface Person {
- 11 // readonly id: number;
- 12 // readonly name: string;
- 13 // readonly age: number;
- 14 // }
- 15
- 16 const person: ReadonlyPerson = {
- 17 id: 1,
- 18 name: 'John',
- 19 age: 25
- 20 };
- 21
- 22 person.name = 'Mike'; // Error: Cannot assign to 'name' because it is a read-only property.
复制代码 这个类型可用来表示在运行时会失败的赋值表达式(比如,当尝试给冻结对象的属性再次赋值时)
Object.freeze
- 1 function freeze<T>(obj: T): Readonly<T>;
复制代码 6.Record
构造一个对象类型,其属性为Keys,属性值为Type;该实用工具类型可用于将一种类型的属性映射到另一种类型。
- 1 interface CatInfo {
- 2 age: number;
- 3 breed: string;
- 4 }
- 5
- 6 type CatName = "miffy" | "boris" | "mordred";
- 7
- 8 const cats: Record<CatName, CatInfo> = {
- 9 miffy: { age: 10, breed: "Persian" },
- 10 boris: { age: 5, breed: "Maine Coon" },
- 11 mordred: { age: 16, breed: "British Shorthair" },
- 12 };
- 13
- 14 cats.boris;
- 15
复制代码 7.Exclude
通过从 UnionType 中排除所有可分配给 ExcludedMembers 的属性来构造一个类型;也就是删除 union 类型的成员来创建新类型。
- 1 type T0 = Exclude<"a" | "b" | "c", "a">;
- 2 type T0 = "b" | "c"
- 3
- 4 type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
- 5 type T1 = "c"
- 6
- 7 type T2 = Exclude<string | number | (() => void), Function>;
- 8 type T2 = string | number
复制代码 8.Extract
通过从 Type 中提取可分配给 Union 的所有联合成员来构造一个类型,与 Exclude 相反。
- 1 type T0 = Extract<"a" | "b" | "c", "a" | "f">;
- 2 type T0 = "a"
- 3
- 4 type T1 = Extract<string | number | (() => void), Function>;
- 5 type T1 = () => void
复制代码 9.NonNullable
通过从 Type 中排除 null 和 undefined 来构造一个类型。
- 1 type T0 = NonNullable<string | number | undefined>;
- 2 type T0 = string | number
- 3
- 4 type T1 = NonNullable<string[] | null | undefined>;
- 5 type T1 = string[]
复制代码 10.ReturnType
由函数类型 Type 的返回值类型构建一个新类型。
- 1 function add(a: number, b: number): number {
- 2 return a + b;
- 3 }
- 4
- 5 type AddReturnType = ReturnType<typeof add>;
- 6 // type AddReturnType = number;
- 7
- 8
- 9 function addStr(a: string, b: string): string{
- 10 return a + b;
- 11 }
- 12
- 13 type AddReturnType2 = ReturnType<typeof addStr>;
- 14 // type AddReturnType2 = string;
- 15
- 16 type T0 = ReturnType<() => string>;
- 17 type T0 = string
- 18
- 19 type T1 = ReturnType<(s: string) => void>;
- 20 type T1 = void
- 21
- 22 type T2 = ReturnType<<T>() => T>;
- 23 type T2 = unknown
- 24
- 25 type T3 = ReturnType<<T extends U, U extends number[]>() => T>;
- 26 type T3 = number[]
复制代码 11.Parameters
由函数类型 Type 的参数类型来构建出一个元组类型。
- 1 function add(a: number, b: string, c:boolean): string {
- 2 return a + b;
- 3 }
- 4
- 5 type AddReturnType = Parameters<typeof add>;
- 6 // type AddReturnType = [a: number, b: string, c:boolean];
- 7
- 8 type T0 = Parameters<() => string>;
- 9 type T0 = []
- 10
- 11 type T1 = Parameters<(s: string) => void>;
- 12 type T1 = [s: string]
- 13
- 14 type T2 = Parameters<<T>(arg: T) => T>;
- 15 type T2 = [arg: unknown]
复制代码 12.Awaited
这种类型旨在模拟异步函数中的 await 或 Promises 上的 .then() 方法等操作——具体来说,就是它们递归展开 Promises 的方式。
- 1 async function fetchData(): Promise<string> {
- 2 // fetch data from API and return a string
- 3 }
- 4
- 5 type ResolvedResult = Awaited<ReturnType<typeof fetchData>>;
- 6 // type ResolvedResult = string
- 7
- 8 type A = Awaited<Promise<string>>;
- 9 type A = string
- 10
- 11 type B = Awaited<Promise<Promise<number>>>;
- 12 type B = number
- 13
- 14 type C = Awaited<boolean | Promise<number>>;
- 15 type C = number | boolean
复制代码 以上,是较常用的一些实用工具类型。
参考资料:
https://www.typescriptlang.org/docs/handbook/utility-types.html#uppercasestringtype
https://dev.to/arafat4693/typescript-utility-types-that-you-must-know-4m6k
来源:https://www.cnblogs.com/sparkler/p/17343820.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作! |
|