Into the Typescript 2

☑️ Enum

他のプログラミング言語で提供されるenumと同じです.列挙型と呼ばれ、特定の値の集合を表す.値の範囲が一定のタイプに決定された場合に使用します.

デジタルEnum

基本的にゼロから始まり、一つずつ増えていきます.

Shoes.nikeが0に割り当てられていることがわかります.
手動で割り当てることもできます.adidasに3を指定すると、次の要素のvansが4であることがわかります.

逆マッピングも可能です.keyによってvalueを得ることができ、逆も同様である.逆マッピングは、デジタルEnumでのみ使用可能です.

文字Enum
文字型Enumは自動的に増分できません.したがって、すべてのEnum値を初期化する必要があります.

JavaScriptのクラスとプロトコルのタイプ

Javaまたはオブジェクト向け言語の開発者がjavascriptを使用する場合、クラスがないことに困惑します.ES 2015はJavaScriptからクラスを提供するようになったが、JavaScriptは本質的にプロトコルベースの言語である.JAvascriptが提供するclassは、関数オブジェクトを使用して作成されます.

var o = new Object();
o.[[Prototype]] = Foo.prototype;
Foo.call(o);

これは、プロトタイプを割り当て、call関数を使用してジェネレータを作成する方法です.

function Zombie(name, age){
    this.name = name;
    this.age = age;
}
var zombie = new Zombie('child',1);

class Zombie {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}
var zombie = new Zombie('child',1);

Babelコンパイルクラスで生成されたオブジェクトは、上記の関数で宣言されたオブジェクトと同じです.

2

タイプスクリプトのクラス

クラスのメンバー変数のタイプを指定するか、private、publicを使用します.ジェネレータのパラメータタイプを指定することもできます.
読み取り専用ログは読み取り専用です.ゾンビlog = 'abc'; あり得ない.

class Zombie {
    private name : string;
    public age : number;
    readonly log : string;
    constructor(name : string, age : number){
        this.name = name;
        this.age = age;
    }
}
var zombie = new Zombie('child',1);

ジェニーリック

ジェニーンリックとは?

汎用(generic)は、汎用データ型を意味します.これは、コンパイル時に使用する内部データ型を指定する方法です.
すなわち、ジェニーリックは、宣言時に異なるタイプを使用するのではなく、作成時にタイプを指定します.

ジュネーブ法

関数のパラメータに値を入力するのと同様に、使用するタイプも関数に挿入されます.

function getSomething<T>(something: T): T {
    return something;
  }

上記のコードが関数でTというタイプを実行している場合、パラメータと戻り値にはTのタイプがあります.

Genericによる重複除外

パラメータを受信して出力する関数を作成する場合は、次の操作を実行できますが、JENICを使用して重複を解消できます.

function getString(something: string): string {
    return something;
  }
function getNumber(something : number) : number {
    return something;
}

getSomething<string>('hello')
getSomething<number>(3)

このように、複数の方法で関数を呼び出すことができます.

Unionの欠点
次のコードに示すように、unionを使用すると、aはsplitという関数を使用できません.
string|numberタイプにsplitがないためです.

function getSomething(something : string | number) {
    console.log(something)
    return something
}
const a = getSomething('abc');
a.split('')

インタフェースでのJENICの使用
インタフェースを使用するときにタイプを入れるGenericを使用できます.

interface Something<T>{
    value : T;
    name : string
}
const a : Something<number> = {value : '1', name : 'wook'};

numberを受信する必要がありますがstringを受信したためエラーが表示されます.

ジェニーンリックタイプ制限
jenericと宣言された関数の場合、textは後でTというタイプを得ますが、タイプスクリプトではTのタイプにlengthがないと推測されます.

function logText<T>(text: T): T {
    console.log(text.length); 
    return text;
  }

インタフェースの継承

interface LengthWise{
    length : number;
}

function logText<T extends LengthWise>(text: T): T {
    console.log(text.length); 
    return text;
  }

「T」は、タイプを定義せずにlength属性を許可する方法であり、タイプが具体的に明記されていないためである.

keyof
インタフェースのキー値のみをタイプとして受け入れます.

interface Shoppingitem {
    name :  string;
    price : number;
    stock : number;
}

function getShoppingItemOption <T extends keyof Shoppingitem> (itmeOption: T) : T {
    return itmeOption
}
getShoppingItemOption('name')

Promiseを使用して関数タイプを定義する

Promise値を受け入れる関数の場合、タイプスクリプトはresloveの前に受け入れる値のタイプを知らない.
したがって、Promiseを使用してタイプを指定するほか、解析値も指定する必要があります.

