为 TypeScript 对象中的索引成员强制类型

Shuvayan Ghosh Dastidar 2023年1月30日
  1. 使用映射类型为 TypeScript 对象中的索引成员强制类型
  2. 使用带有映射类型的泛型类型来强制 TypeScript 对象中的索引成员的类型
  3. 使用 Record 类型为 TypeScript 对象中的索引成员强制类型
为 TypeScript 对象中的索引成员强制类型

TypeScript 是一种强类型语言,所有用作该语言一部分的结构都是强类型的。有像接口或类型这样的结构,它们是原始类型和用户定义类型的组合。

甚至可以有复杂的类型,如映射或索引类型,它们在 TypeScript 中属于映射类型的范畴。本教程将演示如何在 TypeScript 中使用映射类型。

使用映射类型为 TypeScript 对象中的索引成员强制类型

映射类型可以表示具有固定模式的对象,该模式具有固定类型的键和 TypeScript 中对象中的值。它们建立在索引签名的语法之上。

type NumberMapType = {
    [key : string] : number;
}

// then can be used as
const NumberMap : NumberMapType = {
    'one' : 1,
    'two' : 2,
    'three' : 3
}

除了固定对象键的类型外,映射类型还可用于使用索引签名更改对象中所有键的类型。

interface Post {
    title : string;
    likes : number;
    content : string;
}

type PostAvailable = {
    [K in keyof Post] : boolean;
}

const postCondition : PostAvailable = {
    title : true,
    likes : true,
    content : false
}

下面使用接口 Post 的键并将它们映射到不同的类型,布尔值。

使用带有映射类型的泛型类型来强制 TypeScript 对象中的索引成员的类型

映射类型也可用于创建泛型类型对象。泛型类型可用于创建具有动态类型的类型。

enum Colors {
    Red,
    Yellow,
    Black
}

type x = keyof typeof Colors;

type ColorMap<T> = {
    [K in keyof typeof Colors] : T;
}

const action : ColorMap<string> = {
    Black : 'Stop',
    Red : 'Danger',
    Yellow : 'Continue'
}

const ColorCode : ColorMap<Number> = {
    Black : 0,
    Red : 1,
    Yellow : 2
}

在上面的示例中,枚举 Colors 已用于映射类型对象,并且已根据 ColorMap<T> 支持的泛型类型强制执行不同的类型。

使用 Record 类型为 TypeScript 对象中的索引成员强制类型

Record 类型是 TypeScript 中的内置类型,可用于对 TypeScript 中的对象强制执行类型。Record 类型接受两个字段:键的类型和对象中的值。

它可以看作是在其他编程语言中找到的地图。

const LogInfo : Record<string, string> = {
    'debug' : 'Debug message',
    'info' : 'Info message',
    'warn' : 'Warning message',
    'fatal' : 'Fatal error'
}

const message = LogInfo['debug'] + " : Hello world";
console.log(message);

输出:

Debug message : Hello world
Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

相关文章 - TypeScript Map