Type Script:基本タイプとインターフェース

14130 ワード

Type Scriptマニュアルのカタログを返します.
基本タイプ(Baic Type)
プログラムを使用できるようにするためには、一番簡単なデータユニットが必要です.数字、文字列、構造、ブール値などです.Type Scriptでは、JavaScriptで期待されているような多くのタイプをサポートしています.また、ポップアッププロンプトのエニュメレーションタイプは便利です.
ブール値(Boolean)
最も基本的なデータタイプは簡単なtrue/value値で、JavaScriptとTypeScript(他の言語を含む)はこれを「bollan」値と呼びます.
var isDone: boolean = false;
数値(Number)
JavaScriptと同じように、Type Scriptの数字はすべて浮動小数点の値です.これらの浮動小数点のタイプはすべて「number」です.
var height: number = 6;
文字列(String)
JavaScriptでは、ページやサーバなどの作成プログラムのもう一つの基本部分はテキストデータを使って作業します.他の言語と同じように、私たちは「string」を使ってこれらのテキストデータの種類を引用します.JavaScriptのように、Type Scriptもダブルクォーテーションまたはシングルクォーテーションを使って文字列データを包んでいます.
var name: string = "bob";
name = 'smith';
配列(Aray)
Type ScriptはJavaScriptと同じで、配列値を使用することができます.配列の種類には2つの書き方があります.最初の種類は、配列内の要素の種類のかかとの中かっこ「[]」を使用して要素タイプの配列を表します.
var list:number[] = [1, 2, 3];
第二の方法は、一般的な配列タイプを使用して、Aray<elemType>:
var list:Array<number> = [1, 2, 3];
列挙(Enum)
「enum」はType ScriptがJavaScriptの標準データタイプセットに役立つ拡張です.C〓〓〓言語のように、一つの列挙はより友好的に数値集合の名前を与える方式です.
enum Color {Red, Green, Blue};
var c: Color = Color.Green;
デフォルトでは、列挙タイプのメンバーは0から数え始めます.メンバーの値を手動で設定することで、デフォルトのカウントルールを変更することができます.例えば、私たちは1から0ではなくスタートできます.
enum Color {Red = 1, Green, Blue};
var c: Color = Color.Green;
あるいは、列挙のすべての値を手動で設定します.
enum Color {Red = 1, Green = 2, Blue = 4};
var c: Color = Color.Green;
列挙の便利さの一つの特徴は、名前の数値から列挙の値に対応する名前を見つけることです.例えば、2の値がある場合、どちらの名前が列挙に対応するかは不明ですが、以下のように対応する名前を調べてもいいです.
enum Color {Red = 1, Green, Blue};
var colorName: string = Color[2];

alert(colorName);
任意のタイプ(Any)
時々、私たちは知らないかもしれない変数のタイプについて説明します.これらの値は、ユーザーまたはサードパーティクラスからのような動的コンテンツから来ることができる.これらの場合、私達はタイプチェックを外して、これらの値をコンパイルする時にチェックしてください.「any」を使ってマークしてもいいです.
var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;//        
"any"は既存のJavaScriptを処理する強力な方法であり、ゆっくりとコンパイルの間にタイプチェックを選択して終了することができます.
一部のタイプを知っていますが、すべてのタイプではないかもしれません.この時には「any」タイプも便利です.たとえば、配列がありますが、この配列は異なる種類の値を混合しています.
var list:any[] = [1, true, "free"];

list[1] = 100;
Void
「any」は多くの面で「void」に対して、全くタイプが存在しないかもしれません.通常、このタイプは、値を返さない関数の返却タイプです.
function warnUser(): void {
    alert("This is my warning message");
}
インターフェース(Interfaces)
TSのコア原則の一つは注目値のタイプチェックであり、「動的タイプ」または「構造化サブタイプ」とも呼ばれる.TSでは、インターフェースはこれらのタイプの名前を付ける役割を果たしています.これはあなたのコードの内部とプロジェクトの外部で定義された約束の強力な方法です.
最初のインターフェース
インターフェースの働きを知る一番簡単な方法は簡単な例を始めることです.
 1 function printer(labelObj:{label:string}) {
 2     console.log(labelObj.label);
 3 }
 4 var myObj = { size: 10, label: "size 10 object" };
 5 printer(myObj);
タイプ検阅器は「printer」の呼出を検出します.「printer」関数は一つのパラメータしかありません.このパラメータは伝来したオブジェクトに「label」というstringタイプのパラメータが要求されます.なお、実際には、私たちの例では、より多くの属性が導入されていますが、コンパイラの検出メカニズムは、入力されたオブジェクトの属性は少なくとも1つと要求された同名があり、タイプが一致します.
この例をもう一度書いてみます.今回はstringタイプの「label」属性があるインターフェースを使って説明します.
 1 interface LabelValue{
 2     label:string;
 3 }
 4 
 5 function printLabel(labelObj:LabelValue) {
 6     document.write(labelObj.label);
 7 }
 8 var myObj = { size: 10, label: "size 10 object" };
 9 printLabel(myObj);
