Как перезаписать поля HTMLElement полями из входного объекта в Typescript?

Question

[ColdSpirit]

Добрый день! Цель - создать функцию, которая принимает тег, опции для перезаписи полей, и выдает готовый к пользованию объект. Но тайпскрипт кидает палки в колеса, не пойму почему. С тайпскриптом мало знаком, нагуглил тип, который вытаскивает разрешенные к записи поля у объекта, вроде как он должен работать, но все равно ошибка странная выдается. Как исправить ошибку?

type IfEquals<X, Y, A=X, B=never> =
  (<T>() => T extends X ? 1 : 2) extends
  (<T>() => T extends Y ? 1 : 2) ? A : B;

type WritableKeys<T> = {
  [P in keyof T]-?: IfEquals<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, P>
}[keyof T];

type ReadonlyKeys<T> = {
  [P in keyof T]-?: IfEquals<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, never, P>
}[keyof T];

type WritableFields = Pick<HTMLElement, WritableKeys<HTMLElement>>

export function createElement(tag: string, options?: WritableFields): HTMLElement {
    let element = document.createElement(tag)

    if (options) {
        // assign options
        let option: keyof WritableFields
        for (option in options) {
            element[option] = options[option] // Type 'undefined' is not assignable to type 'never'
        }
    }

    return element
}

Тот же пример в песочнице: ссылка

P.S. Про Object.assign знаю, интересует, как решить именно эту задачу.

Comments

[Дмитрий Беляев]

зачем?

Про Object.assign знаю

и чем он не угодил? Уж точно лучше тормознутого for-in, который у Вас кстати без проверки на собственные свойства...

С readonly полями кстати Ваш IfEquals работать не будет, именно по этому у Вас never
https://www.typescriptlang.org/play?#code/C4TwDgpg...

[ColdSpirit]

Дмитрий Беляев,

зачем?

Что зачем?

и чем он не угодил?

Пока угодил, но если понадобится использовать for-in в этой или подобной ситуациях, то я хочу знать, как избежать подобных ошибок.

Уж точно лучше тормознутого for-in, который у Вас кстати без проверки на собственные свойства...

Скорость не принципиальна, и поля объекта человек задает, так что всё ок.

С readonly полями кстати Ваш IfEquals работать не будет

Не понимаю, причем здесь IfEquals, если в целом выражение должно работать: ссылка

Answer 1

[Aetae]

Яб сделал так:

type WritableFields<T> = Partial<Pick<T, WritableKeys<T>>>;
export function createElement<K extends keyof HTMLElementTagNameMap>(tag: K, options?: WritableFields<HTMLElementTagNameMap[K]>): HTMLElementTagNameMap[K] {
  let element = document.createElement(tag)

  if (options) {
    // assign options
    Object.assign(element, options);
  }

  return element
}

Если нужно именно с перебором, то можно так:

type WritableFields<T> = Partial<Pick<T, WritableKeys<T>>>;
export function createElement<K extends keyof HTMLElementTagNameMap>(tag: K, options?: WritableFields<HTMLElementTagNameMap[K]>): HTMLElementTagNameMap[K] {
  let element = document.createElement(tag)

  if (options) {
    // assign options
    let option: keyof typeof options;
    for (option in options) {
      element[option] = options[option]!; // ! - потому что теоретически ты можешь передать undefined явно, но морочиться с этим не стоит
    }
  }

  return element
}

P.S. Вообще все сложности с перебором переданного объекта в typescript происходят из того, что типизация в нём структураная: например имея интерфейс параметра, например,

interface Foo {
  foo: number;
}

тебе ничего не мешает передать ему

{
  foo: 1,
  bar: 2
}

, т.к. данный объект расширяет интерфейс Foo и, соответственно, удовлетворяет ему. Получается, что внутри функции typescript никак не может быть уверен, что ключи указанные в интерфейсе - это ВСЕ ключи, а значит не может быть уверен, что при переборе и присвоении не будет присвоено что-то лишнее. (Это не говоря уже о прототипах, геттерах и прочем)
Потому и требуется куча плясок, увы.

Comments

[ColdSpirit]

Спасибо! Ваш пример отлично работает, но он рассчитан на создание элементов из библиотеки, а если понадобится создать элемент с тегом "customelement", то тот не сработает.
Но дело не в этом. Я не пойму, почему без генерика не хочет работать, принцип ведь тот же должен быть. Если поставить восклицательный знак, как у вас - будет ругаться "Type 'string' is not assignable to type 'never'."

[ColdSpirit]

Без генерика - имею в виду, конкретно с типом HTMLElement.

[ColdSpirit]

Решил попробовать на кастомном классе, так пока в нем одно поле, которое можно перезаписать - ошибок нет, а когда больше - уже появляются. Пример: ссылка

Причем, если добавить метод в класс, ошибка совсем другая будет. Пример: ссылка

Кажется, что тайпскрипт хочет, чтобы я скормил объекту element все поля разом, и не понимает, что в цикле полю присваивается значение того же типа.

[Aetae]

ColdSpirit, это "немного" контринтуитивно, но суть проблемы (думаю) как раз в том, о чём я говорил в конце. В интерфейсе Opt нет word, но он там может быть и при этом может быть совершенно произвольного типа, что приведёт к ошибкам в рантайме. По этому ts и требует конкретики.

По поводу кастомного элемента: можно просто расширить базовую мапу, и всё будет работать:

class MySuperElement extends HTMLElement {
    hello = 42
}

declare global {
    interface HTMLElementTagNameMap {
        'my-super-element': MySuperElement
    }
}

По поводу дженериков: в них же вся красота ts, с тэгом-дженериком работаеют такие штуки:

createElement('img', {alt: 'alt text'}) // ok
createElement('div', {alt: 'alt text'}) // err

[ColdSpirit]

Ваш вариант бесспорно лучший. Думаю, моя проблема в том, что я не смог понять сразу, что это уже не яваскрипт, и старые фишки уже не прокатывают =) Тут нужно писать обычный типизированный код, хоть и с чуть большей свободой, чем в других языках.
Спасибо, вы мне очень помогли!

[Aetae]

ColdSpirit, as any идёт на помощь, если нельзя но очень хочется. Если ты уверен в том, что ты делаешь и уверен что TS пристаёт к тебе почём зря - всегда можно так сделать.) Главное десять раз подумать - не намекает ли тебе TS на какую-то неявную ошибку.