Как именно работает наследование класса интерфейсом?

Question

Я читаю этот раздел справочника TypeScript и играю с измененным примером:

class Control {
    public state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Checkbox implements SelectableControl {
    public state: any;
    select() { }
}

Этот код в порядке. Но Q1. Я не уверен, почему мне нужно объявлять свойство state в классе Checkbox, поскольку оно уже существует в интерфейсе SelectableControl, действительно, почему?

Более интересные вещи происходят, когда яизменить модификаторы доступа. Если я изменяю его свойства state (в Control и Checkbox) на protected:

class Control {
    protected state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Checkbox implements SelectableControl {
    protected state: any;
    select() { }
}

, тогда я получаю сообщение об ошибке «Класс« Флажок »реализует интерфейс« SelectableControl »msgstr "неправильно. Свойство" состояние "защищено, но тип" Флажок "не является классом, унаследованным от класса" Control "(это перевод на английский). Q2. В чем проблема? Почему я должен наследовать Control класс, если state уже здесь, в SelectableControl? Как это связано с модификатором доступа?!

А теперь я меняю protected на private:

class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Checkbox implements SelectableControl {
    private state: any;
    select() { }
}

и ошибка была изменена! Теперь флажок «Класс» неправильно реализует интерфейс «SelectableControl». Типы разделяют объявления частного свойства «состояние». "(опять перевод на английский). Q3. Почему ошибка изменилась?! .

Концепция о том, что интерфейс может наследовать класс, мне очень незнакома, поэтому я не могу понять все эти нюансы ...

Answer 1

TypeScript является структурно типизированным языком, поэтому, когда вы наследуете интерфейс от класса, он эквивалентен просто копированию и вставке определений поля / метода из класса в этот интерфейс, т. Е.:

// no extends, just copy-paste
interface SelectableControl { 
    public state: any;
    select(): void;
}

Ивы также можете видеть, что в выводе 2 класса не наследуются друг от друга:

https://www.typescriptlang.org/play/index.html?ssl=1&ssc=1&pln=38&pc=1#code/MYGwhgzhAEDCD2A7ALgJ3iaBvAsAKGkOgAcBXAIxAEthoJkxkBTALmjEQE8BufAX3z4qKJqgBmYYE2gBlJiCbAGlJghTpMTAB7NEAExhq0GbPiJ15i5AAoAlGwBu8Knt54BefKEiGAFooBrcngtaCoAW2IFcKYUGDkFJTAVIw1TAiIySho6BmY2Dh4zIghLJTtsaA8+IA

Я считаю, что это должно ответить на все ваши вопросы, ноесли нет, я был бы рад расширить.