インターフェイス「LabelValue」は前の例の需要を説明するために使用できる名前です.これは依然としてstringタイプの「label」属性を表しています.なお、我々が導入した「printLabel」方法の対象は、他の言語のようにこのインターフェースを実現することを示す必要はない.ここでは重要なモデルだけです.私たちの輸入関数のオブジェクトがリストのニーズを満たすなら、入力されたオブジェクトは許可されます.
これらの属性の順序はタイプ検光子に要求されず、インターフェース定義のこれらの属性のみが存在し、タイプマッチングが要求されることが指摘されている.
オプションのプロパティ
インタフェースのすべての属性が満たされなければならないわけではない.いくつかの属性は、ある条件の下に存在するか、あるいはまったく存在しない可能性があります.ユーザが「オプションパッケージ」を作成すると、2つの属性だけを満たす関数がオブジェクトに入ってきます.オプションの属性が役に立ちます.
以下はこのモードの一例である.
 1 function createSquare(config:SquareConfig):{color:string;area:number} {
 2     var newSquare = { color: "white", area: 100 };
 3     if (config.color) {
 4         newSquare.color = config.color;
 5     }
 6     if (config.width) {
 7         newSquare.area = config.width * config.width;
 8     }
 9     return newSquare;
10 }
11 
12 var mySquare = createSquare({ color: "red" });
オプション属性を持つインターフェースと他のインターフェースの書き方は似ていますが、それぞれのオプション属性は声明の中で一つの「?」を使います.表示をする
オプションの属性の利点は、これらが利用可能な属性であることを説明することができますが、利用可能でない属性もキャプチャされます.
関数の種類
インターフェースは、幅広いJavaScriptオブジェクトが構築可能なモデルを記述することができ、属性を有するオブジェクトの説明に加えて、インターフェースは、関数タイプを記述することができる.
インタフェースを有する方法のタイプを記述するために、署名を呼び出すためにインターフェースを与える.これはパラメータリストと指定された返却タイプのみの方法宣言のようです.
 1 //         
 2 interface SearchFunc {
 3     (source:string,substring:string):boolean;
 4 }
 5 
 6 var mySerach: SearchFunc;
 7 mySerach = function (source: string, substring: string) {
 8     var result = source.search(substring);
 9     if (result==-1) {
10         return false;
11     } else {
12         return true;
13     }
14 };
関数タイプインターフェースを定義すると、他のインターフェースのように使用できます.ここでは、関数タイプの変数を作成する方法と、同じタイプの関数値を付与する方法を示します.
関数タイプの正確なタイプのチェックには、上記の例の「source」のようなパラメータにマッチする名前は必要ありません.
方法パラメータは1回につき1つずつ確認し,それぞれの対応するパラメータの種類を相互に検討した.上記の例では、我々の関数式が返した値(trueとfalse)は、その戻りのタイプを示唆しています.上記がnumberまたはstringタイプの値である場合、タイプ検光子は「返しタイプはSearch Funインターフェースで説明された返却タイプに合わない」と警告します.
クラスタイプ(クラスタイプ)
インターフェースを実現
C〓〓とJava言語のように、インターフェースの最も一般的な使い方の一つは、明示的に強い種類が一つの特定の契約を満たすことです.これはType Scriptの中でもいいです.
 1 interface ClockInterface {
 2     currentTime: Date;
 3     setTime(d:Date);
 4 }
 5 class Clock implements ClockInterface {
 6     currentTime: Date;
 7     constructor(h: number, m: number) { };
 8     setTime(d: Date) {
 9         this.currentTime = d;
10     }
11 }
インターフェースは、共通およびプライベートの両方の部分ではなく、クラスの共通の部分を記述している.これは、クラスのインスタンスのプライベート部分も特定のタイプがあることを確認するためにそれらを使用することを阻止する.
クラスの静的/インスタンスの間の違い
クラスとインターフェースを使用すると、記憶クラスには2つのタイプがあります.構成署名を使ってインターフェースを作成し、このインターフェースを実現したクラスを作成しようとすると、エラーが発生することに気づくかもしれません.
 1 /***************     ***************/
 2 interface ClockInterface {
 3     new (hour: number, minute: number);
 4 }
 5 
 6 class Clock implements ClockInterface {
 7     currentTime: Date;
 8     constructor(h: number, m: number) { }
 9 }
10 /**************     ****************/
11 /***************     ***************/
12 interface ClockStatic {
13     new (hour: number, minute: number);
14 }
15 
16 class Clock2{
17     currentTime: Date;
18     constructor(h: number, m: number) { }
19 }
20 
21 var cs: ClockStatic = Clock;
22 var newClock = new cs(7, 30);
23 /**************     ****************/
これは、クラスが一つのインターフェースを実装すると、クラスのインスタンスの端だけが検出され、constructorが静的端に位置するため、検出されるからである.逆に、クラスの「静的」端を直接使う必要があります.
引継ぎインターフェース(Extens Interfaces)
種類のようにインターフェースも相互に継承できます.それはもう一つのインターフェースのメンバをコピーして他のインターフェースに行くタスクを処理しています.インターフェースを再利用可能なコンポーネントに分離するには、より多くの自由を与えます.
 1 interface Shape {
 2     color: string;
 3 }
 4 
 5 interface Square extends Shape {
 6     sideLength: number;
 7 }
 8 
 9 var square = <Square>{};
10 square.color = "blue";
11 square.sideLength = 10;
一つのインターフェースは複数のインターフェースを継承することができ、これによってすべてのインターフェースの組み合わせが作成される.
 1 interface Shape {
 2     color: string;
 3 }
 4 
 5 interface PenStroke {
 6     penWidth: number;
 7 }
 8 
 9 interface Square extends Shape, PenStroke {
10     sideLength: number;
11 }
12 
13 var square = <Square>{};
14 square.color = "blue";
15 square.sideLength = 10;
16 square.penWidth = 5.0;
交配タイプ(Hybrid Types)
 1 interface Counter {
 2     (start: number): string;
 3     interval: number;
 4     reset(): void;
 5 }
 6 
 7 var c: Counter;
 8 c(10);
 9 c.reset();
10 c.interval = 5.0;
第三者JavaScriptと相互作用する場合、上のようなモデルを使用してこのタイプのモデルを完全に説明する必要があります.