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

Question

I would like dropdownAttributes to limited to attributes on DropDownItem interface.

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

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

if DropDownItem did now have dynamic properties I think I could solve this with keyof like this:

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

But that does not work now in my case. How to solve?

Answer 1

You can't provide a keyof if the keys are defined in the interface as [key: string]: value , because that means, there can be virtually any key.

Hence also, this keyof DropDownItem code returns string | number string | number , because those are the values that the key can have.

You can avoid this by defining specific keys for the object interface:

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

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

Answer 2

It seems like you want Props to be generic so that it can be used by different object types. This can be achieved by defining a generic type T in Props

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

Now, if we know the types of a certain object in advance, we can create an interface for that, and create a type that uses that interface in Prop

interface MyDropDownItem {
  foo : number
}

type MyDropDownItemProps = Props<MyDropDownItem>;

We can now only use instances of MyDropDownItem in dropdownList and its keys in dropdownAttributes

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

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

This of course assumes you know the structure of your dropdowns in advance, because that's the only thing typescript can help you with. Typescript won't help you with runtime type safety.

Check it out on stackblitz

Answer 3

In the end I did this.

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

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

export default MyComponent;

Usage:

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

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