TypeScript 類型文字中的計算屬性名稱必須直接引用內置符號

Question

ERROR in...component.ts (..,..)：類型文字中的計算屬性名稱必須直接引用內置符號。 ...：找不到名稱“任何”。

我期待着一個 object，其中包含具有其他字符串的字符串，即：

{ abc: 'xyz' }

我做了什么：

foo: { [string]: string };

Answer 1

計算值上的識別名稱是必需的：

foo: { [bar: string]: string };

Answer 2

構建后我遇到了類似的問題。 我面臨的兩個問題是使用數字和/或枚舉值作為對象中的鍵。 只是為了幫助那些將來看到這一點的人。

枚舉作為鍵

export enum MyEnum {
  one = 'stringOne',
  two = 'stringTwo',
}

export const someMap = {
  [ MyEnum.one ]: 'valueOne',
  [ MyEnum.two ]: 'valueTwo',
};

這會將 someMap someMap為一種看起來像......

export declare const someMap: {
  [ MyEnum.one ]: string;
  [ MyEnum.two ]: string;
};

請注意，鍵仍然是枚舉值而不是字符串，打字稿/角度不喜歡那樣，因為它期待類似......

export declare const someMap: {
  [ x: string ]: string;
};

所以兩個可能的修復是......

1) 為someMap分配顯式類型

export interface ForceStringType {
  [product: string]: string;
}
export const someMap: ForceStringType = {
  [ MyEnum.one ]: 'valueOne',
  [ MyEnum.two ]: 'valueTwo',
};

2) 將string類型分配給someMap鍵

export const someMap: ForceStringType = {
  [ MyEnum.one as string ]: 'valueOne',
  [ MyEnum.two as string ]: 'valueTwo',
};

數字作為鍵

const CONSTANT_ONE = 123;
const CONSTANT_TWO = 321;

export const someMap = {
  [ CONSTANT_ONE ]: 'valueOne',
  [ CONSTANT_TWO ]: 'valueTwo',
};

這會將 someMap someMap為一種看起來像......

export declare const someMap: {
  [ CONSTANT_ONE ]: string;
  [ CONSTANT_TWO ]: string;
};

請注意，鍵仍然是常量/數字值而不是字符串，打字稿/角度再次期待類似...

export declare const someMap: {
  [ x: string ]: string;
};

所以一種可能的解決方法是......

為someMap每個鍵someMap數字作為字符串

export declare const someMap: {
  [ `${CONSTANT_ONE}` ]: string;
  [ `${CONSTANT_TWO}` ]: string;
};

注意：使用常量/數字作為鍵從someMap訪問值應該無關緊要，因為someMap無論如何都會將其強制轉換為字符串，但可能最適合整體一致性。

 const valueOne: string = someMap[ CONSTANT_ONE ]; // vs const valueOne: string = someMap[ `${CONSTANT_ONE}` ];

Answer 3

如果密鑰類型來自泛型，則當前接受的答案將不起作用。 為此，您需要使用in運算符：

type WithKey<K extends string | number | symbol> = {
    [k in K]: boolean
}

信用在這里。

Answer 4

我在 Vue 組件中遇到了這個問題，我的問題是我錯誤地綁定了 class 名稱：

Vue 文檔

<script lang="ts">
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  props: {
    className: String,
  },

  setup() {
    const isModified = computed<boolean>(() => true)

    return {
      isModified,
    }

<template>
  <!-- BAD -->
  <div 
    class="static-class" 
    :class="{ [className]: true, 'static-class--modified': isModified }]">
  </div>

  <!-- GOOD -->
  <div 
    class="static-class" 
    :class="[className, { 'static-class--modified': isModified }]">
  </div>
</template>