Блог

У меня есть такие типы (детская площадка):

 type A = {
    onChange: (e: Event) => void
}

type Props = { value: string }

type B = A amp; {
    onChange: (props: Props) => void
}
 

Хотя я могу определить их, я не могу их использовать:

 
const b: B = {
    onChange: ((props: Props) => console.log(props.value)) // error
}
 

Я получаю эту ошибку:

 Type '(props: Props) => void' is not assignable to type '((e: Event) => void) amp; ((props: Props) => void)'.
  Type '(props: Props) => void' is not assignable to type '(e: Event) => void'.
    Types of parameters 'props' and 'e' are incompatible.
      Property 'value' is missing in type 'Event' but required in type 'Props'.(2322)
 

Можно ли использовать типы, как описано, и избавиться от этой ошибки?

Одна идея, которая пришла мне в голову, — это использовать:

 type B = Omit<A, 'onChange'> amp; {
    onChange: (props: Props) => void
}
 

Но это кажется немного странным, потому что это не безопасный рефакторинг.

Используйте Override тип утилиты-

 type Override<T1, T2> = Omit<T1, keyof T2> amp; T2;
 

Override создает новый тип (скажем T3 ), опуская все ключи, из T1 которых также входят T2 (то есть общие ключи). Затем он создает тип пересечения из T3 и T2

Все решение было бы-

 type Override<T1, T2> = Omit<T1, keyof T2> amp; T2;

type A = {
    propA: string
    onChange: (e: Event) => void
}

type Props = { value: string }

type B = Override<A, {
    propB: number
    onChange: (props: Props) => void
}>

const b: B = {
    onChange: ((props: Props) => console.log(props)),
    propA: 'propA',
    propB: 3
}
 

[Игровая площадка]

Ссылка — https://dev.to/vborodulin/ts-how-to-override-properties-with-type-intersection-554l