Enforcing that an array within an object literal can only contain keys of the outer object

Question

I have the following Interface definitions.

interface IComponents {
  root: IComponent,
  [key: string]: IComponent,
}

interface IComponent {
  type: string,
  children?: Array<keyof IComponents>;
}

I want that the "children" properties accept only keys of defined Components. in the case of the "root.children"-property it should only accept root, button1 and button2:

const list: IComponents = {
  root: {
    type: 'panel',
    children: ['button1', 'button2', 'button3']
  },
  button1: {
    type: 'button'
  },
  button2: {
    type: 'button'
  },
}

But it accepts also arbitrary strings, like in the example "button3".

basarat · Accepted Answer · 2018-10-16 23:21:27Z

0

But it accepts also arbitrary strings, like in the example "button3".

Reason:

You have

interface IComponents {
  root: IComponent,
  [key: string]: IComponent,
}

so keyof IComponents resolves to 'root' | string or effectively string. You almost always never want to have well defined names and string indexers in the same group.

Solution

I would reconsider a non-cyclic design. The following:

const list: IComponents = {
  root: {
    type: 'panel',
    children: ['button1', 'button2', 'button3']
  },
  button1: {
    type: 'button'
  },
  button2: {
    type: 'button'
  },
}

The type of list depends on the assigned object. Ideally you would figure out some way that type enforces what can be assigned.

edited Oct 16, 2018 at 23:21

answered Oct 16, 2018 at 23:14

basarat

278k61 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt McCutchen · Accepted Answer · 2018-10-17 02:19:08Z

0

There's no single IComponents type you can define that includes all (and only) component lists that are internally consistent in the sense that the children lists only refer to defined components; this would require a form of existential types. However, you can define a generic type IComponents<K> that represents a valid component list with a specific key list K, and this will allow you to define functions that are generic in a type parameter K and accept an IComponents<K> and thus can be called on any valid component list. For example:

type IComponents<K extends string> = {
  [P in K]: IComponent<K>;
} & {
  // Needed for contextual typing to work.
  // https://github.com/Microsoft/TypeScript/pull/27586 might remove the need for this.
  [n: string]: IComponent<K>
};

interface IComponent<K extends string> {
  type: string,
  children?: Array<K>;
}

function processComponents<K extends string>(arg: IComponents<K>) {
  // ...
}

// OK
processComponents({
  root: {
    type: 'panel',
    children: ['button1', 'button2']
  },
  button1: {
    type: 'button'
  },
  button2: {
    type: 'button'
  },
});

// Error (unfortunately it doesn't pinpoint the mistake)
processComponents({
  root: {
    type: 'panel',
    children: ['button1', 'button2', 'button3']
  },
  button1: {
    type: 'button'
  },
  button2: {
    type: 'button'
  },
});

answered Oct 17, 2018 at 2:19

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

2 Comments

Matthias Thaler Over a year ago

Thanks for the answers. But I think this should be available natively in TS.

Matt McCutchen Over a year ago

Don't we all wish TypeScript had everything built-in... You can always upvote the suggestion for existential types. In the meantime, if you run into a specific problem with this solution, let me know and I will see if I can find a workaround.

Collectives™ on Stack Overflow

Enforcing that an array within an object literal can only contain keys of the outer object

2 Answers 2

Reason:

Solution

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Reason:

Solution

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related