Skip to main content

TypeScript使用

使用元组生成联合类型​

// 字符串数组
const color = ['♥','♦','♣','♠'];
// 添加as const
const values = ['1','2','3','4','5','6','7','8','9','10','J','Q','K'] as const;

// 没有as const，仍然当作字符串类型
type Color = typeof values[number]
// 有as const可以取得联合类型
type Values = typeof values[number]

// 创建扑克牌方法，希望color、value的值是存在于上面数组里的
function create(value:Values, color:Color){}

从对象、数组、枚举生成类型、联合​

一行速记模板

  • 从对象值得联合：type V = typeof obj[keyof typeof obj];
  • 从只读数组得联合：type V = typeof arr[number];
  • 从字符串枚举得联合：type V = EnumName;

示例：

export const TASK_STATUS_PAIRS = {
  "0": "准备进行",
  "1": "正在进行",
  "-1": "任务冲突"
} as const;

// 键的类型
export type TaskStatusCode = keyof typeof TASK_STATUS_PAIRS; // "0" | "1" | "-1"
// 值的联合类型
export type TaskStatusValue = typeof TASK_STATUS_PAIRS[TaskStatusCode]; 
// 等价：typeof TASK_STATUS_PAIRS[keyof typeof TASK_STATUS_PAIRS]

从动态对象生成数组

export const TASK_STATUS_VALUES = Object.values(TASK_STATUS_PAIRS) as readonly TaskStatusValue[];

字符串枚举

export enum TaskStatusEnum {
  Ready = "准备进行",
  Running = "正在进行",
  Conflict = "任务冲突"
}

// 其类型本身就是值联合
export type TaskStatusEnumValue = TaskStatusEnum; // "准备进行" | "正在进行" | "任务冲突"

// 获取所有值数组（运行时）
export const TASK_STATUS_VALUES_ENUM = Object.values(TaskStatusEnum) as readonly TaskStatusEnumValue[];

数字枚举、单独映射中文（不常用）

export enum TaskStatusCodeEnum {
  Ready = 0,
  Running = 1,
  Conflict = -1
}

export const TASK_STATUS_LABELS: Record<TaskStatusCodeEnum, string> = {
  [TaskStatusCodeEnum.Ready]: "准备进行",
  [TaskStatusCodeEnum.Running]: "正在进行",
  [TaskStatusCodeEnum.Conflict]: "任务冲突"
} as const;

export type TaskStatusValue = typeof TASK_STATUS_LABELS[TaskStatusCodeEnum]; // "准备进行" | "正在进行" | "任务冲突"