zoukankan      html  css  js  c++  java
  • typescript进阶篇之高级类型与条件类型(Readonly, Partial, Pick, Record)

    本文所有东西尽可在 typescript 官网文档寻找,但是深浅不一

    高级类型

    lib 库中的五个高级类型
    以下所有例子皆以 person 为例

    interface Person {
        name: string;
        age?: number;
    }
    

    Partial

    源码:

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

    实例:

    type person2 = Partial<Person>;
    // person2 === {name?: string; age?: number}
    

    Required

    源码:

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

    实例:

    type person3 = Required<Person>;
    // person3 === {name: string; age: number}
    

    Readonly

    源码:

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

    实例:

    type person4 = Readonly<Person>;
    // person4 === {
    //        readonly name: string;
    //        readonly age?: number;
    //  }
    

    Pick

    源码:

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

    实例:

    type person5 = Pick<Person, "name">;
    // person5 === {name: string}
    

    Record

    源码:

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

    实例:

    type person6 = Record<'name' | 'age', string>
    // person6 === {name: string; age: string}
    

    条件类型

    关于条件类型,官网上说的很详细了,我就直接拿过来

    type T00 = Exclude<"a" | "b" | "c" | "d", "a" | "c" | "f">;  // "b" | "d"
    type T01 = Extract<"a" | "b" | "c" | "d", "a" | "c" | "f">;  // "a" | "c"
    
    type T02 = Exclude<string | number | (() => void), Function>;  // string | number
    type T03 = Extract<string | number | (() => void), Function>;  // () => void
    
    type T04 = NonNullable<string | number | undefined>;  // string | number
    type T05 = NonNullable<(() => string) | string[] | null | undefined>;  // (() => string) | string[]
    
    function f1(s: string) {
        return { a: 1, b: s };
    }
    
    class C {
        x = 0;
        y = 0;
    }
    
    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
    
    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
    

    高级类型与条件类型就这些,如果能够掌握他们,你就能在 ts 的海洋中任意遨游了

  • 相关阅读:
    随机购买彩票问题
    for循环小题
    20150914 异常语句 math的方法 去空格 索引
    20150913生成三个10以内的随机数,不想等
    winform 计算器 两步走
    枚举、常量、结构
    视频嵌入网页, 分享嵌入网页!
    !!!框架集
    日常总结!!!
    随笔练习!!!
  • 原文地址:https://www.cnblogs.com/Grewer/p/10973744.html
Copyright © 2011-2022 走看看