typescriptです-----インタフェース(インタフェース)を探検する唯一の方法

活字体は、インターフェース定義
自明であるプログラミング言語の学生に精通しているが、インターフェイス(インターフェイス)の重要性を知っています。多くは、インターフェイスを使用して満足しています。インターフェースは、Javaをtypescripと同様であるが、また、プロパティ、関数など、より柔軟なインタフェースタイプを増加し、索引付けすることができるような操作はtypescriptですが、より良い理解実行するには、インターフェースが暴露されなければなりません。私はあなたと共有します今日は、インタフェースを使用する方法、です。

なぜ使用インタフェースI.
1.1 JavaScriptの問題
:我々は、文字列はのユーザー名と年齢を取得、JavaScriptで関数を定義
CONST getUserInfo =関数(ユーザ){
リターンname: ${user.name}, age: ${user.age}
}
正しい呼び出しは次のような方法でなければなりません方法:
getUserInfo({名:「coderwhy」、年齢:18})
が、プロジェクトが大きい場合、または人々が開発したときに間違った呼び出し方法は次のようになります
//悪いコール
getUserInfo()//キャッチされない例外TypeError:ことはできません未定義のプロパティ読む'名前'
はconsole.log(getUserInfo({名: "coderwhy"}))//名前:coderwhy、年齢:未定義
getUserInfo({名: "codewhy"、高さ:1.88})//名前:coderwhy年齢:未定義の
JavaScriptは弱い型付けされた言語であるため、我々は検出するために、すべての着信コードを持っていないので、しかし、実際にはJavaScriptの前に多くの同様のセキュリティ上のリスクが存在します。
この問題を回避するには?
typescriptですが、もちろん再構築するためにコードを使用する
1.2活字体リファクタリングを。
我々は改善するために、typescriptですが、上記のコードを使用することができます。
CONST getUserInfo =(ユーザー:{名:文字列、年齢:番号}):文字列=> {
リターンname: ${user.name} age: ${user.age};
};
正しい呼び出しは次のようである:
getUserInfo({名: "coderwhy"、年齢:18である});
コール場合:間違ったコールが登場者、そして活字体は、直接のエラーメッセージなります
//悪いコール
getUserInfo(); //エラーメッセージ:「ユーザー」が提供されなかったの引数を
getUserInfo({名:「coderwhy」 }); //エラーメッセージ:プロパティ'年齢'の形で行方不明'{名前:文字列;}'
getUserInfo({名: "coderwhy"、高さ:1.88}); //エラーメッセージ:型の不一致
、これはありません偽のコールが発生予防、私たちは関数を定義したとき、型パラメータの種類と機能は、非常に長いコードを読み取ることは非常に困難です。
だから、我々は再びコードを再構築するためのインタフェースを使用することができます。
1.3。
活字体のコードは2つのリファクタリング、今私たちは、ユーザーの種類を再構築するためのインタフェースを使用します。
インタフェース定義使用してパラメータの型:インタフェースの再構築
:私たちは、たIUserインターフェイスを定義
//インターフェイスを定義し
たIUser {インタフェース
名:文字列;
年齢:;ナンバー
}
:私たちはどのように書込み機能を見て次
のconst getUserInfo =(ユーザー:たIUser):文字列=> {
リターンname: ${user.name}, age: ${user.age};
};

//正しい呼び出し
getUserInfo({名: "coderwhy" 、年齢:18});

