Typescript 中如何通过动态字符串访问 Nuxt class 类组件的属性

报错原因 #

该错误是因为 TypeScript 无法确认模板字符串生成的${type}Products属于当前类的合法属性名，默认没有为动态字符串提供索引类型推导，因此抛出隐式any的类型错误。

解决方案 #

你可以根据场景选择以下任意一种方案解决：

方案1：直接对动态属性名做类型断言（最便捷） #

直接将模板字符串断言为当前类的合法属性索引，修改报错行即可：

if (!(this[`${type}Products` as keyof this]).length) {

keyof this会自动匹配当前类的所有属性名，不需要手动枚举属性，改动最小且不会过度放宽类型校验。

方案2：提前定义合法属性的联合类型（最严谨） #

先枚举所有合法的产品属性名，再将动态生成的key断言为该联合类型：

// 定义合法属性名的联合类型
type ProductKey = 'paperProducts' | 'digitalProducts'

export default class extends Vue {
  // 原有代码保持不变
  getProductStyle(productType: string) { 
    const type = productType === 'paper' ? 'digital' : 'paper';
    const productKey = `${type}Products` as ProductKey; // 断言为合法属性名
 
    if (!this[productKey].length) {
      return 'col-xs-6 col-ms-4 col-sm-3';
    }
    return 'col-xs-6 ';
  }
}

该方案适用于属性名固定、不会频繁新增的场景，类型安全性最高。

方案3：为类添加索引签名（不推荐） #

如果你的项目中有大量类似的动态属性访问需求，可以给类添加通用字符串索引签名，一次修改全局生效：

export default class extends Vue {
  // 添加索引签名，允许用任意字符串访问类属性
  [key: string]: any;

  // 原有代码保持不变
}

注意该方案会放宽类属性的类型校验，TS无法再对非法属性访问做提前提示，非必要不建议使用。

额外优化建议 #

你可以将stateProducts的any[]类型替换为自定义的Product接口类型，进一步提升类型安全性：

interface Product {
  productType: 0 | 1;
  // 补充其他产品字段的类型定义
}

// 替换原stateProducts定义
stateProducts: Product[] = [];

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