reactjs - typescript 如何在对象中键入自定义键

Question

我有一个这样的功能:

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
  };
};

我应该使用从设置对象中获得的必需键来设置一个项目，但出现错误:

A computed property name in a type literal must refer to an expressionwhose type is a literal type or a 'unique symbol' type.

我该怎么办？
更新:有没有办法不使用接口(interface)？
更新:项目可以是这样的: { id: 'someId' }或 { key: 'someKey' } 更新: typescript 的版本是 4.0.3

Answer 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 }是映射类型。