TypeScript计算属性绕过类型检查问题及解决方案咨询

问题场景 #

在使用TypeScript时，通过计算属性创建对象时，即便赋值的类型不符合目标类型约束，TypeScript也不会给出警告。比如以下代码，函数getUDFeatures本应返回合法的UDFeatures对象，但给计算属性赋值"XYZ"时未触发类型错误：

type UDFeatures = {
  Person?: "FIRST"
  Case?: "NOM"
}

const getUDFeatures = (featName: keyof UDFeatures): UDFeatures => {
  // 赋值"XYZ"不符合UDFeatures的类型约束，但TypeScript未报错
  let features: UDFeatures = {[featName]: "XYZ" }
  return features
}

// 输出{"Person": "XYZ"}，并非合法的UDFeatures值
console.log(getUDFeatures("Person"))

TypeScript默认不检查这类场景的原因是：当计算属性的键是联合类型时，编译器无法在对象字面量创建阶段将具体的键与对应的值类型一一绑定，只能推断值的类型为所有可能值的联合，因此无法识别非法赋值。

解决方案 #

1. 使用泛型绑定键与对应值的类型 #

通过泛型约束，让函数参数featName对应具体的键，同时强制值的类型必须匹配该键在UDFeatures中的定义，这样TypeScript就能在编译期严格检查值的合法性：

type UDFeatures = {
  Person?: "FIRST"
  Case?: "NOM"
}

// 泛型K约束为UDFeatures的键，value必须是该键对应的类型
const getUDFeatures = <K extends keyof UDFeatures>(featName: K, value: UDFeatures[K]): UDFeatures => {
  const features: UDFeatures = { [featName]: value } as UDFeatures;
  return features;
}

// 合法调用：值匹配Person的类型
getUDFeatures("Person", "FIRST");

// 非法调用：TypeScript直接报错
getUDFeatures("Person", "XYZ"); // 类型“"XYZ"”的参数不能赋给类型“"FIRST" | undefined”的参数。

2. 编写辅助函数约束键值对 #

如果不想显式传递值参数（比如值是固定的合法值），可以封装一个辅助函数来确保键值对的类型合法性：

type UDFeatures = {
  Person?: "FIRST"
  Case?: "NOM"
}

// 辅助函数：确保键和对应值的类型匹配
function createValidFeature<K extends keyof UDFeatures>(key: K, value: UDFeatures[K]): UDFeatures {
  return { [key]: value } as UDFeatures;
}

const getUDFeatures = (featName: keyof UDFeatures): UDFeatures => {
  // 若传入非法值，此处会触发类型错误
  return createValidFeature(featName, "FIRST");
}

3. 启用严格TypeScript配置与ESLint规则 #

• 确保tsconfig.json中开启严格模式：

  {
    "compilerOptions": {
      "strict": true,
      "exactOptionalPropertyTypes": true
    }
  }
  

  其中exactOptionalPropertyTypes会确保可选属性不会被赋值为undefined以外的非法值，增强类型检查的严格性。

• 配合ESLint的@typescript-eslint/restrict-plus-operands和@typescript-eslint/no-explicit-any规则，进一步避免类型不兼容的赋值操作。

内容的提问来源于stack exchange，提问作者Nate Glenn