最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • ts映射类型

    正文概述 掘金(BA)   2021-02-13   569

    在映射类型里,新类型以相同的形式去转换旧类型的每个属性。

    Partial

    将每个属性转换为可选属性

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

    例子:

    type PersonPartial = Partial<Person>;
    //   ^ = type PersonPartial = {
    //       name?: string | undefined;
    //       age?: number | undefined;
    //   }
    

    Readonly

    将每个属性转换为只读属性

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

    例子:

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

    Nullable

    转换为旧类型和null的联合类型

    type Nullable<T> = { 
      [P in keyof T]: T[P] | null 
    }
    

    例子:

    type NullablePerson = Nullable<Person>;
    //   ^ = type NullablePerson = {
    //       name: string | null;
    //       age: number | null;
    //   }
    

    Pick

    选取一组属性指定新类型

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

    例子:

    interface Todo {
      title: string;
      description: string;
      completed: boolean;
    }
    
    type TodoPreview = Pick<Todo, "title" | "completed">;
    
    const todo: TodoPreview = {
      title: "Clean room",
      completed: false,
    };
    
    todo;
    // ^ = const todo: TodoPreview
    

    Record

    创建一组属性指定新类型,常用来声明普通Object对象

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

    例子:

    interface PageInfo {
      title: string;
    }
    
    type Page = "home" | "about" | "contact";
    
    const nav: Record<Page, PageInfo> = {
      about: { title: "about" },
      contact: { title: "contact" },
      home: { title: "home" },
    };
    
    nav.about;
    // ^ = const nav: Record
    

    Exclude

    去除交集,返回剩余的部分

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

    例子:

    interface Props {
      a?: number;
      b?: string;
    }
    
    const obj: Props = { a: 5 };
    
    const obj2: Required<Props> = { a: 5 };
    Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.
    

    Omit

    适用于键值对对象的Exclude,去除类型中包含的键值对

    type Omit = Pick<T, Exclude<keyof T, K>>
    

    例子:

    interface Todo {
      title: string;
      description: string;
      completed: boolean;
    }
    
    type TodoPreview = Omit<Todo, "description">;
    
    const todo: TodoPreview = {
      title: "Clean room",
      completed: false,
    };
    
    

    ReturnType

    获取返回值类型,一般为函数

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

    例子:

    declare function f1(): { a: number; b: string };
    type T4 = ReturnType<typeof f1>;
    //    ^ = type T4 = {
    //        a: number;
    //        b: string;
    //    }
    

    Required

    将每个属性转换为必选属性

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

    例子:

    interface Props {
      a?: number;
      b?: string;
    }
    
    const obj: Props = { a: 5 };
    
    const obj2: Required<Props> = { a: 5 };
    // Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.
    

    除此以外,还有很多类似的映射类型,可以参考[TypeScript: Documentation](TypeScript: Documentation - Utility Types (typescriptlang.org))获得更详细的信息。


    起源地下载网 » ts映射类型

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元