解决 TypeScript 报错：A computed property name in an interface must refer to an expression whose type ...

原创已于 2022-10-16 10:10:55 修改 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端

于 2022-07-21 19:15:41 首次发布

TypeScript 入门法则专栏收录该内容

11 篇文章

订阅专栏

博客主要讲述在TypeScript中定义接口使用计算属性时会报错，提示需用字面量类型或唯一的symbol类型。原因是防止中途篡改对象值，避免找不到属性。并给出两种解决方案，即定义唯一的symbol类型和定义为字面量类型，还可借助类型推断。

当我定义了一个变量：

export const FieldsMap = {
  stack: "Stack",
  name: "Name",
};

并且尝试定义一个 interface 接口，在其中用计算属性：

export interface SelectAStackType {
  [FieldsMap.stack]: "",
  [FieldsMap.name]: ""
}

很遗憾，TypeScript 给我报了一个错误：A computed property name in an interface must refer to an expression whose type is a literal type or a 'unique symbol' type.ts(1169)

不过同样有提示说使用计算属性必须要用字面量类型或者唯一的 symbol 类型。

其实这个很好理解，这样定义主要是防止我们在中途去篡改对象里面的值：

const PROPS = {
  VALUE: 'value'
}
// 中途篡改属性值
PROPS.VALUE = 'aha!';

export default class Main extends Vue {
  readonly [PROPS.VALUE]: string
}

那么引用一个随时都可能的值作为属性，那么就有可能出现找不到属性的情况，因为通过定义 字面量类型 或者 唯一的 symbol 类型 去确保这个值不会被改变。

因为，我们两种解决方案：

定义唯一的 symbol 类型：

const level: unique symbol = Symbol();

interface MyInterface {
    [level]?: string;
}

定义为字面量类型。要把一个对象变量字面量类型，我们需要类型推断 as 的帮助

export const FieldsMap = {
  stack: "Stack" as "Stack",
  name: "Name" as "Name",
};

也可以使用 const 推断，一步到位：

export const FieldsMap = {
  stack: "Stack",
  name: "Name",
} as const;

Reference

[1] A computed property name in a class property declaration must refer to an expression whose type is a literal type or a ‘unique symbol’ type. #4605
[2] Literal Types