如何在TypeScript中检查字符串能否转换为自定义类型GridCellValue

你的类型定义与当前实现 #

你为数独游戏定义的TypeScript类型如下：

export type GridCellValue = 1|2|3|4|5|6|7|8|9;

export interface GridCell {
  readonly: boolean,
  value: GridCellValue|null,
}

export type Grid = Array<Array<GridCell>>

当前通过Vue的@input指令监听输入事件，使用正则验证输入内容：

function validate_input(ev: InputEvent) {
  const input_string: string = ev.data ?? '';
  const grid_cell_value_regex = /^([123456789])$/;
  const value = grid_cell_value_regex.test(input_string) ? input_string : '';
  if (ev.target === null)
    return;
  const el = ev.target as HTMLInputElement;
  el.value = value;
}

无需正则的解决方案 #

方案1：数值范围判断 #

利用GridCellValue是1-9整数的特性，将输入转成数字后验证范围：

function validate_input(ev: InputEvent) {
  const input_string: string = ev.data ?? '';
  const num = Number(input_string);
  let value = '';
  
  // 验证是否为1-9的整数
  if (!isNaN(num) && Number.isInteger(num) && num >= 1 && num <= 9) {
    value = input_string;
  }

  if (ev.target === null)
    return;
  const el = ev.target as HTMLInputElement;
  el.value = value;
}

方案2：允许值集合匹配 #

提前创建包含所有合法输入字符的集合，直接判断输入是否在集合内：

// 全局定义允许的输入字符集合
const allowedInputChars = new Set(['1', '2', '3', '4', '5', '6', '7', '8', '9']);

function validate_input(ev: InputEvent) {
  const input_string: string = ev.data ?? '';
  const value = allowedInputChars.has(input_string) ? input_string : '';

  if (ev.target === null)
    return;
  const el = ev.target as HTMLInputElement;
  el.value = value;
}

为什么instanceof和is关键字直接用无效？ #

GridCellValue是TypeScript的字面量联合类型，这类类型仅存在于编译阶段，运行时会被完全擦除，所以无法通过instanceof或原生类型判断直接验证。

如果想用类型守卫（is关键字），需要自己实现类型断言函数：

// 自定义类型守卫函数
function isGridCellValue(val: unknown): val is GridCellValue {
  return typeof val === 'number' && Number.isInteger(val) && val >= 1 && val <= 9;
}

// 使用类型守卫的验证函数
function validate_input(ev: InputEvent) {
  const input_string: string = ev.data ?? '';
  const num = Number(input_string);
  let value = '';

  if (isGridCellValue(num)) {
    value = input_string;
  }

  if (ev.target === null)
    return;
  const el = ev.target as HTMLInputElement;
  el.value = value;
}

内容的提问来源于stack exchange，提问作者Abderrahim Benmelouka