TypeScript 如何使用实用类型

TypeScript允许我们从现有的类型中创建一个新的类型，我们可以使用实用类型来进行这种转换。

TypeScript中存在各种实用类型，我们可以根据我们对类型转换的要求使用任何实用类型。

在本教程中，我们将通过实例了解不同的实用程序类型。

TypeScript中的部分类型

局部实用类型将当前类型的所有属性转换为可选。部分的含义是全部、部分或没有。所以，它使所有的属性都是可选的，用户可以在用对象重构代码时使用它。

示例

在下面的例子中，我们已经创建了包含一些可选属性的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);

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);

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中挑选类型

挑选实用类型允许我们挑选一个其他类型的属性并创建一个新的类型。用户需要使用字符串格式的类型的键来挑选与他们的类型的键，以包括在新类型中。如果用户想用他们的类型挑选多个键，应该使用联合运算符。

示例

在下面的例子中，我们从type1中挑选了颜色和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);

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的颜色和id属性，并创建了omitObj对象。当用户试图访问omitObj的颜色和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)

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工具类型使所有类型的属性成为只读属性，使所有的属性不可改变。所以，在第一次初始化后，我们不能给只读属性分配任何值。

示例

在这个例子中，键盘类型包含三个不同的属性。我们使用了_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 
// this is not allowed as all properties of the keyboard are read-only

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()函数，它接收一个字符串作为参数并返回相同的字符串。我们在ReturnType实用操作符中使用了typeof操作符来确定函数的返回类型。

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);

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工具类型来定义对象的键，它也需要类型，并以该类型的对象来定义对象的键。

示例

在下面的例子中，我们已经定义了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实用操作符从属性类型中删除了空值和未定义的值。它确保每个变量在对象中以定义的值存在。

示例

在这个例子中，我们创建了var_type，它也可以是null或undefined。之后，我们用var_type加上一个NonNullable的实用操作符，我们可以观察到，我们不能给变量赋值为空或未定义。

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等等。