#[TIL] # 47 typescript

module

internal, external

タイプスクリプトでは、モジュールは大きく2つに分類されます.
内部モジュール
がいぶモジュール
2つのモジュールの最大の違いは、その依存性にあります.

Internal Module

他のモジュールローダに依存する必要はありません.
Typeスクリプトをコンパイルすると、名前付きJavascriptオブジェクトが作成されます.
モジュール化
ネーミングスペースの生成

External Module

Common.js/Require.js/ES 6モジュールなどのモジュールLoaderに依存
nodeの場合、namespaceではなくmoduleを使用することをお勧めします.

declare

typescriptをコンパイラに特定の変数があると宣言します.
主にグローバル変数です.d.tsファイルの作成に使用

declare module "buffer"{}

declare module buffet {}

1つ目は外部モジュールを定義することであり、2つ目は内部モジュールを定義することである.
モジュール名が「」の場合、外部モジュールの定義です.

Type, Interface

どちらの方法も宣言の方法です.
違いは宣言を統合できるかどうかだ.

interface phoneNumber {
    inputString?: string;
}

interface phoneNumber {
    inputNumber?: number;
}

type phone {
    numb: number;
}
// Error
type phone {
    str: number;
}

インタフェースの場合、宣言をマージできます.
typeは宣言をマージできません

Union Type

けつごう
「|」記号でUnionタイプを表す
感覚はorとあまり違わない
ユーザーが自由に携帯電話番号を受信できれば

function phoneNumberInput(phoneNumber: string | number) {
	if ( typeof(phoneNumber) === "string"){
        console.log("stringType")
    } else {
        console.log("numberType")
    }}

これによりUnion Typeを用いてパラメータのタイプを決定することができる

共通フィールドを持つUnion Type

上記のようにUnionタイプをパラメータのタイプに適用すると、
インターフェースを使用してオブジェクトのタイプを指定しても使用できます

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

declare function getSmallPet(): Fish | Bird;

let pet = getSmallPet();
pet.layEggs();

// Error
pet.swim() 

このUnionタイプを使用してタイプを定義できます.
Unionタイプをインタフェースに適用した場合は不明です.
共通のlayeggs()タイプのみ使用できます

ユニオンタイプの区分

type NetworkLoadingState = {
  state: "loading";
};

type NetworkFailedState = {
  state: "failed";
  code: number;
};

type NetworkSuccessState = {
  state: "success";
  response: {
    title: string;
    duration: number;
    summary: string;
  };
};
type NetworkState =
  | NetworkLoadingState
  | NetworkFailedState
  | NetworkSuccessState;

function networkStatus(state: NetworkState): string {
// Error
  state.code; 
// switch 문으로 구분해서 사용 가능
  switch (state.state) {
    case "loading":
      return "Downloading...";
    case "failed":
      return `Error ${state.code} downloading`;
    case "success":
      return `Downloaded ${state.response.title} - ${state.response.summary}`;
  }
}

typeを指定し、stateに同時に値を割り当てます.
スイッチドアで仕切って使用できます

enum

列挙

enum Direction {
  up,
    down,
    left,
    right
}

Direction.up 	// 0
Direction.down	// 1
Direction.left	// 2
Direction.right	// 3

Direction["0"]	// "up"
Direction["1"]	// "down"
Direction["2"]	// "left"
Direction["3"]	// "right

Generic

ジュネーブを使う最大の原因は、様々な状況に対処するためらしい.
いろいろな状況に対処するのは、どんなタイプがあるか分からない状況です.
不確定な場合に使用し、この場合にgenericを使用します.
単純な解決
ジェニーンリックを生成するときは、タイプを指定して、いろいろなタイプを使用させます.
最も多く使用されるタイプ変数Tはtypeの略であるため、

Tを使用して、関数の作成時にタイプを作成します.
パラメータ「string」が受信された場合、Tというタイプ変数に格納されます.
使用

タイプを、何も返さないvoidとして指定します.
ご覧のように、Tにvoidが含まれていることを確認できます.
生成者?この言葉は少しぴったりしているようだ.