你必须了解的 TypeScript 实用工具类型
大家好，今天，在这篇文章中，我们将介绍Typescript中一些有益且必不可少的实用类型，它们可以让你的工作更轻松。
TypeScript 中的实用类型是一些预定义的通用类型，可用于操作或创建新类型。这些类型在所有 TypeScript 项目中全局可用，因此无需添加任何依赖项即可使用。
目录
部分的
我们将要了解的第一个实用程序类型Partial,，顾名思义，就是让所有内容都成为可选的或部分可选的。
以下是部分实用工具类型的一个示例：
interface Person {
name: string;
age: number;
email: string;
}
// Define a new type called 'PartialPerson' that is a partial version of 'Person'
type PartialPerson = Partial<Person>;
// Same as:
// interface Person {
// name?: string | undefined;
// age?: number | undefined;
// email?: string | undefined;
// }
必需的
与此相反的Partial是Required实用型，它要求所有东西都是必需的。
interface Person {
name?: string | undefined;
age?: number | undefined;
email?: string | undefined;
}
// Define a new type called 'RequiredPerson' that is a required version of 'Person'
type RequiredPerson = Required<Person>;
// Same as:
// interface Person {
// name: string;
// age: number;
// email: string;
// }
忽略
你可以使用Omit实用程序类型从现有类型创建新类型，但会删除一些属性。
interface User {
id: number;
name: string;
email: string;
age: number;
}
type UserWithoutEmail = Omit<User, 'email'>;
// same as:
// interface User {
// id: string;
// name: string;
// age: number;
// }
我们还可以通过传递参数来删除多个属性。union
interface User {
id: number;
name: string;
email: string;
age: number;
}
type UserWithoutEmailAndName = Omit<User, 'email' | 'name'>;
// same as:
// interface User {
// id: string;
// age: number;
// }
挑选
与此相反的Omit是Pick实用类型，它允许您创建一个仅包含现有类型中属性子集的新类型。
interface User {
id: number;
name: string;
email: string;
age: number;
}
type UserWithEmailAndName = Pick<User, 'email' | 'name'>;
// same as:
// interface User {
// name: string;
// email: string;
// }
多种实用工具类型
我们甚至可以同时使用多种实用程序类型。例如：
interface User {
id: number;
name: string;
email: string;
age: number;
}
type PartialPick = Partial<Pick<User, 'email' | 'name'>>;
// same as:
// interface User {
// name?: string | undefined;
// email?: string | undefined;
// }
另一个例子：
interface User {
id: number;
name: string;
email: string;
age: number;
}
type OmitPartialPick = Omit<Partial<Pick<User, 'email' | 'name'>>, 'email'>;
// same as:
// interface User {
// name?: string | undefined;
// }
只读
Readonly实用类型允许您从现有类型集创建新类型，readonly,这意味着初始化后我们不能修改任何属性。
interface Person {
id: number;
name: string;
age: number;
}
type ReadonlyPerson = Readonly<Person>;
// same as:
// interface Person {
// readonly id: number;
// readonly name: string;
// readonly age: number;
// }
const person: ReadonlyPerson = {
id: 1,
name: 'John',
age: 25
};
person.name = 'Mike'; // Error: Cannot assign to 'name' because it is a read-only property.
可变
你还可以创建一个Mutable类型助手，允许你将所有只读类型转换为可变类型。
interface Person {
readonly id: number;
readonly name: string;
readonly age: number;
}
// The syntax for Mutable is as follows:
type Mutable<T> = {
-readonly [P in keyof T]: T[P];
};
type MutablePerson = Mutable<Person>;
// same as:
// interface Person {
// id: number;
// name: string;
// age: number;
// }
const person: MutablePerson = {
id: 1,
name: 'John',
age: 25
};
person.name = 'Mike'; // Okay
person.id = 2; // Okay
排除
Exclude实用程序类型允许您通过移除现有类型中的成员来创建新类型。union
type NumberOrString = number | string;
type OnlyNumber = Exclude<NumberOrString, string>;
// same as:
// type OnlyNumber = number;
const num: OnlyNumber = 5;
const str: OnlyNumber = 'hello'; // Error: Type '"hello"' is not assignable to type 'number'.
你甚至可以exlude增加工会的成员数量：
type NumberStringOrBoolean = number | string | boolean;
type OnlyBoolean = Exclude<NumberStringOrBoolean, string | number>;
// same as:
// type OnlyBoolean = boolean;
提炼
与此相反的Exclude是实用程序类型，它允许您从工会中Extract选择一个或多个成员：
type NumberOrString = number | string | boolean;
type OnlyNumber = Extract<NumberOrString, number>;
// same as:
// type OnlyNumber = number;
返回类型
ReturnType工具类型允许您提取函数类型的返回类型。它接受一个函数类型作为参数，并返回该函数返回的值类型。
function add(a: number, b: number): number {
return a + b;
}
type AddReturnType = ReturnType<typeof add>;
// type AddReturnType = number;
// ---
function addStr(a: string, b: string): string{
return a + b;
}
type AddReturnType2 = ReturnType<typeof addStr>;
// type AddReturnType2 = string;
参数
该Parameters实用程序类型允许您从函数中提取参数类型。
function add(a: number, b: string, c:boolean): string {
return a + b;
}
type AddReturnType = Parameters<typeof add>;
// type AddReturnType = [a: number, b: string, c:boolean];
非空
NonNullable实用程序类型允许您通过从给定类型中排除null和来创建新类型。undefined
type NullableString = string | null | undefined;
type NonNullableString = NonNullable<NullableString>;
// type NonNullableString = string;
const str1: NullableString = null;
const str2: NonNullableString = 'hello';
const str3: NonNullableString = null; // Error: Type 'null' is not assignable to type 'string'.
期待已久
Awaited实用程序类型允许您提取已解析的类型promise或其他使用该类型的类型await。
type promiseNumber = Promise<number>
type justNumber = Awaited<Promise<number>>
// type justNumber = number
等待时间和返回类型合并
以下是使用ReturnTypeand的一个例子Awaited：
async function fetchData(): Promise<string> {
// fetch data from API and return a string
}
type ResolvedResult = Awaited<ReturnType<typeof fetchData>>;
// type ResolvedResult = string
在这个例子中，我们定义了一个异步函数，它返回一个Promise字符串。(Promise<string>).然后我们使用ReturnTypefetchData 提取返回类型，并将其作为参数传递给 fetchData 来Awaited解包 promise 的已解析类型。
结论
这些是一些最常用的 TypeScript 实用类型，被世界各地的开发者广泛使用。它们可以简化你的代码，让你更清晰、更简洁地处理类型。希望这篇文章对你有所帮助。如果你觉得我遗漏了任何重要的实用类型，请在评论区告诉我。感谢阅读本文。我们下篇文章再见🐼。
访问：
👨💻我的作品集
🏞️我的 Fiverr
🌉我的 Github