0
点赞
收藏
分享

微信扫一扫

Typescript 泛型 高级类型

窗外路过了谁 2022-03-11 阅读 59
  1. typeof
    获取一个变量声明或对象的类型
interface User{
  name: string;
  age: number;
}

const user: User= { name: 'huxianc', age: 25 };
type UserType= typeof user; // -> User

function func(x: number): number[] {
  return [x];
}

type Func = typeof func; // -> (x: number) => number[]

2.keyof
获取某种类型的所有键,返回联合类型

interface User{
  name: string;
  age: number;
}

type K1 = keyof User; // "name" | "age"
type K2 = keyof User[]; // number | "length" | "toString" | "toLocaleString" | "pop" | "push" | "concat" | "join" | "reverse" | "shift" | "slice" | "sort" | "splice" | "unshift" | "indexOf" | "lastIndexOf" | ... 14 more ... | "includes"
// 对象的propName就算是number也会转换成string
type K3 = keyof { [x: string]: User};  // string | number

 3.in 遍历枚举类型

export interface INavOBj {
  name: string;
  code: string;
  title?: string | undefined;
}

type NavBasicProps = "a" | "b" | "c";
export interface INavBasic {
  [p in NavBasicProps]: INavOBj;
}

4.infer 在条件类型语句中,可以用 infer 声明一个类型变量并且对它进行使用

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

以上代码中 infer R 就是声明一个变量来承载传入函数签名的返回值类型,简单说就是用它取到函数返回值的类型方便之后使用

5. extends 泛型约束

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

6.Partial  Partial<T> => T中所有属性变成可选属性?

// 源码
type Partial<T> = {
  [P in keyof T]?: T[P];
};


//eg
interface Foo {
    name: string
    age: number
}
type Bar = Partial<Foo>
// 相当于
type Bar = {
    name?: string
    age?: string
}

7. Required 生成一个新类型,该类型与 T 拥有相同的属性,但是所有属性皆为必选项

// eg:
interface Foo {
    name: string
    age?: number
}
type Bar = Required<Foo>
// 相当于
type Bar = {
    name: string
    age: string
}

8.ReadOnly 所有变成只读

9.Pick 生成一个新类型,该类型拥有 T 中的 K 属性

// 源码
type Pick<T, K extends keyof T> = {
    [p in K]: T[K]
}


//eg
interface Foo {
    name: string
    age?: number
    gender: string
}
type Bar = Pick<Foo, 'age' | 'gender'>
// 相当于
type Bar = {
    age?: string
    gender: string
}

10.Exclude<T, U>  从泛型 T 中排除可以赋值给泛型 U 的类型

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

//eg:
type A = number | string | boolean
type B = number | boolean

type Foo = Exclude<A, B>
// 相当于
type Foo = string

11. Extract<T, U> 从泛型 T 中提取可以赋值给泛型 U 的类型

type A = number | string | boolean
type B = number | boolean

type Foo = Exclude<A, B>
// 相当于
type Foo = number | boolean

12. Omit<T, K extends keyof any> 生成一个新类型,该类型拥有 T 中除了 K 属性以外的所有属性

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


//eg
interface IUser {
  name: string;
  age: number;
  address: string;
}

type t = Omit<IUser, 'name' | 'age'>;
/* type t = {
	address: string;
} */

13. NonNullable<T> 从泛型 T 中排除掉 null 和 undefined

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

type t = NonNullable<'name' | undefined | null>;
/* type t = 'name' */

14. ReturnType<T extends (...args: any) => any> 获得函数返回值的类型

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

type t = ReturnType<(name: string) => string | number>
// type t = string | number
举报

相关推荐

0 条评论