typescript - 打字稿：强制执行现有的对象键

Question

我想dropdownAttributes仅限于DropDownItem界面上的属性。

interface DropDownItem {
    [key: string]: any;
}

interface Props {
   dropdownList: DropDownItem[];
   dropdownAttributes: string[];
}

如果DropDownItem现在有动态属性，我想我可以这样解决这个keyof问题：

interface Props {
   dropdownList: DropDownItem[];
   dropdownAttributes: (keyof DropDownItem)[];
}

但这在我的情况下现在不起作用。怎么解决？

Answer 1

keyof如果键在接口中定义为，则无法提供 a [key: string]: value，因为这意味着几乎可以有任何键。

因此，此keyof DropDownItem代码也返回string | number，因为这些是key可以具有的值。

您可以通过为对象接口定义特定键来避免这种情况：

interface DropdownItem {
   id: number,
   text: string,
   isDisplayed: boolean,
}

interface Props {
   dropdownList: DropdownItem[],
   dropdownAttributes: (keyof DropdownItem)[] // ("id" | "text" | "isDisplayed")[]
}

Answer 2

似乎您希望Props是通用的，以便它可以被不同的对象类型使用。这可以通过T在Props

interface Props<T> {
   dropdownList: T[];
   dropdownAttributes: (keyof T)[];
}

现在，如果我们事先知道某个对象的类型，我们可以为它创建一个接口，并创建一个使用该接口的类型Prop

interface MyDropDownItem {
  foo : number
}

type MyDropDownItemProps = Props<MyDropDownItem>;

我们现在只能使用MyDropDownItemin的实例dropdownList及其键 indropdownAttributes

const good: MyDropDownItemProps = {
  dropdownList: [{foo: 2}],
  dropdownAttributes : ['foo']
}

const bad: MyDropDownItemProps = {
  dropdownList: [{foo: 2, bar: 's' /* error here */}],
  dropdownAttributes : ['foo', 'bar' /* and here */ ]
}

这当然假设您事先知道下拉菜单的结构，因为这是打字稿可以帮助您的唯一事情。Typescript 不会帮助您实现运行时类型安全。

在 stackblitz 上查看

Answer 3

最后我做到了。

interface Props<T> {
   dropdownList: T[];
   dropdownAttributes: (keyof T)[];
}

declare class MyComponent<T> extends React.Component<Props<T>> {}

export default MyComponent;

用法：

interface DropdownItem {
   key1: string;
   key2: string;
}

<MyComponent
   <DropdownItem>
   dropdownAttributes={['key1', 'key2']}
   dropdownList={[{key1: 'hello', key2: 'world'}]}       
/>