Type Scriptベース入門-インタフェース-継承インタフェース

転載先
Type Scriptベース入門-インタフェース-継承インタフェース
プロジェクト実践倉庫

https://github.com/durban89/typescript_demo.git
tag: 1.0.13

後続の学習プレゼンテーションを保証するためにts-nodeをインストールする必要があります.これにより、後続の各操作が出力の結果を直接実行できます.

npm install -D ts-node

あとは自分で練習するときに使うことができます

npx ts-node src/learn_basic_types.ts

npx ts-node     

インタフェース
TypeScriptの核心原則の一つは,値が持つ構造のタイプチェックである.「アヒル型弁法」や「構造的サブタイプ化」と呼ばれることがある.Type Scriptでは、インタフェースの役割は、これらのタイプの名前とコードまたはサードパーティのコードの契約を定義することです.
インタフェースの継承
クラスと同様に、インタフェースも互いに継承できます.これにより、1つのインタフェースから別のインタフェースにメンバーをコピーすることができ、再利用可能なモジュールにインタフェースをより柔軟に分割することができます.次の例を示します.

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square =  {};
square.color = 'red'
square.sideLength = 10;

1つのインタフェースは、複数のインタフェースを継承し、複数のインタフェースの合成インタフェースを作成します.次の例を示します.

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square =  {};
square.color = 'red'
square.sideLength = 10;
square.penWidth = 10;

ブレンドタイプ
先に述べたように、インタフェースはJavaScriptの豊富なタイプを記述することができます.JavaScriptのダイナミックで柔軟な特性のため、上記のようなさまざまなタイプのオブジェクトを同時に持つことを望む場合があります.1つの例は、1つのオブジェクトが関数とオブジェクトとして同時に使用でき、追加の属性を持つことです.

interface Counter {
    (start: number): string
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = function(start: number) {};
    counter.interval = 10;
    counter.reset = function() {}
    return counter;
}

let counter = getCounter()
counter(10);
counter.reset();
counter.interval = 10.0

JavaScriptサードパーティライブラリを使用する場合は、上記のようにタイプを完全に定義する必要があります.
インタフェース継承クラス
インタフェースがクラスタイプを継承すると、クラスのメンバーは継承されますが、実装は含まれません.インタフェースがすべてのクラスに存在するメンバーを宣言しているように、具体的な実装は提供されていません.インタフェースはクラスのprivateメンバーとprotectedメンバーにも継承されます.これは、プライベートまたは保護されたメンバーを持つクラスを継承するインタフェースを作成した場合、このインタフェースタイプはこのクラスまたはそのサブクラスによってのみ実現されることを意味します.これは、膨大な継承構造がある場合に役立ちますが、コードがサブクラスに特定の属性を持っている場合にのみ機能することを指摘します.このサブクラスはベースクラスに継承される以外はベースクラスとは何の関係もありません.例:

class Control {
    private state: any;
}

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

class Button extends Control implements SelectableControl {
    select() {}
}

class TextBox extends Control {

}

class Image implements SelectableControl {
    select() {}
}

運転後に次の異常が発生します

⨯ Unable to compile TypeScript:
src/interface_8.ts(54,7): error TS2300: Duplicate identifier 'Image'.
src/interface_8.ts(54,7): error TS2420: Class 'Image' incorrectly implements interface 'SelectableControl'.
  Property 'state' is missing in type 'Image'.

上記の例では、SelectableControlには、プライベートメンバーstateを含むControlのすべてのメンバーが含まれています.stateはプライベートメンバーであるため、SelectableControlインタフェースを実現できるのはControlのサブクラスのみである.ControlのサブクラスのみがControlに宣言されたプライベートメンバーstateを持つことができるため、プライベートメンバーの互換性が必要です.
Controlクラス内では、SelectableControlのインスタンスを使用してプライベートメンバーstateにアクセスできます.実際,SelectableControlインタフェースはselectメソッドを持つControlクラスと同じである.ButtonクラスとTextBoxクラスはSelectableControlのサブクラスである(いずれもControlから継承されselectメソッドがあるため)が、ImageクラスとLocationクラスはそうではない.
このインスタンスは、実践プロジェクトのアドレスを終了します.

https://github.com/durban89/typescript_demo.git
tag: 1.0.14