ts常用内置工具类型的使用说明

已于 2024-01-21 00:56:23 修改
阅读量1.3k 收藏 19
点赞数 20
分类专栏： Typescript Javascript 文章标签： javascript 开发语言 typescript
于 2024-01-20 22:33:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40655561/article/details/135723132
版权

Record

源码

Record<key type, value type>

Record是一个用于创建具有特定类型的键和值的对象类型的工具类型。它的语法是Record<K, V>，其中K是键的类型，V是值的类型

type Record<K extends string | number | symbol, T> = {
    [P in K]: T;
}
/**
 * 泛型K即为第一次参数
 * in的意思就是遍历，如上就是将 类型string进行遍历，也就是string
 * 每个属性都是传入的T类型
 */
  • 使用案例一
type Weekday = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday";
type Time = string;
const officeHours: Record<Weekday, Time> = {
  Monday: "9:00-18:00",
  Tuesday: "9:00-18:00",
  Wednesday: "9:00-18:00",
  Thursday: "9:00-18:00",
  Friday: "9:00-17:00",
};

在这个例子中，我们使用Record创建了一个对象officeHours，它的键是Weekday类型，值是Time类型

  • 使用案例二(动态创建键值对对象):
function createRecord<K extends string | number, V>(
  keys: K[],
  value: V,
): Record<K, V> {
  const record: Partial<Record<K, V>> = {};
  for (const key of keys) {
    record[key] = value;
  }
  return record as Record<K, V>;
}

const fruits = createRecord(["apple", "banana", "orange"], "fruit");
console.log(fruits);
/*
输出:
{
  apple: 'fruit',
  banana: 'fruit',
  orange: 'fruit',
}
*/

在这个例子中，我们定义了一个泛型函数createRecord，它接受一个键值数组keys和一个值value，然后使用Record来动态创建一个对象。我们使用Partial<Record<K, V>>来先创建一个部分记录，然后通过循环将每个键设置为指定的值，最后返回完整的记录

Partial

源码

type Partial<T> = {
  [P in keyof T]?: Partial<T[P]>
}

Partial是ts官方提供的一个工具方法，生成一个新类型，该类型与T拥有相同的属性，但是所有属性皆为可选的

interface Todo {
  title: string;
  description: string;
  completed: boolean;
  date: Date;
}
type TodoPartial = Partial<Todo>;
function createApp(options: TodoPartial) {}

上面的代码使TodoPartial的类型来源于Todo，但是将Todo中的每一个字段都变为可选的,如下图
在这里插入图片描述

Required

源码

type Required<T> = {
  [P in keyof T]-?: T[P];
};

Required是ts官方提供的一个工具方法，生成一个新类型，该类型与T拥有相同的属性，但是所有属性皆为必填的

interface Todo {
  title?: string;
  description?: string;
  completed?: boolean;
  date?: Date;
}
type TodoPartial = Required<Todo>;
function createApp(options: TodoPartial) {}

上面的代码使TodoPartial的类型来源于Todo，但是将Todo中的每一个字段都变为必填的,如下图
在这里插入图片描述

Readonly

源码

type Readonly<T> = {
  readonly [R in keyof T]: T[R];
};

Readonly是ts官方提供的一个工具方法，生成一个新类型，T中的R属性是只读的，R属性是不可修改的。

interface UserInfo {
  name: string;
  age: number;
}
type Person = Readonly<UserInfo>;
// 相当于
type Person = {
  readonly name: string;
  readonly age: number;
};

Exclude

源码

type Exclude<T, U> = T extends U ? never : T

Exclude是ts官方提供的一个工具方法，用于从类型T中排除可以赋值给类型U的所有类型,如果T是U的子类型则返回never,不是则返回T

type A = number | string | boolean
type B = number | boolean
type Foo = Exclude<A, B>
// 相当于
type Foo = string
// -------------------------------
type C = number | string | boolean;
type D = symbol ;
type E = Exclude<C, D>;
// 相当于
type E =  number | string | boolean
// -------------------------------
type F = number;
type H = number | string | boolean;
type I = Exclude<F, H>;
// 相当于
type I =  never

Extract

源码

