TypeScript用拼接字符串作为对象索引报any类型错误如何解决

报错原因 #

TypeScript 默认会将模板字符串${key}AB推导为通用string类型，而myInterface仅允许固定的字面量作为索引键，通用string类型不符合索引要求，因此触发类型报错。

解决方法 #

方法1：直接类型断言（最简便） #

直接将拼接后的字符串断言为myInterface的合法键类型即可，适合确定拼接结果一定是合法属性的场景：

const myFunc = (key: PredefinedKey) => {
  if (myObj[`${key}AB` as keyof myInterface]) {
    console.log("Hello world");
  }
};

方法2：预定义模板字面量类型（更易维护） #

可以先基于PredefinedKey定义拼接后的键类型，后续如果基础key调整，类型会自动同步，降低维护成本：

// 预定义拼接后的键类型，自动适配PredefinedKey的所有取值
type GeneratedKey = `${PredefinedKey}AB`;

const myFunc = (key: PredefinedKey) => {
  if (myObj[`${key}AB` as GeneratedKey]) {
    console.log("Hello world");
  }
};

方法3：增加运行时校验（最安全） #

如果不能100%保证拼接后的key一定存在于对象中，可以增加一层in判断，避免运行时访问不存在的属性：

const myFunc = (key: PredefinedKey) => {
  const generatedKey = `${key}AB`;
  if (generatedKey in myObj && myObj[generatedKey as keyof typeof myObj]) {
    console.log("Hello world");
  }
};

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