在 TypeScript 中管理键值常量

许多应用程序在表单中都有一个下拉选择菜单。让我们想象一个如下所示的表单控件；

通常，每个选择菜单项都有ID和标签。 ID 负责与其他组件、服务或服务器端进行通信。标签负责向用户显示文本。

本文讲解了如何管理带有 ID 的菜单项的常量及其标签的映射。本文使用了 TypeScriptas const自 v3.4 版本引入的功能。

定义 colorIDs 元组

在 TypeScript 中，元组是一个数组，但其长度和元素是固定的。你可以as const在数组字面量上使用指令来定义元组。（as const该指令需要 TypeScript 3.4 及以上版本）

创建colors.ts并定义colorIDs元组如下；



export const colorIDs = ['green', 'red', 'blue'] as const;

的类型colorIDs不是，string[]而是['green', 'red', 'blue']。它的长度绝对是 3 ，并且colorIDs[0]始终为'green'。这是一个元组！

提取 ColorID 类型

元组类型可以转换为其项的联合类型。在这种情况下，你可以'green' | 'red' | 'blue'从元组中获取类型。

添加一行colors.ts以表示喜欢；



export const colorIDs = ['green', 'red', 'blue'] as const;

type ColorID = typeof colorIDs[number]; // === 'green' | 'red' | 'blue'

感到困惑？别担心。这不是魔术。

colorIDs[number]表示“可以通过数字访问的字段”，即'green'、'red'或'blue'。

所以typeof colorIDs[number]就变成了联合类型'green' | 'red' | 'blue'。

定义 colorLabels 映射

colorLabels地图是一个如下所示的对象；



const colorLabels = {
  blue: 'Blue',
  green: 'Green',
  red: 'Red',
};

因为colorLabels没有明确的类型，所以即使您错过了定义red标签也无法注意到。

让我们确保colorLabels拥有一套包含所有颜色的完整标签！ColorID可以帮助它。

TypeScript 提供了Record定义 Key-Value Map 对象的类型。键为ColorID，值为字符串。因此colorLabels的类型应该是Record<ColorID, string>。



export const colorIDs = ['green', 'red', 'blue'] as const;

type ColorID = typeof colorIDs[number];

export const colorLabels: Record<ColorID, string> = {
  green: 'Green',
  red: 'Red',
  blue: 'Blue',
} as const;

当您忘记定义red字段时，TypeScript 编译器会在对象上抛出错误。

顺便说一下，Angular v8.0+ 与 TypeScript v3.4 兼容。上面的演示应用程序如下；



import { Component } from '@angular/core';

import { FormControl } from '@angular/forms';


import { colorIDs, colorLabels } from './colors';


@Component({

  selector: 'app-root',

  template: 

    &lt;label for="favoriteColor"&gt;Select Favorite Color:&amp;nbsp;&lt;/label&gt;

    &lt;select id="favoriteColor" [formControl]="favoriteColorControl"&gt;

      &lt;option *ngFor="let id of colorIDs" [ngValue]="id"&gt;

        {{ colorLabels[id] }}

      &lt;/option&gt;

    &lt;/select&gt;

    &lt;div&gt;Selected color ID: {{ favoriteColorControl.value }}&lt;/div&gt;

,

})

export class AppComponent {

  readonly colorIDs = colorIDs;

  readonly colorLabels = colorLabels;


readonly favoriteColorControl = new FormControl(this.colorIDs[0]);

}

结论

as const将数组转换为元组
typeof colorIDs[number]返回其项目的联合类型
定义一个对象Record<ColorID, string>来保存完整的字段集。

鏂囩珷鏉ユ簮锛�https://dev.to/angular/managing-key-value-constants-in-typescript-221g