type Exclude<T, U> = T extends U ? never : T

Extract是ts官方提供的一个工具方法，用于从类型T中提取可以赋值给类型U的所有类型,作用与Exclude相反

type A = number | string | boolean;
type B = number | boolean;
type Foo = Extract<A, B>;
// 相当于
type Foo = number | boolean
// -------------------------------
type C = number | string | boolean;
type D = symbol;
type E = Extract<C, D>;
// 相当于
type E = never

Pick

源码

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

Pick是ts官方提供的一个工具方法，它有两个参数，第一参数为类型，第二个参数为第一个类型中的字段，并且仅保留第二个参数传入的字段

interface Todo {
  title: string;
  description?: string;
  completed?: boolean;
  date: Date;
}
type TodoPick = Pick<Todo, "title" | "description" | "completed">;
function createApp(options: TodoPick) {}

上面的代码使TodoPick的类型来源于Todo，但是仅保留了title、description、completed属性,如下图
在这里插入图片描述

Omit

源码

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>

Omit是ts官方提供的一个工具方法，它有两个参数，第一参数为类型，第二个参数为第一个类型中的字段，并且将第二个参数传入的字段过滤掉,与Pick相反

interface Todo {
  title?: string;
  description: string;
  completed: boolean;
  date: Date;
}
type TodoOmitted = Omit<Todo, "completed" | "date">;
function createApp(options: TodoOmitted) {}

上面的代码使TodoOmitted的类型来源于Todo，但是过滤掉了completed和date这两个属性,如下图
在这里插入图片描述

NonNullable

NonNullable的作用是将给定类型中的null和undefined类型排除，从而得到一个新的类型，该类型被转换为非空类型。这个转换是通过类型推断和条件类型来实现的

NonNullable 是ts中的内置预定义工具类型，其源代码并不直接暴露给开发者。它是ts语言服务的一部分，并在编译过程中应用于类型检查和类型推断,下面是NonNullable的简化版本的伪代码示例，用于说明其原理

type NonNullable<T> = T extends null | undefined ? never : T;

这段简化的伪代码表示，如果传入的类型T是null或undefined，则将其换成never类型，否则保持原来的类型T

type T = NonNullable<string | number | undefined | null>;
// 相当于
type T = string | number

Parameters

Parameters的作用是以元组的方式获得函数的入参类型

Parameters 的源码并不直接暴露给开发者，因为它是ts语言服务的一部分，用于类型检查和类型推断。但我们可以推测其实现原理,下面是一个简化的伪代码示例，描述了Parameters 的工作原理

type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

这段伪代码表示，如果传入的类型T是一个函数类型，那么T将被拆解为一个函数签名，其中...args是参数列表，infer P表示类型推断，我们将其赋值给P。然后，我们返回P，即参数类型列表。如果T不是函数类型，则返回never类型

type ExampleFunction = (name: string, age: number) => void;
type Params = Parameters<ExampleFunction>;
// Params 的类型为 [string, number]
// -------------------------------
type t = Parameters<(name: string) => any>; 
// type t = [string]
type t2 = Parameters<((name: string) => any) | ((age: number) => any)>; 
// type t2 = [string] | [number]

ConstructorParameters

ConstructorParameters作用：以元组的方式获得构造函数的入参类型

ConstructorParameters 的源码并不直接暴露给开发者，因为它是ts语言服务的一部分，用于类型检查和类型推断。但我们可以推测其实现原理，下面是一个简化的伪代码示例，描述了ConstructorParameters 的工作原理

type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never;

这段伪代码表示，如果传入的类型T是一个构造函数类型，那么T将被拆解为一个构造函数签名，其中...args是参数列表，infer P表示类型推断，我们将其赋值给P。然后，我们返回P，即参数类型列表。如果T不是构造函数类型，则返回never类型

class ExampleClass {
  constructor(name: string, age: number) {}
}
type Params = ConstructorParameters<typeof ExampleClass>;
// Params 的类型为 [string, number]
// -------------------------------
type t = ConstructorParameters<(new (name: string) => any)  | (new (age: number) => any)>;
// type t = [string] | [number]

ReturnType

