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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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