В чем разница между расширенным интерфейсом и типом пересечения в Typescript? Я не понимаю, чем отличается результирующий тип, особенно для простого случая расширения неперекрывающихся свойств.

В следующем примере ввода реквизита компонента класса реагирования, почему расширенный интерфейс не может правильно расширяться RouteComponentProps (который также является интерфейсом), но тип пересечения приводит к правильному вводу / свойствам?

 import React, {PureComponent} from 'react';
import {RouteComponentProps, withRouter} from 'react-router-dom';

// Interface fails to extend the properties
interface Props extends RouteComponentProps {}

// But if we used an intersection type, that works
// type Props = {} amp; RouteComponentProps

class MyComponent extends PureComponent<Props> {
    constructor(props: Props) {
        super(props);
    }

    render() {
        console.log('All props', this.props); // Prints all props including routing-related

        // Error here: Property 'history' does not exist on type 'Props'.  TS2339
        console.log('History - ', this.props.history);
        
        return <p>Hello World!</p>;
    }
}

export default withRouter(MyComponent);
  

IDE (VSCode), по-видимому, может получить правильный тип / свойства с помощью intellisense (используя оператор dot для отображения параметров автозаполнения). Однако компилятор Typescript выдает ошибку

 Property 'history' does not exist on type 'Props'.  TS2339
  

Я не понимаю, почему (поскольку я думал, что результирующий тип должен расширять те же свойства), но если Props определяется как тип пересечения с RouteComponentProps , то это работает.

 type Props = {} amp; RouteComponentProps;
  

Почему это так? Что происходит такого, что расширение интерфейса не удаляет свойства, как ожидалось?

В этом более простом игрушечном примере расширения интерфейса все работает как ожидалось, без ошибок компилятора TS.

 interface A {
    x: string;
}

interface B extends A {
    y: string;
}

function doSomething(something: B) {
    console.log(something.x);
}

doSomething({x: 'Whatever', y: 'Whatever'});
  

Итак, я запутался в том, как расширение интерфейса отличается от пересечения типов.

Чтобы повторить главный вопрос:
в чем разница между расширенным интерфейсом и типом пересечения в Typescript?

Попытка примера на игровой площадке TS

Пробуя пример кода в TS Playground на 3.9.7 (удобная ссылка с кодом и на 3.9.7), .d.ts определения импорта фактически подбираются, что довольно круто, но затем я получаю некоторые неочевидные ошибки консоли, а также ошибки боковой панели, которые на самом деле не отображаются. Смотрите Этот скриншот, который демонстрирует оба: