Typescript - 类型“字符串”不能用于索引类型

Question

我将 Vue.js 与 TypeScript 一起使用，并且在使用动态 object 密钥时遇到了一些错误。 这是我的 function：

  methods: {
    interface ResetStateItems {
      selected: WebspaceBackupArtifactExtended[];
      selectedDirectory: string;
      artifacts: WebspaceBackupArtifactExtended[];
      isLoadingDirectory: boolean;
      restoreComplete: boolean;
      isProcessingBackupRestore: boolean;
    }

    resetPage() {
      const resetStateItems: ResetStateItems = {
        selected: [],
        selectedDirectory: '/',
        artifacts: [],
        isLoadingDirectory: false,
        restoreComplete: false,
        isProcessingBackupRestore: false,
      };

      Object.keys(resetStateItems).forEach((stateItem: string) => {
        this[stateItem as keyof resetStateItems] = resetStateItems[stateItem];
      });
      this.getWebspaceBackupByWebspaceIdAndId();
    },

以下是我得到的错误：

ERROR in /app/src/views/BackupAndRestore/BackupAndRestoreWebspaceBackup.vue(484,9):
my-project    | 484:9 Type 'any' is not assignable to type 'never'.
my-project    |     482 |
my-project    |     483 |       Object.keys(resetStateItems).forEach((stateItem: string) => {
my-project    |   > 484 |         this[stateItem as keyof ResetStateItems] = resetStateItems[stateItem];
my-project    |         |         ^
my-project    |     485 |       });
my-project    |     486 |       this.getWebspaceBackupByWebspaceIdAndId();
my-project    |     487 |     },

ERROR in /app/src/views/BackupAndRestore/BackupAndRestoreWebspaceBackup.vue(484,52):
> my-project    | 484:52 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ResetStateItems'.
> my-project    |   No index signature with a parameter of type 'string' was found on type 'ResetStateItems'.
> my-project    |     482 |
> my-project    |     483 |       Object.keys(resetStateItems).forEach((stateItem: string) => {
> my-project    |   > 484 |         this[stateItem as keyof ResetStateItems] = resetStateItems[stateItem];
> my-project    |         |                                                    ^
> my-project    |     485 |       });
> my-project    |     486 |       this.getWebspaceBackupByWebspaceIdAndId();
> my-project    |     487 |     },

我不完全确定问题是什么，因为我已经定义了接口ResetStateItems并认为我可以使用keyof使其工作？

Answer 1

不要在keyof语句中使用变量名，而是使用接口名：

this[stateItem as keyof ResetStateItems] = resetStateItems[stateItem];