数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学TypeScript 中如何使用实用程序类型？
TypeScript 允许我们从现有类型创建新类型，我们可以使用实用程序类型进行这种转换。
TypeScript 中存在各种实用程序类型，我们可以根据类型转换的需求使用任何实用程序类型。
在本教程中，我们将学习不同实用程序类型的示例。
TypeScript 中的 Partial 类型
Partial 实用程序类型将当前类型的所有属性转换为可选属性。partial 的含义是全部、部分或无。因此，它使所有属性都可选，用户可以在使用对象重构代码时使用它。
示例
在下面的示例中，我们创建了一个包含一些可选属性的类型。之后，我们使用 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("The value of prop1 is " + partialType.prop1);
console.log("The value of prop2 is " + partialType.prop2);
输出
上述代码将产生以下输出：
The value of prop1 is Default The value of prop2 is undefined
TypeScript 中的 Required 类型
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("The value of prop1 is " + requiredType.prop1);
console.log("The value of prop2 is " + requiredType.prop2);
编译后，将生成以下 JavaScript 代码：
var requiredType = {
prop1: "Default",
prop2: "Hello",
prop3: 40
};
console.log("The value of prop1 is " + requiredType.prop1);
console.log("The value of prop2 is " + requiredType.prop2);
输出
上述代码将产生以下输出：
The value of prop1 is Default The value of prop2 is Hello
TypeScript 中的 Pick 类型
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);
// This will generate a compilation error as a type of newObj doesn't contain the size property
// console.log(newObj.size);
编译后，将生成以下 JavaScript 代码：
var newObj = {
color: "#00000",
id: "5464fgfdr"
};
console.log(newObj.color);
// This will generate a compilation error as a type of newObj doesn't contain the size property
// console.log(newObj.size);
输出
上述代码将产生以下输出：
#00000
TypeScript 中的 Omit 类型
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_ 实用程序类型来使 keyboard 对象的所有属性都变为只读。只读属性意味着我们可以访问它来读取值，但我们不能修改或重新赋值。
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
// this is not allowed as all properties of the keyboard are read-only
编译后，将生成以下 JavaScript 代码：
var keyboard = {
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
// this is not allowed as all properties of the keyboard are read-only
输出
上述代码将产生以下输出：
Is there backlight in the keyboard? true Total keys in the keyboard are 70
TypeScript 中的 ReturnType 类型
ReturnType 实用程序类型允许我们根据函数的返回类型为任何变量设置类型。例如，如果我们使用任何库函数并且不知道函数的返回类型，我们可以使用 ReturnType 实用程序运算符。
示例
在这个例子中，我们创建了 _func()_ 函数，它接受一个字符串作为参数并返回相同的字符串。我们使用了 typeof 运算符来在 _ReturnType_ 实用程序运算符中标识函数的返回类型。
function func(param1: string): string {
return param1;
}
// The type of the result variable is a string
let result: ReturnType<typeof func> = func("Hello");
console.log("The value of the result variable is " + result);
编译后，将生成以下 JavaScript 代码：
function func(param1) {
return param1;
}
// The type of the result variable is a string
var result = func("Hello");
console.log("The value of the result variable is " + result);
输出
上述代码将产生以下输出：
The value of the result variable is 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("The value of variable2 is " + variable2);
console.log("The value of variable3 is " + variable3);
// The below code will generate an error
// let variable4: NonNullable<var_type> = null;
编译后，将生成以下 JavaScript 代码：
var variable2 = false;
var variable3 = 30;
console.log("The value of variable2 is " + variable2);
console.log("The value of variable3 is " + variable3);
// The below code will generate an error
// let variable4: NonNullable = null;
输出
上述代码将产生以下输出：
The value of variable2 is false The value of variable3 is 30
用户在本篇文章中学习了八个最常用的 TypeScript 类型实用程序运算符。但是，还有一些其他的，例如 Parameters、InstanceType、Extract 等。
417 次浏览
