TypeScript从类型创建类型之映射类型

29 阅读2分钟

映射类型建立在在索引签名的语法之上,映射类型被用作提前定义未被定义的类型的属性:

type OnlyBoolsAndHorses = {
  [key: string]: boolean | Horse;
};
 
const conforms: OnlyBoolsAndHorses = {
  del: true,
  rodney: false,
};

映射类型是一种通用类型,它使用PropertyKeys的联合(通常通过keyof创建)来迭代键以创建类型:

type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};

在这个例子当中,OptionsFlags将从Type中获得所有键,并将它们的的类型变成boolean类型。

type FeatureFlags = {
  darkMode: () => void;
  newUserProfile: () => void;
};
 
type FeatureOptions = OptionsFlags<FeatureFlags>;
      // type FeatureOptions = {
      //   darkMode: boolean;
      //   newUserProfile: boolean;
      // }

映射修饰符

这里有两个额外的修饰符可以在映射期间被应用:readonly?readonly影响可变性,?影响可选。 你可以通过-或者+来移除或者添加这些修饰符。如果你不添加前缀+是默认的。

type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property];
};
 
type LockedAccount = {
  readonly id: string;
  readonly name: string;
};
 
type UnlockedAccount = CreateMutable<LockedAccount>;
      // type UnlockedAccount = {
      //        id: string;
      //        name: string;
      //       }
// Removes 'optional' attributes from a type's properties
type Concrete<Type> = {
  [Property in keyof Type]-?: Type[Property];
};
 
type MaybeUser = {
  id: string;
  name?: string;
  age?: number;
};
 
type User = Concrete<MaybeUser>;
    // type User = {
    //    id: string;
    //    name: string;
    //    age: number;
    //   }

通过as重新映射键

你可以在映射时使用as来重新映射

type MappedTypeWithNewProperties<Type> = {
    [Properties in keyof Type as NewKeyType]: Type[Properties]
}

你可以利用类似字符模板类型来创建新的属性名

type Getters<Type> = {
    [Property in keyof Type as `get${Capitalize<string & Property>}`]: () => Type[Property]
};
 
interface Person {
    name: string;
    age: number;
    location: string;
}
 
type LazyPerson = Getters<Person>;
     // type LazyPerson = {
         // getName: () => string;
         // getAge: () => number;
         // getLocation: () => string;
     // }

你可以通过条件类型产生never类型来过滤

// Remove the 'kind' property
type RemoveKindField<Type> = {
    [Property in keyof Type as Exclude<Property, "kind">]: Type[Property]
};
 
interface Circle {
    kind: "circle";
    radius: number;
}
 
type KindlessCircle = RemoveKindField<Circle>;
        // type KindlessCircle = {
        //    radius: number;
        // }

你可以映射任意联合类型,不仅仅只是string | number | symbol,也可以是任意类型:

type EventConfig<Events extends { kind: string }> = {
    [E in Events as E["kind"]]: (event: E) => void;
}
 
type SquareEvent = { kind: "square", x: number, y: number };
type CircleEvent = { kind: "circle", radius: number };
 
type Config = EventConfig<SquareEvent | CircleEvent>
     // type Config = {
     //  square: (event: SquareEvent) => void;
     //  circle: (event: CircleEvent) => void;
     // }

进一步探索(Further Exploration)

映射类型可以与类型操作部分中的其它功能很好的配合。举个例子,条件类型通过对象是否有pii来返回true或者false

type ExtractPII<Type> = {
  [Property in keyof Type]: Type[Property] extends { pii: true } ? true : false;
};
 
type DBFields = {
  id: { format: "incrementing" };
  name: { type: string; pii: true };
};
 
type ObjectsNeedingGDPRDeletion = ExtractPII<DBFields>;
         // type ObjectsNeedingGDPRDeletion = {
         //  id: false;
         //  name: true;
         // }

参考 Map Types