TypeScript中实用的类型(Utility Types)

Guoxk
123 阅读4分钟

TypeScript实用类型

前言

R-C.png 之前参加了一个线上面试，当时的面试官问我如果我有一个interface接口定义了四个参数，我只需要其中两个应该如何操作。因为自己也比较菜所以当场呆住了，......可想而知挂掉了，于是面试之后自己又查阅了相关资料来学习。
本篇文章只挑了其中一些类型来进行讲解，如果你也在使用TypeScript开发或者正在学习TypeScript语言，那么这篇文章或许会对你有所帮助，如果想要深入学习可点击官方链接直接跳转至官方详情页

介绍

首先放上该模块讲解的官方链接：TypeScript: Documentation - Utility Types (typescriptlang.org)
注：必要时科学上网
TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally.
机翻：typescript提供了一些实用的类型来帮助来进行类型转换，这些实用程序在全球范围内可用。
接下来我将为大家一一介绍以下几种类型

  • Awaited<Type>    用于递归获取 Promise 类型 T 中的实际值类型。
  • Partial<Type>   将属性设置为可选类型。
  • Required<Type>   与Partial相反，将属性设置为必需含有。
  • Readonly<Type>    将属性设置为只读属性。
  • Record<Keys, Type>    构造一个对象类型，其属性键为keys，属性值为type。
  • Pick<Type, Keys>  通过从type中选取一组属性Keys(字符串字面值或字符串字面值的并集)来构造一个类型。

Awaited<Type>

Awaited<Type>用于递归获取 Promise 类型 T 中的实际值类型。
注:Awaited不适用于interface接口
用法：

// 官方案例
type A = Awaited<Promise<string>>;
//等同于  type A = string

type B = Awaited<Promise<Promise<number>>>;//递归获取 number
//等同于type B = number

type C = Awaited<boolean | Promise<number>>;
//等同于type C = number | boolean

//可以这样混合使用获取新类型
type D=Promise<string>
type E=Awaited<D>

Partial<Type>

将属性设置为可选类型，interface接口与type类型别名都适用
用法：

//类型别名
type animals={
    name:string
   sex:string
}
type human=Partial<animals>
//等同于 
//   {
//     name ?: string
//     sex  ?:string
 //  }
interface animals{
    name:string
    sex:string
}
// 接口通过继承来实现
interface human extends Partial<animals>{
//可以 添加更多参数
}

Required<Type>

与Partial相反，将属性设置为必需含有，interface接口与type类型别名都适用。

//类型别名
type animals={
    name?:string
    sex?:string
}
type human=Required<animals>

interface animals{
    name?:string
    sex?:string
}
// 接口通过继承来实现
interface human extends Required<animals>{
//可以 添加更多参数
}

Readonly<Type>

将属性设置为只读属性,interface接口与type类型别名都适用.

//官方案例
interface Todo {
title: string;
}
const todo: Readonly<Todo> = {
title: "Delete inactive users",
};
//类似于 加一个readonly关键字 readonly title:string;

todo.title = "Hello";
//Cannot assign to 'title' because it is a read-only property.
//此处报错，只读属性无法修改

//类型别名用法
type title=string;
type todo=Readonly<title>

Readonly<Type>

将属性设置为只读属性,interface接口与type类型别名都适用。

//官方案例
interface Todo {
title: string;
}
const todo: Readonly<Todo> = {
title: "Delete inactive users",
};
//类似于 加一个readonly关键字 readonly title:string;

todo.title = "Hello";
//Cannot assign to 'title' because it is a read-only property.
//此处报错，只读属性无法修改

//类型别名用法
type title=string;
type todo=Readonly<title>

Record<Keys, Type>

这个就有点说法了，构造一个对象类型，其属性键为keys，属性值为type。此实用程序可用于将一个类型的属性映射到另一个类型，且interface接口与type类型别名都适用。 注：Record其属性键 为string、number、symbol类型中的一种。

interface CatInfo {
age: number;
breed: string;
}
type CatName = "miffy" | "boris" | "mordred";

const cats: Record<CatName, CatInfo> = {
// 意思就是说 规定key只能为CatName的属性，而value(属性值)为CatInfo的类型。
miffy: { age: 10, breed: "Persian" },
boris: { age: 5, breed: "Maine Coon" },
mordred: { age: 16, breed: "British Shorthair" },
};

Pick<Type, Keys>

通过从type中选取一组属性Keys(字符串字面值或字符串字面值的并集)来构造一个类型。
那么这个类型也就对应了前言中面试所提到的情景。

官方案例
interface Todo {
title: string;
description: string;
completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;
//使用其title和completed 定义一个新类型
const todo: TodoPreview = {
title: "Clean room",
completed: false,
};

搭配使用

总体来看的话， 这几个类型单单一个拿出来看似一般，但搭配起来使用会有新世界的大门。 R-C (1).jpg 我们知道 type可以进行联合类型、交叉类型的组合，interface可以继承。 以下是两个简单的例子。
如：将其中一个属性改为可选参数

type animals={
    name:string
    sex:string
}
//将sex变为可选
type human = Partial<Pick<animals,"sex">>&Pick<animals,"name">

如：将其中一个属性改为只读

//将sex变为只读
type human=Pick<animals,"name">&Readonly<Pick<animals,"sex">>

总结

如果有写的不对，或写的不好的地方，希望指出，我会加以改正继续学习。
最后希望本篇文章能够给你带来一些帮助，后续类型慢慢更新。
· · · · · ·

avatar
文章
阅读
粉丝