Skip to content

映射类型

当你不想重复定义类型,一个类型可以以另一个类型为基础创建新类型。

映射类型建立在索引签名的语法上,索引签名用于声明没有被提前声明的属性类型。

typescript
type OnlyBoolsAndHorses = { 
  [key: string]: boolean | Horse; 
};

const conforms: OnlyBoolsAndHorses = { 
  del: true, 
  rodney: false, 
};

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

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

在这个例子中, OptionsFlags 将从 Type 类型中获取所有属性,并将它们的值改为布尔值。

typeScript
type FeatureFlags = { 
  darkMode: () => void; 
  newUserProfile: () => void; 
};

/*
type FeatureOptions = { 
    darkMode: boolean;
    newUserProfile: boolean; 
}
*/
type FeatureOptions = OptionsFlags<FeatureFlags>;

映射修改器

在映射过程中,有两个额外的修饰符可以应用: readonly 和 ? ,它们分别影响可变性和可选性。

你可以通过用 - 或 + 作为前缀来删除或添加这些修饰语。如果你不加前缀,那么就假定是 + 。

typescript
type CreateMutable<Type> = { 
  // 从一个类型的属性中删除 "readonly"属性
  -readonly [Property in keyof Type]: Type[Property]; 
};

type LockedAccount = { 
  readonly id: string; 
  readonly name: string; 
};

/*
type UnlockedAccount = { 
    id: string; 
    name: string; 
}*/
type UnlockedAccount = CreateMutable<LockedAccount>;
typescript
// 从一个类型的属性中删除 "可选" 属性 
type Concrete<Type> = { 
  [Property in keyof Type]-?: Type[Property]; 
};

type MaybeUser = { 
  id: string; 
  name?: string; 
  age?: number; 
};

/*
type User = { 
    id: string; 
    name: string; 
    age: number; 
}
*/
type User = Concrete<MaybeUser>;

通过 as 做 key 重映射

在TypeScript 4.1及以后的版本中,你可以通过映射类型中的as子句重新映射映射类型中的键。

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

你可以利用模板字面类型等功能,从先前的属性名称中创建新的属性名称。

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

你可以通过条件类型产生 never 滤掉的键。

typescript
// 删除 "kind"属性 
type RemoveKindField<Type> = { 
  [Property in keyof Type as Exclude<Property, "kind">]: Type[Property]
};

/*
type KindlessCircle = { 
  radius: number; 
}
*/
interface Circle { 
  kind: "circle"; 
  radius: number; 
}

type KindlessCircle = RemoveKindField<Circle>;

你可以映射任意的联合体,不仅仅是 string | number | symbol 的联合体,还有任何类型的联合体。

typescript
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 = { 
    square: (event: SquareEvent) => void; 
    circle: (event: CircleEvent) => void; 
}
*/
type Config = EventConfig<SquareEvent | CircleEvent>

进一步探索

映射类型与本类型操作部分的其他功能配合得很好,例如,这里有一个使用条件类型的映射类型 ,它根据一个对象的属性 pii 是否被设置为字面意义上的 true ,返回 true 或 false。

typescript
type ExtractPII<Type> = { 
  [Property in keyof Type]: Type[Property] extends { pii: true } ? true : false; 
};

/*
type ObjectsNeedingGDPRDeletion = { 
  id: false; 
  name: true; 
}*/
type DBFields = { 
  id: { format: "incrementing" }; 
  name: { type: string; pii: true }; 
};

type ObjectsNeedingGDPRDeletion = ExtractPII<DBFields>