Почему typescript не проверяет типы при использовании spread-оператора?

Question

[Tokisoda]

Никак не могу разобраться, почему не работает проверка типов в следующем примере:

interface Props {
    readonly value: string;
}

const Component = ({ value }: Props) => {
    return <div>{value}</div>;
};

const otherProps = {
  id: 'test',
}

const a = <Component {...otherProps} value='test' />

Ожидаю, что ts будет ругаться, так как свойство id не существует в типе Props.

Answer 1

[Alexandroppolus]

Потому что так миръ устроен. ts ругается на лишние свойства, только если ты передаешь в типизированную переменную объектный литерал с этими самыми лишними свойствами (тема раскрыта здесь). Главная задача ts при проверке объектов - ругаться, если чего-то не хватает или что-то не соответствует по типу.

Comments

[WbICHA]

Главная задача ts при проверке объектов - ругаться, если чего-то не хватает или что-то не соответствует по типу.

Я бы сказал так: ругаться, если программа может сломаться.

[Alexandroppolus]

WbICHA, тут не поспоришь )

Answer 2

[Aetae]

Потому что необходимое свойство value уже существует, а остальной мусор пофиг, т.к. в ts структурная типизация, т.е. под сигнатуру

interface Props {
    readonly value: string;
}

подходит любой объект у которого есть value: string:

const foo = {
    value: 'string',
    id: 'string'
}
const bar: Props = foo; // ok

Как указал Alexandroppolus - проверка есть только при явном задании литерала:

const bar: Props = {
    value: 'string',
    id: 'string' // err
};

Но это специальный случай - предполагается, что задавая литерал вы хотите задать именно объект указанного типа и никакой другого. Однако к парадигме структурной типизации используемой в ts это отношения не имеет, чисто quality of life фича.

P.S. И да, это значит что в потенциале ты можешь сделать так:

interface Props {
    readonly value: string;
}
interface Props2 {
    readonly value: string;
    readonly id?: number;
}

const foo = {
    value: 'string',
    id: 'string'
}

const bar: Props = foo; 
const buz: Props2 = bar; 

buz.id?.toFixed(2) // ts ok, runtime error :(