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

Posted 2023-02-22

【中文标题】打字稿如何在对象中键入自定义键

【英文标题】：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 断言有效吗？

【参考方案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 参数

我已经更新了问题，设置更多信息