ReturnType 作用：获取函数类型的返回值类型，而不需要手动指定或提取

ReturnType 的源码并不直接暴露给开发者，因为它是 ts语言服务的一部分，用于类型检查和类型推断。但我们可以推测其实现原理,下面是一个简化的伪代码示例，描述了ReturnType 的工作原理

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

这段伪代码表示，如果传入的类型T是一个函数类型，那么T将被拆解为一个函数签名，其中...args是参数列表，infer R表示类型推断，我们将其赋值给R。然后，我们返回R，即返回值类型。如果T不是函数类型，则返回any类型

function exampleFunction(): string {
  return "Hello, World!";
}
type Return = ReturnType<typeof exampleFunction>;
// Return 的类型为 string
// -------------------------------
type t = ReturnType<(name: string) => string | number>
// type t = string | number

InstanceType

InstanceType 作用：获得构造函数类型的实例类型

InstanceType 的源码并不直接暴露给开发者，因为它是 ts 语言服务的一部分，用于类型检查和类型推断。但我们可以推测其实现原理，下面是一个简化的伪代码示例，描述了InstanceType 的工作原理

type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any;

这段伪代码表示，如果传入的类型T是一个构造函数类型，那么T将被拆解为一个构造函数签名，其中...args是参数列表，infer R表示类型推断，我们将其赋值给R。然后，我们返回R，即实例类型。如果T不是构造函数类型，则返回any类型

class ExampleClass {
  name: string;

  constructor() {
    this.name = "Example";
  }
}
type Instance = InstanceType<typeof ExampleClass>;
// Instance 的类型为 ExampleClass
// -------------------------------
type t = InstanceType<new (name: string) => { name: string; age: number }>;
/* 
type t = {
    name: string;
    age: number;
}
*/

import { ElPopover, ElSelect } from "element-plus";
import { ref, onMounted } from "vue";
const ElPopoverRef = ref<InstanceType<typeof ElPopover>>();
const ELSelectRef = ref<InstanceType<typeof ElSelect>>();
onMounted(() => {
  console.log(ElPopoverRef.value);
  console.log(ELSelectRef.value);
});

上面的例子是我们使用vue3+ts+element-plus在实际开发中获取ref时的类型获取方式，见下图
在这里插入图片描述

