【问题标题】:Typescript: What is a mapped type and how is this useful?Typescript:什么是映射类型,它有什么用?
【发布时间】:2021-08-01 23:36:25
【问题描述】:

Typescript:什么是映射类型?

  • 它是如何工作的?
  • 我应该什么时候使用它?
  • 示例

【问题讨论】:

    标签: typescript types typescript-typings


    【解决方案1】:

    Typescript mapped types:

    在 Typescript 中,我们有时希望基于其他类型构建类型。映射类型允许我们以非常简洁的方式基于现有类型生成新类型,这使我们遵守不要重复自己原则


    自定义属性:

    • 问题:我们事先并不知道对象类型的所有属性
    • 解决方案:我们可以声明自定义属性并使用以下语法键入它们:

    type customProperties = {
      [key: string]: string | boolean;
    };
    
    const conforms: customProperties = {
      str: 'foo',
      bool: true,
      // int: 123 > Error Type 'number' is not assignable to type 'string | boolean'.
    };
    

    映射类型:

    • 问题:我们将一个对象类型基于另一种类型,我们不想定义每个类型的所有属性
    • 解决方案:我们可以声明自定义属性并使用以下语法键入它们:

    type Person = {
      name: string;
      age: string;
    };
    
    // Demo only >> TS has a builtin Readonly, use that
    type myReadonly<Type> = {
      readonly [Property in keyof Type]: Type[Property];
    };
    
    // Demo only >> TS has a builtin Partial, use that
    type myPartial<Type> = {
      [Property in keyof Type]?: Type[Property];
    };
    
    type ReadonlyPerson = myReadonly<Person>
    type PartialPerson  = myPartial<Person>
    

    请注意,映射类型使用自定义属性的语法[]: type。自定义属性和映射类型的区别如下:

    • 映射类型使用泛型和[Property in keyof Type] 语法迭代现有类型的属性。它将现有类型的所有属性映射到您可以根据需要自定义的新类型。
    • 自定义属性可让您键入您事先不知道的对象的属性。当我们不知道对象究竟会是什么样子时,这很有用。该对象可以具有在编写代码时未知的属性。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2010-09-07
      • 1970-01-01
      • 2021-04-21
      • 2015-12-30
      • 2017-04-01
      • 2012-10-24
      相关资源
      最近更新 更多