TypeScript utility types that you must know
这篇文章将介绍一些有益和重要的实用类型, 可以使一些工作更简单.
TypeScript 中的实用类型是一些预定义的通用类型, 可以用来操作或创建其他新类型. 这些类型在整个 TypeScript 项目中都是可用的, 所以不需要添加任何依赖以获得它们.
Partial
第一个实用类型是 Partial
(部分), 就像听起来的那样, 它使所有的属性都是可选的或部分的.
interface Person {
name: string;
age: number;
email: string;
}
// defined the new type PartialPerson is a partial version of 'Person'
type PartialPerson = Partial<Person>;
// same as
// interface PartialPerson {
// name?: string;
// age?: number;
// email?: string;
// }
Required
与 Partial
相反, 它使所有属性都是必须的.
interface Person {
name?: string | undefined;
age?: number | undefined;
email?: string | undefined;
}
type RequiredPerson = Required<Person>;
// interface RequiredPerson {
// name: string;
// age: number;
// email: string;
// }
Omit
可以使用 Omit
从现有的类型中创建一个缺少某些属性的新类型.
interface User {
id: number;
name: string;
email: string;
age: number;
}
type UserWithoutEmail = Omit<User, 'email'>
// interface UserWithoutEmail {
// id: string;
// name: string;
// age: number;
// }
type UserWithoutEmailAndId = Omit<User, 'email' | 'id'>;
Pick
与 Omit
相反, Pick
从现有的类型中创建一个含有某些属性的新类型.
interface User {
id: number;
name: string;
email: string;
age: number;
}
type UserWithNameAndAge = Pick<User, 'name' | 'age'>
// interface UserWithNameAndAge {
// name: string;
// age: number;
// }
Readonly
Readonly
从现有的类型中创建一个新的类型并将所有属性设置为 readonly
, 这意味这在初始化之后不能修改任何属性.
interface Person {
id: number;
name: string;
age: number;
}
type ReadonlyPerson = Readonly<Person>;
// interface ReadonlyPerson {
// readonly id: number;
// readonly name: string;
// readonly age: number;
// }
Mutable
Mutable
允许将所有的只读属性转换为可变属性.
interface Person {
readonly id: number;
readonly name: string;
readonly age: number;
}
type MutablePersong = Mutable<Pserson>;
// interface MutablePerson {
// id: number;
// name: string;
// age: number;
// }
Exclude
Exclude
允许通过移除联合类型 (union
) 的成员创建新类型.
type NumberOrString = number | string | boolean;
type OnlyNumber = Exclude<NumberOfString, string | boolean>;
type NumberString = Exclude<NumberOfString, boolean>;
Extract
与 Exclude
相反, Extract
是从联合类型中提取出一个或多个成员.
type NumberOrString = number | string | boolean;
type OnlyNumber = Exclude<NumberOrString, number>;
Multiple utility types together
interface User {
id: number;
name: string;
email: string;
age: number;
}
type PartialPick = Partial<Pick<User, 'name' | 'age'>>;
// interface PartialPick {
// name?: string | undefined;
// age?: number | undefined;
// }
ReturnType
ReturnType
取出一个函数的返回值类型. 它接收一个函数作为参数并返回函数返回值的类型.
function add (a: number, b: number): number {
return a + b;
}
type AddReturnType = ReturnType<typeof add>;
Parameters
Parameters
取出一个函数的参数的类型.
function add(a: number, b: string, c: boolean): string {
return a + b;
}
type AddParametersType = Parameters<typeof add>;
// type AddParametersType = [a: number, b: string, c: boolean]
NonNullable
NonNullable
通过排除给定类型的 null
和 undefined
类型创建一个新的类型.
type NullableString = string | null | undefined;
type NonNullableString = NonNullable<NullableString>;
// type NonNullableString = string;
Awaited
Awaited
类型通过提取 promise
或使用 await
的类型的解析类型.
type PromiseNumber = Promise<number>;
type JustNumber = Awaited<PromiseNumber>;
// type JustNumber = number
Awaited and ReturnedType combined
async function fetchData(): Promise<string> {
// fetch data...
}
type ResolveResult = Awaited<ReturnType<typeof fetchData>>
// type ResolveResult = string
Conclusion
这些是一些最常用的 TypeScript 实用类型, 被全球的其他开发者大量使用. 它可以清理你的代码, 并可用于更有表现力和更简洁地处理类型. 希望这篇文章会有帮助.