一起学web前端
关注
  • 20
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TS 内置工具
weixin_43909372的博客
10-29 2269
TS 内置工具 1、Record -> 生产一个属性为K,类型为T的类型集合。 type React<K entends keyof any, T> = { [P in K]: T; } 用法 type Foo = Record<‘a’, string> // 相当于 type Foo = { a: string } type Bar = { b: string } type Baz = Record< keyof Foo | keyof Bar, number &gt
RecordTS1.0
07-02
可以对所有远程桌面用户的操作进行录像，录像文件占用空间很小
TS推流工具，操作简单方便直接使用
09-20
ts推流工具，udp推流工具，内附实用的使用说明书.....
Typescript高级类型Record,Partial,Readonly等介绍
ddp的博客
06-16 1万+
Typescript的联合类型、Partial、Pick、Exclude、Omit介绍联合类型Partial的实现原理pick的实现原理Exclude的原理Omit原理 Typescript的联合类型、Partial、Pick、Exclude、Omit介绍 联合类型 /* 首先是联合类型的介绍 */ let a: string | number = '123' // 变量a的类型既可以是string，也可以是number a = 123 Partial (意思是部分的; 不完全的)，t
ts 内置工具类型（Partial、Pick、Record、Readonly、Exclude、Extract、Omit等）
weixin_42289080的博客
06-20 1002
ts种13种内置工具类型：partial 、readonly、required、Exclude、Extract、Pick、Omit、Record、NonNullable、Parameters、ConstructorParameters、ReturnType、InstanceType
TS 常用内置工具类型
Flipped的博客
12-28 143
TS 常用内置工具类型
TS 里几个常用的内置工具类型（Record、Partial 、 Required 、 Readonly、 Pick 、 Exclude 、 Extract 、 Omit）的使用
热门推荐
织网的博客
12-01 4万+
TS 里几个常用的内置工具类型（Partial、Partial 、 Required 、 Readonly、 Pick 、 Exclude 、 Extract 、 Omit）的使用 Partial 源码： type Partial<T> = { [P in kefof T]?: T[P] } 作用：生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为可选项 eg: interface Foo { name: string age: number }...
TS 关于泛类约束Record＜T1,T2＞
moannian的博客
11-11 7927
我们先通过一段代码来了解这一关键字的作用 我们看见此处的代码定义了一个接口，一个类型，一个函数，和三个不同函数的类型，我们先看不同调用函数的方式，可以清晰的看见，有两个报错，一个正常调用； 我们看见Record关键字里传入的是两个参数，这是默认的，传一个或穿多个则会报错，有兴趣的可以试试； 然后我们看它们所传参数的类型，其中有两个是以对象的方式传入，一个不是以对象的方式传入，我们可以清楚的看见，不以对象方式传入的会有明显的报错，而以对象传入的则是由一个有轻微的报错，而其中一个是完全没有报错 此时
ts实战系列十四：Record
最新发布
wanmeijuhao的博客
01-02 1336
【代码】ts实战系列十四：Record。
TS高级类型 Record、Pick、Partial、Required、Readonly、Exclude、Extract、Omit、NonNullable 使用
刘运召的博客
10-19 7630
TS高级类型 Record、Pick、Partial、Required、Readonly、Exclude、Extract、Omit、NonNullable 使用
Ts定义对象类型之Record＜string, any＞
在路上`的博客
05-06 1984
ps: 简单来说，就是在定义obj对象上 ，属性（string）和 属性值（any） 的类型。
你不知道的 TypeScript 高级类型(小结)
10-14
主要介绍了你不知道的 TypeScript 高级类型(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
recordts2.1
05-27
recordts2.1
电脑软件ts视频合并工具.rar
10-20
电脑软件ts视频合并工具
TS型驱动器中文说明.pdf
05-08
TS型驱动器中文说明.pdf
TS-MTS工具箱.xmind
03-18
TS-MTS工具箱功能
ts合并工具
10-29
ts合并工具，合并后为MP4格式文件
typeScript内置工具类型，通俗易懂，例子解释(Record、Readonly、Required、Partial、Extract、Exclude、Pick、Omit、NonNullable..)
qq_920189602的博客
07-10 1037
TS常用内置的工具类型有，Record、Readonly、Required、Partial、Extract、Exclude、Pick、Omit、NonNullable、Parameters、ReturnType。记住这些，在开发中，将会提高我们的开发效率。
ts的内置类型Record，给对象的键值对添加类型
Frank_colo的博客
05-20 683
【代码】ts的内置类型Record，给对象的键值对添加类型。
ts5291n100使用说明书
07-31
TS5291N100是一款特殊用途的产品，使用说明书中包含了该产品的详细信息和使用方法。以下是对TS5291N100使用说明书的简要回答。 首先，在使用前，用户需要先了解产品的基本概念。TS5291N100是一个设备，用于处理媒体信号。它具有多个输入和输出接口，可以将不同的视频和音频信号进行转换、合并、处理和输出。同时，它还具有一些特殊功能，如图像增强、音频分轨等。 在阅读使用说明书之前，用户需要确保已正确连接所有相关的设备和电源，并保持设备处于正常工作状态。 接下来，使用说明书详细介绍了该产品的各种操作和功能。用户可以根据需要选择合适的操作方式，并根据说明书中的步骤进行操作。例如，用户可以选择通过旋钮或按钮来调节音量、亮度等参数；可以选择不同的输入源和输出源等。 同时，使用说明书还提供了一些注意事项和故障排除的方法。用户在操作过程中，如果遇到问题或故障，可以参考说明书中的建议进行排查和解决。 最后，使用说明书还给出了一些额外的相关信息，如维护保养、安全警示等。用户可以根据说明书中的提示，定期对设备进行检查和维护，以确保其良好的工作状态和安全性。 综上所述，TS5291N100使用说明书提供了产品的详细信息、使用方法、注意事项和故障排除等内容，帮助用户正确、安全地使用该产品。用户在使用前应仔细阅读并按照说明进行操作，以充分利用产品的功能和优势。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值