如何在 TypeScript 中使用实用程序类型?
TypeScript 允许我们从现有类型创建新类型，并且可以使用实用程序类型进行此类转换。
TypeScript 中存在各种实用程序类型，我们可以根据类型转换的需求使用任何实用程序类型。
在本教程中，我们将通过示例了解不同的实用程序类型。
TypeScript 中的部分类型
Partial 实用程序类型将当前类型的所有属性转换为可选属性。partial 的含义是全部、部分或无。因此，它使所有属性都成为可选属性，用户可以在使用对象重构代码时使用它。
示例
在下面的示例中，我们创建了一个包含一些可选属性的 Type。之后，我们使用 Partial 实用程序类型创建了一个 partialType 对象。用户可以看到我们还没有初始化partialType对象的所有属性，因为所有属性都是可选的。
type Type = {
prop1: string;
prop2: string;
prop3: number;
prop4?: boolean;
};
let partialType: Partial<Type> = {
prop1: "Default",
prop4: false,
};
console.log("The value of prop1 is " + partialType.prop1);
console.log("The value of prop2 is " + partialType.prop2);
编译后，它将生成以下 JavaScript 代码 -
var partialType = {
prop1: "Default",
prop4: false
};
console.log("prop1 的值为 " + partialType.prop1);
console.log("prop2 的值为 " + partialType.prop2);
输出
上述代码将生成以下输出 -
prop1 的值为 Default prop2 的值为 undefined
TypeScript 中的必需类型
Required 实用程序类型允许我们以某种方式转换类型，使该类型的所有属性都变为必需属性。当我们使用 Required 实用程序类型时，它会将所有可选属性变为必需属性。
示例
在此示例中，Type 包含 prop3 可选属性。使用 Required 实用程序运算符转换 Type 后，prop3 也变为必需属性。如果我们在创建对象时没有为 prop3 分配任何值，它将产生编译错误。
type Type = {
prop1: string;
prop2: string;
prop3?: number;
};
let requiredType: Required<Type> = {
prop1: "Default",
prop2: "Hello",
prop3: 40,
};
console.log("prop1 的值为 " + requiredType.prop1);
console.log("prop2 的值为 " + requiredType.prop2);
编译后，它将生成以下 JavaScript 代码 -
var requiredType = {
prop1: "Default",
prop2: "Hello",
prop3: 40
};
console.log("prop1 的值为 " + requiredType.prop1);
console.log("prop2 的值为 " + requiredType.prop2);
输出
上述代码将生成以下输出 -
prop1 的值为 Default prop2 的值为 Hello
TypeScript 中的选择类型
Pick 实用程序类型允许我们从其他类型的属性中选择一个类型并创建一个新类型。用户需要使用字符串格式的类型的键来选择与其类型相同的键以包含在新类型中。如果用户想要选择与其类型相同的多个键，则应使用联合运算符。
示例
在下面的示例中，我们从 type1 中选择了 color 和 id 属性，并使用 Pick 实用程序运算符创建了新类型。用户可以看到，当他们尝试访问 newObj 的 size 属性时，会报错，因为 newObj 对象类型不包含 size 属性。
type type1 = {
color: string;
size: number;
id: string;
};
let newObj: Pick<type1, "color" | "id"> = {
color: "#00000",
id: "5464fgfdr",
};
console.log(newObj.color);
// 这将产生编译错误，因为 newObj 类型不包含 size 属性
// console.log(newObj.size);
编译后，它将生成以下 JavaScript 代码 -
var newObj = {
color: "#00000",
id: "5464fgfdr"
};
console.log(newObj.color);
// 由于 newObj 类型不包含 size 属性，这将生成编译错误
// console.log(newObj.size);
输出
上述代码将生成以下输出 -
#00000
TypeScript 中的省略类型
Omit 会从类型中删除键并创建一个新类型。它与 Pick 相反。我们在 Omit 实用运算符中使用的任何键都会从类型中删除这些键并返回一个新类型。
示例
在此示例中，我们使用 Omit 实用类型省略了 type1 中的 color 和 id 属性，并创建了 omitObj 对象。当用户尝试访问 omitObj 的 color 和 id 属性时，将会产生错误。
type type1 = {
color: string;
size: number;
id: string;
};
let omitObj: Omit<type1, "color" | "id"> = {
size: 20,
};
console.log(omitObj.size);
// This will generate an error
// console.log(omitObj.color);
// console.log(omitObj.id)
编译后，它将生成以下 JavaScript 代码 -
var omitObj = {
size: 20
};
console.log(omitObj.size);
// This will generate an error
// console.log(omitObj.color);
// console.log(omitObj.id)
输出
上述代码将产生以下输出 -
20
TypeScript 中的 Readonly 类型
我们可以使用 Readonly 实用程序类型将所有类型设为只读属性，从而使所有属性不可变。因此，在首次初始化后，我们无法为只读属性赋值。
示例
在此示例中，keyboard_type 包含三个不同的属性。我们使用 Readonly 实用程序类型将键盘对象的所有属性设为只读。只读属性意味着我们可以访问它来读取值，但不能修改或重新赋值。
type keyboard_type = {
keys: number;
isBackLight: boolean;
size: number;
};
let keyboard: Readonly<keyboard_type> = {
keys: 70,
isBackLight: true,
size: 20,
};
console.log("Is there backlight in the keyboard? " + keyboard.isBackLight);
console.log("Total keys in the keyboard are " + keyboard.keys);
// keyboard.size = 30
// 这是不允许的，因为键盘的所有属性都是只读的
编译后，它将生成以下 JavaScript 代码 -
var keyboard = {
keys: 70,
isBackLight: true,
size: 20
};
console.log("键盘有背光吗?" + keyboard.isBackLight);
console.log("键盘按键总数为 " + keyboard.keys);
// keyboard.size = 30
// 不允许这样，因为键盘的所有属性都是只读的
输出
上述代码将生成以下输出 -
键盘有背光吗?true 键盘按键总数为 70
TypeScript 中的 ReturnType 类型
ReturnType 实用程序类型允许根据函数的返回类型设置任何变量的类型。例如，如果我们使用任何库函数，但不知道该函数的返回类型，则可以使用 ReturnType 实用运算符。
示例
在此示例中，我们创建了 func() 函数，该函数接受一个字符串作为参数并返回相同的字符串。我们在 ReturnType 实用运算符中使用 typeof 运算符来识别函数的返回类型。
function func(param1: string): string {
return param1;
}
// 结果变量的类型是字符串
let result: ReturnType<typeof func> = func("Hello");
console.log("The value of the result variable is " + result);
编译后，它将生成以下 JavaScript 代码 -
function func(param1) {
return param1;
}
// result 变量的类型为字符串
var result = func("Hello");
console.log("result 变量的值为 " + result);
输出
上述代码将生成以下输出 -
result 变量的值为 Hello
TypeScript 中的 Record 类型
Record 实用程序类型创建一个对象。我们需要使用 Record 实用程序类型定义对象的键，它还接受该类型并使用该类型的对象定义对象键。
示例
在下面的示例中，我们定义了 Employee 类型。之后，为了创建一个 new_Employee 对象，我们使用 Record 作为类型实用程序。用户可以看到 Record 实用程序在 new_Employee 对象中创建了 Employee 类型的 Emp1 和 Emp2 对象。
此外，用户还可以看到我们如何访问 new_Employee 对象的 Emp1 和 Emp2 对象的属性。
type Employee = {
id: string;
experience: number;
emp_name: string;
};
let new_Employee: Record<"Emp1" | "Emp2", Employee> = {
Emp1: {
id: "123243yd",
experience: 4,
emp_name: "Shubham",
},
Emp2: {
id: "2434ggfdg",
experience: 2,
emp_name: "John",
},
};
console.log(new_Employee.Emp1.emp_name);
console.log(new_Employee.Emp2.emp_name);
编译后，它将生成以下 JavaScript 代码 -
var new_Employee = {
Emp1: {
id: "123243yd",
experience: 4,
emp_name: "Shubham"
},
Emp2: {
id: "2434ggfdg",
experience: 2,
emp_name: "John"
}
};
console.log(new_Employee.Emp1.emp_name);
console.log(new_Employee.Emp2.emp_name);
输出
上述代码将产生以下输出 -
Shubham John
TypeScript 中的 NonNullable 类型
NonNullable 实用运算符会从属性类型中删除 null 和 undefined 值。它确保对象中每个变量都具有已定义的值。
示例
在此示例中，我们创建了 var_type，它也可以为 null 或 undefined。之后，我们将 var_type 与 NonNullable 实用运算符一起使用，可以观察到我们无法将 null 或 undefined 赋给该变量。
type var_type = number | boolean | null | undefined;
let variable2: NonNullable<var_type> = false;
let variable3: NonNullable<var_type> = 30;
console.log("变量2的值为 " + variable2);
console.log("变量3的值为 " + variable3);
// 以下代码将生成错误
// let 变量4: NonNullable = null;
编译后，它将会生成以下 JavaScript 代码 -
var variable2 = false;
var variable3 = 30;
console.log("变量2的值为 " + variable2);
console.log("变量3的值为 " + variable3);
// 以下代码将生成错误
// let 变量4: NonNullable = null;
输出
上述代码将产生以下输出 -
变量2的值为 false 变量3的值为 30
本文介绍了TypeScript中最常用的八个类型实用操作符。此外，还有一些其他操作符，例如Parameters、InstanceType、Extract等。
