1

Я хочу что бы в зависимости от tagName подбирался правильно тип элемента. Сейчас все работает как нужно пока не начинаю добавлять children.

export interface ElementCreatorParameters<T extends keyof HTMLElementTagNameMap > {
  tagName: T
  children?: Array<ElementCreatorParameters<T>>
  onCreate?(element: HTMLElementTagNameMap[T]): void
}

export class ElementCreator<T extends keyof HTMLElementTagNameMap > {
  constructor(parameters: ElementCreatorParameters<T>) {}
}

new ElementCreator({
  tagName: 'form',
  onCreate: (element) => {
    // Должно быть HTMLFormElement
    // Сейчас HTMLFormElement | HTMLInputElement
    element
  },
  children: [
    {
      tagName: 'input',
      onCreate: (element) => {
        // Должно быть HTMLInputElement
        // Сейчас HTMLFormElement | HTMLInputElement
        element
      },
    },
  ],
})

1 ответ 1

1

Ваша задача показалась мне очень интересной. Но признаться честно, я не смог сам её решить, потому задал похожий вопрос на 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

1
  • 1
    Спасибо что заинтересовались ) 4 мая в 23:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.