打字稿如何在对象中键入自定义键答案

【问题标题】：Typescript how to type custom key in an object打字稿如何在对象中键入自定义键
【发布时间】：2021-03-04 08:42:57
【问题描述】：

我有这样的功能：

interface IUseTest {
  settings: {
    id: string
  }
};

const useTest = (properties: IUseTest) => {
  const { settings } = properties;
  
  const test = (
    item: {
     [settings.id]: string | number, // Error here
     [key: string]: any
    }
  ): object => {
    // function logic, doesn't matter
  };
  
  return {
    test
  };
};

我应该使用从设置对象中获得的所需键设置一个项目，但我收到了错误：

类型文字中的计算属性名称必须引用表达式其类型是文字类型或“唯一符号”类型。

我必须做什么？

更新：有没有办法不使用界面？

更新：项目可以是这样的：{ id: 'someId' } 或 { key: 'someKey' }

更新： typescript 的版本是4.0.3

【问题讨论】：

您好，您能否展示一下您将如何使用该函数，即：参数item 的外观应该如何？
@yfansong，你好，该项目应该是：{ id: 'some-id' ...other } 或{ key: 'some-key' ...other }，这意味着对象可以有键id 或key (id === @987654331 @)
所以item 参数实际上看起来像这样：{ string: any, ...rest } 第一个属性名称是properties.settings.id?
@yfansong，是的，没错
const 断言有效吗？

标签： reactjs typescript react-typescript

【解决方案1】：

您可以使用泛型和Mapped Types，如下所示：

interface IUseTest<T extends string> {
  settings: {
    id: T
  }
};

const useTest = <T extends string>(properties: IUseTest<T>) => {
  const { settings } = properties;
  
  const test = (
    item: { [settingsId in T]: string | number } & {
     [key: string]: any
    }
  ): object => {
    // function logic, doesn't matter
  };
  
  return {
    test
  };
};

这里，<T> 是泛型，{ [settingsId in T]: string | number } 是映射类型。

【讨论】：

【解决方案2】：

这是你想要的吗？

const settings = {
  id: 'id',
};
type Settings = typeof settings;
interface Item extends Settings {
  [key: string]: any;
}
const test: (item: Item) => object = (item) => {
  return {};
  // function logic, doesn't matter
};

【讨论】：

有没有办法不使用接口？
我不太确定。我认为这是必要的。

【解决方案3】：

你可以试试const assertion。

const settings = {
  id: 'id'
} as const;

这应该可以解决您的错误。如果您运行的 typescript 版本低于 3.4，则将您的 id 属性类型转换为 settings。

const settings = {
  id: 'id' as 'id'
};

【讨论】：

如果我有这个怎么办：interface ITest { settings: { id: string } }？我从中得到id 参数
我已经更新了问题，设置更多信息