typescript -内置工具类型2

66 阅读1分钟

Uppercase

将字符串中的字符转换为大写

Lowercase

将字符串中的字符转换为小写

Capitalize

将字符串中的第一个字符转换为大写

Uncapitailze

将字符串中的第一个字符转换为小写

Parameters

获取函数的参数类型,得到一个数组

Parameters<typeof 函数名称> //使用typeof才能指向函数type
type Parameters<T extends FunctionType> = T extends (...args: infer P) => any ? P : never;
// 定义一个函数
function getUserInfo(id:number, name:string){}

// 获取到函数需要的形参 Type[]
type GetUserInfo = Parameters<typeof getUserInfo>; 
   
const arg:GetUserInfo = [ 1, "name1" ]; //[id:number, name:string]

getUserInfo(...arg);

ConstructorParameters

获取一个类里函数的参数类型

type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;
class UserInfo {
    constructor(id:number, name:string){}
}

type UserArg =  ConstructorParameters<typeof UserInfo>;

const arg:UserArg = [ 1, "name1"];

new UserInfo(...arg);

ReturnType

获取函数的返回值类型

type Parameters<T extends FunctionType> = T extends (...args: any) => infer R ? R : never;
// 定义一个函数 Type
type GetUserInfo = ()=>string;

const userInfo:ReturnType<GetUserInfo> = 'name'; 

InstanceType

获取构造函数返回值类型

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

ThisParameterType

提取函数的this参数

type ThisParameterType<T> = T extends (this: infer U, ...args: any[]) => any ? U : unknown;
// 定义一个函数和函数 this 类型。 
function getUserInfo(this:{ name:string }, id:number){}

const getUserInfoThis: ThisParameterType<typeof getUserInfo> = {
    name:"name1"
};

OmitThisParameter

忽略函数的this参数

type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;
// 定义一个函数和函数 this 类型。 
function getUserInfo(this:{ name:string }, id:number){}

const getUserInfoThis: OmitThisParameterType<typeof getUserInfo> = {
    id:1
};

ThisType

给对象标记this接口

@nolmplicitThis: true ThisType才能使用

// @noImplicitThis: true
type Object<D, M> = {
  data?: D; 
  methods?: M & ThisType<D & M>; // this 要指向 D & M, 和 methods?: D & M 表示不一样,ThisType 只改变对象的 this
};

function makeObject<D, M>(desc: Object<D, M>): D & M {
  let data: object = desc.data || {};
  let methods: object = desc.methods || {};
  return { ...data, ...methods } as D & M;
}

let obj = makeObject({
  data: { x: 0, y: 0 },
  methods: {
    make(a:number, y:number) {
      this.x = a
      this.y = b
    }
  },
});

obj.x = 1;
obj.y = 2;
obj.make(5, 5);