TypeScript学习笔记--实用工具类型

一、Partial 让属性都变成可选的

type A  = {a:number, b:string}
type A1 = Partial<A> // { a?: number; b?: string;}

二、 Required  让属性都变成必选      

type A  = {a?:number, b?:string}
type A1 = Required<A> // { a: number; b: string;}

三、 Pick<T,K>    只保留自己选择的属性, K代表要保留的属性键值 

type A  = {a:number,b:string,c:boolean}
type A1 = Pick<A, 'a'|'b'> //  {a:number,b:string}

四、Omit<T,K> 实现排除已选的属性

type A  = {a:number, b:string}
type A1 = Omit<A, 'a'> // {b:string}

五、Record<K,T>创建一个类型,K代表键值的类型, T代表值的类型

type A1 = Record<string, string> // 等价{[k:string]:string}

六、Exclude<T,U> 过滤T中和U相同(或兼容)的类型

type A  = {a:number, b:string}
type A1 = Exclude<number|string, string|number[]> // number

七、Extract<T,U> 提取T中和U相同(或兼容)的类型

type A  = {a:number, b:string}
type A1 = Extract<number|string, string|number[]> // string

八、NonNullable剔除T中的undefined和null

type A1 = NonNullable<number|string|null|undefined> // number|string

九、ReturnType获取T的返回值的类型

type A1= ReturnType<()=>number> // number

type T10 = ReturnType<() => string>;  // string
type T11 = ReturnType<(s: string) => void>;  // void
type T12 = ReturnType<(<T>() => T)>;  // {}
type T13 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]
type T14 = ReturnType<typeof f1>;  // { a: number, b: string }
type T15 = ReturnType<any>;  // any
type T16 = ReturnType<never>;  // any
type T17 = ReturnType<string>;  // Error
type T18 = ReturnType<Function>;  // Error

十、InstanceType 返回T的实例类型

interface A{
    a:HTMLElement;
}

interface AConstructor{
    new():A;
}

function create (AClass:AConstructor):InstanceType<AConstructor>{
    return new AClass();
}

type T20 = InstanceType<typeof C>;  // C
type T21 = InstanceType<any>;  // any
type T22 = InstanceType<never>;  // any
type T23 = InstanceType<string>;  // Error
type T24 = InstanceType<Function>;  // Error

十一、Parameters获取函数参数类型, 返回类型为元祖, 元素顺序同参数顺序.

interface A{
    (a:number, b:string):string[];
}

type A1 = Parameters<A> // [number, string]

十二、ConstructorParameters 获取构造函数的参数类型, T这里是构造函数类型.

interface AConstructor{
    new(a:number):string[];
}

type A1 = ConstructorParameters<AConstructor> // [number]

十三、ThisParameterType从函数类型中提取 this 参数的类型 若函数类型不包含 this 参数，则返回 unknown 类型。

function toHex(this: Number) {
    return this.toString(16);
}

function numberToString(n: ThisParameterType<typeof toHex>) {
    return toHex.apply(n);
}

十四、OmitThisParameter从Type类型中剔除 this 参数。 若未声明 this 参数，则结果类型为 Type 。 否则，由Type类型来构建一个不带this参数的类型。 泛型会被忽略，并且只有最后的重载签名会被采用。

function toHex(this: Number) {
    return this.toString(16);
}

const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);

console.log(fiveToHex());

十五、ThisType这个工具不会返回一个转换后的类型。 它做为上下文的this类型的一个标记。 注意，若想使用此类型，必须启用--noImplicitThis。

type ObjectDescriptor<D, M> = {
    data?: D;
    methods?: M & ThisType<D & M>; // Type of 'this' in methods is D & M
};

function makeObject<D, M>(desc: ObjectDescriptor<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: {
        moveBy(dx: number, dy: number) {
            this.x += dx; // Strongly typed this
            this.y += dy; // Strongly typed this
        },
    },
});

obj.x = 10;
obj.y = 20;
obj.moveBy(5, 5);