//誤ったコールが、他は同じである
)getUserInfo(、
インターフェイス再構成II:優れたインタフェース定義を使用する機能の種類(この後に定義されたインタフェース関数の詳細)
我々は、2つのインターフェースを定義:
第2のインターフェースを定義します警告、我々は、その目的は、一方向のみの関数インタフェースである場合、タイプを定義するために使用することができる、それを無視
typeIUserInfoFunc =(ユーザー:たIUser)=>文字列を、
インタフェースたIUser {
名:文字列;
年齢:数;
}

{IUserInfoFuncインタフェース
(ユーザ:たIUser):文字列;
}
その後、我々は、機能と機能を定義するために呼び出すことができる:
CONST getUserInfo:IUserInfoFunc =(ユーザー)=> {
リターンname: ${user.name}, age: ${user.age};
};

//正しい呼び出し
getUserInfo({名: "coderwhy" 、年齢:18});

//間違ったコール
getUserInfo();
2つのインタフェースの基本的な使用。
道に定義2.1インターフェース。
および他の類似の言語の多くは、活字体のインターフェイスは、定義するために、interfaceキーワードを使用して定義されています:
インターフェイスIPerson {
名:文字列;
}
必要になりますインタフェースの前で私を見つけるプラスtslint要件であるI、そうでない場合は警告を報告します
プレフィックスを追加しないでくださいは企業の規範と個人の習慣に基づいている
名前のインターフェイス大文字のIで始まる必要があり
、我々は中にtslintに閉じることができますもちろん、それはアウトです:で、ルールに次のルールを追加します。
「インターフェイス名」:[、「ネヴァー・プレフィックス」をtrueに]
2.2定義されたインタフェースのメソッド。
定義されたインタフェースのみの属性を持つことができ、この方法が有してもよい:
インターフェース{人物
名:文字列;
RUN():ボイド、
EAT():ボイド;
}
我々は、インタフェースタイプことオブジェクトを持っている場合、それは対応する属性およびメソッドを含んでいなければならない:
CONST P:人= {
名: "なぜ"、
RUN(){
コンソール( "実行中")の.log;
}、
EAT(){
console.log(「食べる」);
}
};
2.3オプション属性が定義され
、変数(オブジェクト)は、すべてのプロパティとメソッドは、インターフェイスを実装する必要があり、デフォルトではインターフェースのタイプに対応する変数(オブジェクト)。
しかし、インタフェースをより柔軟にするために開発、我々は、オプションを設計することができます属性(達成したい達成することができ、それは問題ではない実現する必要はありません)、この時間は、我々は、後に詳細に時間の機能を説明(オプションの属性を使用することができますいくつかのあなたすぐにオプションのパラメータを持つ関数を学びます):
インターフェース{人物
名:文字列;
年齢:?番号;
RUN():無効;
()をEATます。void;
研究():?無効;
}
上記のコードは、我々はオプションですどちらも老化特性や学習方法を、増加:
任意の属性、取得した値が定義されていない値なし、場合;
別の方法のために、それは、その後、それ以外の場合はエラーになり、最初の裁判官を呼び出す必要があります;
CONST P:= {人物
名: "なぜ"、
RUN(){
にconsole.logは( "実行中");
}、
EAT(){
にconsole.logは( "食べます");
}
}。

console.log(p.age); //未定義
p.study(); //オブジェクトを"未定義"される可能性があります呼び出すことはできません。
正しい呼び出しは、以下:
IF(p.study){
p.study();
}
定義2.4読み取り専用プロパティ。
デフォルトでは、読み書き可能な属性で定義されたインタフェース:
はconsole.log(p.name)を、
p.name =「chuanfeng」;
プロパティ、私たちは定義された時間後に変更できない値を定義したい場合は、あなたがプロパティの前にキーワードを追加することができます。読み取り専用
人{インターフェイス
読み取り専用名:文字列。
?:ナンバー年齢;
RUN():無効;
EAT():無効;
研究():無効;?
}
私は名前の前に読み取り専用追加するときに、割り当てエラーは次のようになります
にconsole.log(p.name)。
p.name =「chuanfeng」; //は「に割り当てることはできない 。それは読み取り専用プロパティであるため、名称」
3つの高度な使用インタフェースを
3.1関数型定義
インターフェイスは、通常のオブジェクトの種類だけでなく、定義することができる、とすることができます関数型定義
//関数型定義
SumFunc {インターフェース
(NUM1:数、NUM2:数):数;
}

//特定の機能を定義
SUM CONST = SumFunc(NUM1、NUM2)=> {
戻りNUM1 NUM2 +;
};

//関数呼び出し
はconsole.log(合計(20、30) );
しかし、インターフェイス上で一つだけの機能である、活字体は私たちに示唆を与えるだろう、あなたは、関数の型を定義するタイプを使用することができます
タイプSumFunc =(NUM1:ナンバー、 NUM2:数)=>数;
複数のユーザタイプのために、我々は、特に界面での議論から、一時的に存在しない、後で説明します。
3.2は、インデックス型定義することができる
タイプのインターフェイスを使用して同様の機能を説明し、我々はまた、割出し可能型説明するインタフェースを使用することができ、
例を、変数は、アクセスすることができる:[3]、[ 「名前」]
割出し可能タイプAを有しますオブジェクトインデックスの種類、ならびに対応するインデックス戻り型を記述するインデックス署名。
//インデックス可能なタイプのインタフェースの定義
ロールマップ{インターフェース

}

//割り当て特定値
//割り当てモードA:
CONST roleMap1:ロールマップ= {
0: "学生"、
1: "インストラクター"、
2: "教師"、
}。

//割り当て方法:配列自体が指標値であるので、
CONST roleMap2 = [「ルバニ7」、「ルナ」、「白」]。

//対応する値を削除し
、はconsole.log(roleMap1 [0]) // 学生
はconsole.log(roleMap2 [1]); // ルナ
場合上記を、Googleのインデックスは、デジタル署名の一種である、活字体は、二つをサポートインデックス署名:文字列と数値。
私たちは、インデックス・タイプの列を定義:
インタフェースを{ロールマップ

}

ロールマップCONST:= {ロールマップ
AAA: "ルバニVII"
BBB "ルナ"
CCC "白"
}。

console.log(roleMap.aaa);
はconsole.log(ロールマップ[「AAA」]); //警告:テイクにはお勧めしませんが、
同時にインデックスの2種類を使用できますが、インデックス値の数が返される文字列のインデックスである必要があります戻り値の型のサブタイプ:
番号がインデックス化されたときに、JavaScriptがインデックスオブジェクトに、文字列に変換しているのでこれがあります。
{Personクラス
プライベート名:文字列= "";
}

クラスの学生が人を拡張{
プライベートSNO:数= 0;
}

//次のコードエラー
インターフェイスIndexSubject {

}
コードのエラーメッセージは次のとおりです。
数値インデックスのタイプ「の人は、」文字列のインデックス型「学生」に割り当てられていません。
:上のコードを次のように変形
インタフェースIndexSubject {

}
次のコードでも与えられる。
タイプletterインデックス結果が得られ、それは、Person型またはサブタイプでなければならない
{インターフェースIndexSubject

手紙:文字列;
}
。インターフェイスの3.3実装

注:このセクションと次のセクションでは、我々はいくつかのクラスを記述しますが、詳細な調査の文法クラスがありません(ただし、TSクラスとES6のために非常に似ています)。
我々は最初のクラス定義、インタフェースとどのようにクラスの使用を解決するために、私は特別な資料が詳細の一部を使用するために協力することができる方法を知っています。

特定のタイプの定義の後、あなたはクラスがインターフェイスを実装することができ、他のプログラミング言語は、このクラスは、明示的にこのインタフェースの属性を持ち、そのメソッドを実装する必要がありますすることができます除くインタフェース仕様:
以下のコード警告は、改質についてこと無視し、後に詳細に説明する
//物理インタフェース定義
エンティティインタフェース{
タイトル:文字列;
ログ():ボイド;
}

//そのようなインタフェースを実装する
実装エンティティ{Postクラスの
タイトル:文字列;

コンストラクタ(タイトル:文字列){
this.title =タイトル;
}

ログ():ボイド{
にconsole.log(this.title);
}
}
質問:私はインターフェイスを定義が、私は実装では、このインタフェースを継承してもインターフェイスを書き込むために、私はかもしれないだけでなく、直接にこのクラス書き込みの実装はそれがより便利ですが、また、インターフェースを定義する必要がなくなりますか?これは、多くの場合、場所に疑問を持っている初心者です。
考え方からは、なぜ我々はインターフェースが必要なのでしょうか?

私たちは人生の理解から進んインタフェース


たとえば、あなたが空腹の朝の後に演奏し、三亜/杭州ツアーに行く、あなたは先に見ている、注意を払う何?ホテルへ!!


あなたかもしれませんあまりにもこのレストランの名前は何と呼ばれる懸念していますが、ホテルのすぐワードの後ろに知らない、それはこの場所にはホテルを実現していなければならないことを意味します-あなたが食べるために食品のすべての種類を行う。


ホテル/ホスピタリティのようなインターフェース提携言葉これらの用語は、我々はこれらの言葉を見たときに、それは彼らが子会社の機能があることを知っているだろう、後で追加

?コード設計から、なぜインターフェース
コードの設計で、インターフェースは仕様です;
インタフェースは、一般的に使用されていますいくつかの定義された仕様では、同様の協定を遵守しなければならない、といくつかの言語は、直接プロトコルと呼ばれる。
のみ仕様と実装を分離するために提供されなければならないインターフェイスのプロパティとメソッドのクラスを提供するビューの手続き点に立って、システムを強化します拡張性と保守性は、
もちろん、初めての人の非接触インタフェースのために、これは、実際のコード設計の利点を理解することは困難です 徐々に感じるようになった、せっかちなことはありません。
3.3。継承インタフェース
そして、(私たちは、詳細後で知識学習クラスはよ)、インタフェースも継承インターフェイスは、再利用性を提供することができますクラスに似:
注:継承はキーワード拡張
インタフェースBarkable {
吠える():ボイド;
}

揺動可能{インタフェース
()を振っ:ボイド。
}

PetableはBarkableインタフェース、揺動可能に延び{
食べる():ボイド;
}
インタフェースPetableはBarkableと揺動可能から継承し、また、我々は、インタフェースが同時に複数のインターフェイスから継承することができることを見出し
、我々はクラスを持っている場合、実装Petableインターフェイスは、唯一Petableを実装する必要がないこと方法、Petableインターフェイスから継承されたメソッドも実装する必要があります。
注:実装キーワード使用してインターフェイスを実装する
クラス犬実装Petable {
吠える():ボイド{
にconsole.log(「樹皮」);
}

)(振盪:ボイド{
にconsole.logは( "尻尾を振ります");
}

食べる():ボイド{
にconsole.log( "骨を食べます");
}
}

あなたはコンテンツがこのインターフェースに限定されるだろうと感じた場合は、それが間違っている可能性があり、また他のインタフェースとの組み合わせで、必ずしもあなたが反復練習を必要とする知識の使用、しばらく、あなたはあなたのプログラミングのスキルを向上させたい場合は、そのそれは私を懸念、私はあなたがボトルネック、自己改善を突破助けるためにあなたよりエキサイティングなチュートリアルをリリースする予定。

おすすめ

転載: blog.51cto.com/13007966/2452442