Ваша задача показалась мне очень интересной. Но признаться честно, я не смог сам её решить, потому задал похожий вопрос на SO. Из того что сам нагуглил я понял что interface
-ами его не решить, нужны type
-ы, потому в самом вопросе сразу написал с типами. Автор ответа тоже подтвердил, что с помощью interface
-ов это не решить
Мой ответ - перевод ответа на мой вопрос. Потому не забывайте ставить плюсики оригинальному ответу тоже :)
Вы можете представить ElementCreatorParameters
как объеденённый тип (union type), где каждый элемент в объединении соответсвует одному из значений tagName
из keyof HTMLElementTagNameMap
. Конечно, элементов в объединении может быть больше 100, а потому писать это всё вручную очень нудно, но т.к. их количесвто конечно, то объединение - по крайней мере возможное решение. К счастью, нам не нужно все элементы объединения расписывать вручную, вместо этого мы можем заставить компилятор сгенерировать их для нас. Например так:
type ElementCreatorParameters = { [K in keyof HTMLElementTagNameMap]: {
tagName: K
children?: Array<ElementCreatorParameters>
onCreate?(element: HTMLElementTagNameMap[K]): void
}}[keyof HTMLElementTagNameMap]
Основная идея заключается в том, чтобы создать сопоставленный тип (mapped type), а затем проиндексировать его со всеми его ключами, чтобы получить объединение свойств сопоставленного типа. Это можно назвать дистрибутивным типом объекта, как указано в microsoft/TypeScript#47109. Если у вас есть набор ключей type KK = K1 | K2 | K3 | ⋯
, тогда {[K in KK]: F<K>}[KK]
преобразуется в F<K1> | F<K2> | F<K3> | ⋯
В нашем случае, KK
- это keyof HTMLElementTagNameMap
, а F<K>
- это
{
tagName: K
children?: Array<ElementCreatorParameters>
onCreate?(element: HTMLElementTagNameMap[K]): void
}
Таким образом ElementCreatorParameters
- это большое объединение, которое вы можете увидеть если наведёте мышку для получения быстрой информации в вашем IntelliSense-enabled IDE
:
/* type ElementCreatorParameters = {
tagName: "object";
children?: ElementCreatorParameters[] | undefined;
onCreate?(element: HTMLObjectElement): void;
} | {
tagName: "a";
children?: ElementCreatorParameters[] | undefined;
onCreate?(element: HTMLAnchorElement): void;
} | ... 108 more ... | {
...;
} */
Давайте протестируем это:
const e: ElementCreatorParameters = {
tagName: 'form',
onCreate: (element) => {
element // (parameter) element: HTMLFormElement
},
children: [
{
tagName: 'input',
onCreate: (element) => {
element // (parameter) element: HTMLInputElement
},
children: [
{
tagName: 'a',
onCreate: (element) => {
element // (parameter) element: HTMLAnchorElement
},
},
]
},
],
}
Выглядит превосходно! Все параметры onCreate
выводятся контекстуально из соответствующего элемента объединения ElementCreatorParameters
по желанию
Ссылка на Playground