ts相关笔记(extends、infer、Pick、Omit)

最近刷了本ts小册,对一些知识点做下笔记。

extends

extends 是一个关键字,用于对类型参数做一些约束。

A extends B 意味着 A 是 B 的子类型,比如下面是成立的

  • ‘abc’ extends string
  • 599 extends number

看下面例子:

type MyType<T extends number> = {
   
  value: T;
};

const example: MyType<number> = {
   
  value: 42
};

联合类型子集均为联合类型的子类型,即 1、 1 | 2 是 1 | 2 | 3 | 4 的子类型

type MyType<T extends number | string> = {
   
  value: T;
};

const example1: MyType<number> = {
   
  value: 42
};

const example2: MyType<string> = {
   
  value: 'hello'
};

通过接口进行约束

interface MyInterface {
   
  length: number;
}

type MyType<T extends MyInterface> = {
   
  data: T;
};

const example: MyType<string> = {
   
  data: 'hello' // Error: 'string' does not satisfy the constraint 'MyInterface'
};

const validExample: MyType<{
    length: number }> = {
   
  data: {
    length: 5 }
};

根据传入的请求码判断请求是否成功

type ResStatus<ResCode extends number> = ResCode extends 10000 | 10001 | 10002
  ? 'success'
  : 'failure';

type Res1 = ResStatus<10000>; // "success"
type Res2 = ResStatus<20000>; // "failure"

type Res3 = ResStatus<'10000'>; // 类型“string”不满足约束“number”。

如果我们想让这个类型别名可以无需显式传入泛型参数也能调用,并且默认情况下是成功地,这样就可以为这个泛型参数声明一个默认值:

type ResStatus<ResCode extends number = 10000> = ResCode extends 10000 | 10001 | 10002
  ? 'success'
  : 'failure';

type Res4 = ResStatus; // "success"

infer

通过 infer 关键字来在 条件类型 中提取类型的 某一部分信息

让 TypeScript 根据上下文自动推断出我们需要的类型,从而简化代码并让类型信息更具灵活性

看下面例子来理解

假设我们有一个条件类型 ExtractReturnType,它接受一个类型参数 T。我们希望当 T 是一个函数类型时,从这个函数类型中提取出它的返回值类型;当 T 不是函数类型时,返回never类型。

type ExtractReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function greet(): string {
   
  return 'Hello!';
}

现在,我们可以使用 ExtractReturnType 来推断 greet 函数的返回值类型,而不需要显式地声明它:

const result: ExtractReturnType<typeof greet> = 'Hello World';

ExtractReturnType 就会被推断为 string 类型 👇
ExtractReturnType 就会被推断为 string 类型
TypeScript 内置的声明文件es5.d.ts中使用infer举例

  • 获取函数类型中this的参数类型

    type ThisParameterType<T> = 
    T extends (this: infer U, ...args: never) => 
    any ? U : unknown;
    
    
    class Person {
         
      name: string;
      constructor(name: string) {
         
        this.name = name;
      }
      getName(this: Person): string {
         
        return this.name;
      }
    }
    
    type testThisType = ThisParameterType<typeof Person.prototype.getName>; // Person
    
  • 从函数类型中移除 this 参数

    type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;
    
    function sayHello(this: {
          name: string }) {
         
      console.log(`Hello, ${
           this.name}!`);
    }
    
    type WithoutThisParam = OmitThisParameter<typeof sayHello>; // () => void
    

    在这里插入图片描述

  • 获取函数类型中参数的类型列表

    type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
    
    function sum(a: number, b: number) {
         
      return a + b;
    }
    
    type SumParams = Parameters<typeof sum>; // [a: number, b: number]
    

Pick 和 Omit

都是对结构处理的工具类型,Pick 和 Omit 功能相反

先看一下源码实现

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

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

Pick,它接受两个泛型参数,第一个参数 T 即是我们会进行 结构处理 的 原类型(一般是对象类型),第二个参数 K 则是被约束为 T 类型的 键名联合类型 (就是第一个参数传一个对象,第二个参数传 对象的键 (key),最后获取到一个新对象类型)

Omit ,与Pick相反,Pick 是保留这些传入的键, Omit 则是移除这些传入的键取剩下的

使用举例

interface Foo {
   
  name: string;
  age: number;
  job: string;
}

type PickedFoo = Pick<Foo, "name" | "age">
// 等同于
// type PickedFoo = {
   
//     name: string;
//     age: number;
// }
interface Foo {
   
  name: string;
  age: number;
  job: string;
}

type OmitedFoo = Omit<Foo, 'name'>
// 等同于
// type OmitedFoo = {
   
//     age: number;
//     job: string;
// }

相关推荐

  1. ts快速上手笔记01

    2023-12-26 12:30:03       20 阅读
  2. Golang 切片相关笔记

    2023-12-26 12:30:03       35 阅读
  3. 容器相关笔记

    2023-12-26 12:30:03       36 阅读
  4. UIScrollView的相关笔记

    2023-12-26 12:30:03       10 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-26 12:30:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-26 12:30:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-26 12:30:03       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-26 12:30:03       20 阅读

热门阅读

  1. Python学习笔记(二) 数据类型及相关函数

    2023-12-26 12:30:03       40 阅读
  2. linux系统中,常用服务端口号大全

    2023-12-26 12:30:03       27 阅读
  3. xxl-job使用笔记

    2023-12-26 12:30:03       39 阅读