function fetchZombie() : Promise<string[]>{
  let zombies = ['a','b','c'];
  return new Promise(function(resolve){
      setTimeout(() => resolve(zombies),1)
  })
}
fetchZombie()

resolveの値は文字列配列であるため、PromsiseでJennyを使用して文字列配列を作成します.

類型推論

タイプ推定は、タイプスクリプトによるタイプの推定です.タイプ推論を理解する前に、タイプスクリプトのターゲットについて説明します.

タイプスクリプトのターゲット
タイプスクリプトの正式なドキュメントの文を参照します.
One of TypeScript’s core principles is that type checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural subtyping”.
タイプスクリプトでは、タイプのチェックは値の形式ではなく値の形式に焦点を当てます.これをduck typingと呼びます.

duck Typing
"If it walks like a duck and it quacks like a duck, then it must be a duck"
道徳タイピングは動的タイピングの一種であり,対象自体がどんなタイプであるかではなく,特定の方法や属性の存在に基づいてタイプを判断する.
したがって、タイプに制限されずにタイプをより柔軟に定義することができる.

最適な汎用タイプ
一般的な例は、配列された要素のタイプを推定する方法です.

let x = [0, 1, null];

配列内の要素にnumberとnullがあるため、タイプスクリプトはnumber|nullが要素の配列であると推定します.

文脈上の推論
上記の例では、右側の配列からタイプを推定した.しかし、文脈上の推論も反対の方向を支持している.たとえば、ウィンドウです.onmousedownがイベントコールバックとしてmouseEventを受信する場合、タイプスクリプトはmouseEventとwindowです.コンテキストではonmousedownコールバックからのパラメータと推定されます.

window.onmousedown = function(mouseEvent) {
  console.log(mouseEvent.button);   //<- OK
  console.log(mouseEvent.kangaroo); //<- Error!
};

人の言うこと

タイプスクリプトがタイプを異なる推定または保守的に推定した場合、プログラマはコンパイラタイプに手動で通知します.
document.querySelectorとして受信したdivは、プログラマがタグを持っている場合、div変数はHtmlDivElementであることを示す.

let div = document.querySelector('#box');
div.innerHTML

しかし、上図に示すように、推測のタイプは予想とは異なる.
したがって、プログラマは事前にこのタイプを断言します.

let div = document.querySelector('#box') as HTMLDivElement;
div.innerHTML

タイプガイド

タイプ保護は、タイプ断言をより論理的に使用する方法です.
上記のタイプはdomオブジェクトによってdivタイプとして決定されると断言します.しかし、この方式は実行時にしか分からず、TSコンパイラは知らない.
タイプ保護では、コンパイル時に実行時のタイプチェックを知ることができます.
変数isタイプの形式でタイプチェックを行う方法の戻り値を記述します.

class Customer {
    name : string;
    address : string;
    isVip() : this is Vip {
        return this instanceof Vip
    }
    isNormal(): this is Normal{
        return this instanceof Normal
    } 
}
class Vip extends Customer {
    doValetParking(){}
}
class Normal extends Customer{
    makeOrder(){}
}

function process(customer : Customer){
    if(customer.isVip()){
        customer.doValetParking();
    }
}

上記のprocess関数がタイプブレークスルーを使用して作成された場合、

function process(customer : Customer){
    if(customer.isVip()){
      	(customer as Vip).doValetParking();
    }
}

このような方法で断言を続けるのは不便だ.

タイプ互換性

タイプの互換性とは?
「≪タイプ・スクリプト｜Type Script｜Eas≫」で、特定のタイプに適したタイプ、すなわち互換性のあるタイプを決定します.

関数互換性
次の例に示すように、開発者で宣言した関数helloはageパラメータを必要とせずに動作します.右側のタイプが左側よりも構造的に大きい場合は、互換性があります.

interface Person {
  hello(name: string, age: number) : {introduce : string};
}
class Developer implements Person{
  static age: number = 0;
  hello(name: string){
      let introduce = { introduce : `Hello my name is ${name}`, age : Developer.age};
      return introduce
  }
}

タイプスクリプトJavaScriptランタイム動作をモデリングします.

foreachのコールバック関数も基本的に3つのパラメータを受け入れるが,value値だけでも問題ない原理と同じである.

互換オブジェクト
より多くのアトリビュートを持つオブジェクトを置き換えることはできますが、置き換えることはできません.

interface x{
  name : string;
}
interface y{
  name : string;
  age: number;
}
let obj1 : x = {name : 'Alice'};
let obj2 : y = {name : 'Bob', age : 7};
obj1 = obj2;
obj2 = obj1;