Почему в типе ChangeEvent не находит свойство checked?

Question

[Boris007]

Почему, когда мы указываем такой тип он выдает ошибку

ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>

А при ChangeEvent<HTMLInputElement> работает

function handleChange(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
    const { name } = event.target
    const value = event.target.checked
    setData(data => ({...data, [name]: value}))
  }

Property 'checked' does not exist on type 'EventTarget & (HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement)'.
Property 'checked' does not exist on type 'EventTarget & HTMLSelectElement'

По логике мы же говорим, что или, или у нас тип.
В какой момент и по какой логике TS начинает считать это ошибкой?

Почему это условие убирает ошибку?

if(event.target instanceof HTMLInputElement) value = event.target.checked

Ведь это всего лишь условие, а не заданный тип в аргументе нашему event

Answer 1

[Alexandroppolus]

Всё довольно просто.

1) Если у тебя есть типы A, B, C, D, то тип A & (B | C | D) сразу превращается в (A & B) | (A & C) | (A & D) = X | Y | Z

2) для объекта с типом X | Y | Z ты можешь обратиться к свойству checked, только если оно есть во всех троих типах. Надо объяснять почему?

3) instanceof в данном конкретном случае сужает тип X | Y | Z до X, в котором это свойство есть, и отбрасывая типы, где его нет.

Comments

[Boris007]

Спасибо!
В каком разделе можно почитать про данный пример типизации через условие?

[Alexandroppolus]

Boris007, https://www.typescriptlang.org/docs/handbook/2/nar...

[Boris007]

Alexandroppolus, спасибо!
Подскажи пожалуйста, как реализовать дженерик на подобии этого?

function handleChange(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>)

Я попытался так, но не могу понять, как сделать это через
fn(arg: ArgsFn<Arg | Arg2 | Arg3>)
А не
fn(arg: Arg | Arg2 | Arg3)

interface Arg {
  target: string;
  value: string;
}

interface Arg2 {
  target: string;
  value: string;
  state: boolean;
}

interface Arg3 {
  target: string;
  checked: boolean;
  state: boolean;
}

type ArgsFn<T> = {
  (arg: T): T
}

const arg = {
  target: 'hello world'
}

function fn(arg: ArgsFn<Arg | Arg2 | Arg3>) {
  const { target } = arg
  console.log('target', target)
}

[Alexandroppolus]

Boris007,

type ArgsFn<T> = {
  target: T;
}

[Boris007]

Alexandroppolus, оно именно так через дженерик тут и описано?

ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>

Просто у каждого HTML элемента свои свойства, как их event объединяет?

Просто здесь мы явно указываем свойство, а там же checked вряд ли указан, а если бы был указан, то наверное же ТС бы не ругался?

type ArgsFn<T> = {
  target: T;
}

Объясни, пожалуйста

[Alexandroppolus]

Boris007,

оно именно так через дженерик тут и описано?

почти:

interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
        target: EventTarget & T;
}

ты можешь, находясь в VSCode или WebStorm, зажав клавишу Ctrl или Cmd, кликнуть мышью в тип, и откроется файл с типом.

Просто у каждого HTML элемента свои свойства, как их event объединяет?

не очень понял вопрос.
в твоем случае объединение трех типов будет в T.
то есть если пишешь ArgsFn, то в target может оказаться любой из этих трех. После instanceof становится понятно, какой именно (HTML***Element - это не только типы, но ещё и классы, они доступны в JS и значит к ним можно применить instanceof, который не применишь к обычному "бесплотному" типу TS)

[Boris007]

Alexandroppolus, спасибо!!