TypeScript传入非法Props值无报错，如何限制column属性仅接受指定枚举值

问题原因 #

TypeScript默认对数字枚举做了兼容设计：数字枚举类型和number类型双向兼容，任意数字都可以赋值给数字枚举类型的属性，因此你传入10不会触发类型报错。

解决方案 #

方案1：替换为数字字面量联合类型（全版本兼容，无需改TS配置）

直接将column的类型改为明确的数字字面量联合，不在范围内的数字会直接触发报错：

const enum ColumnValues {
  one = 1,
  two = 2,
  three = 3,
}

interface Props {
  style?: StyleProp<ViewStyle>;
  title?: string;
  titleContainerStyle?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  textInputStyle?: StyleProp<TextStyle>;
  // 枚举值不多的话可以直接写 column?: 1 | 2 | 3，效果完全一致
  column?: ColumnValues.one | ColumnValues.two | ColumnValues.three extends infer T 
    ? T extends number ? T : never 
    : never;
}

改完后传入column={10}会直接触发类型错误。

方案2：开启严格枚举检查（适用于TS 5.0及以上版本）

如果要保留枚举的使用逻辑，不需要修改类型声明，只需在tsconfig.json的compilerOptions中开启配置项：

{
  "compilerOptions": {
    "strictEnumChecks": true
  }
}

开启后TS会禁止数字和数字枚举的隐式赋值，只有枚举成员或和枚举成员完全匹配的数字字面量可以赋值给枚举类型，此时传入column={10}会触发报错。

内容的提问来源于stack exchange，提问作者Athavan T