Typescriptの構文まとめ

基本型

・number ：整数、浮動小数点数

・string ：文字列

・boolean ：真偽値

・symbol ：シンボル型

・any ：任意の型（型の制約がなくなる）

文字列リテラル

・シングルクォート

・ダブルクォート

・バッククォート（${…}で変数埋め込み可能、複数行表現可能）

変数の宣言

let 変数名: 型 = 値;

※定数はcoustを使用

キャスト

<型名> 値

値 as 型名

配列

let 配列名: データ型[] = [値1, 値2];

多次元配列

let 配列名: データ型[][] = [[値a1, 値a2], [値b1, 値b2]];

連想配列

let 配列名: { [index: インデックスの型]: 値の型 } = { 
    インデックス1: 値1, 
    インデックス2: 値2 
}

・「index」は任意で変えても動く

・値は「配列名.インデックス名」で取得する

・「{[index: インデックスの型]: 値の型}」の部分をインデックスシグニチャという。

・インデックスシグニチャは外だししておくことが可能

interface インターフェース名 { 
    [index: インデックスの型]: 値の型; 
} 
 
let 配列名: インターフェース名 = { 
    インデックス1: 値1, 
    インデックス2: 値2 
};

列挙型 enum

enum 列挙名 { 
    列挙子1 = 値1, 
    列挙子2 = 値2 
}

・「列挙名.列挙子」で値を取得する

・値を指定しない場合、0始まりで上から順に自動で数値が設定される。

共有型 (Typescript固有の型)

let 変数名: 型1 | 型2;

・型をパイプで区切る

・指定した型のいずれかに一致する値のみ変数に代入できる

・配列でも使用可能

let 変数名: (型1 | 型2)[] = [値1, 値2];

型エイリアス

type 型名 = 型;

・特定の値に対して別名をつけられる仕組み

・インターフェースを使った方がいいらしい

文字列リテラル型

type 型名 = 文字列リテラル1 | 文字列リテラル2; 
 
例）  
type Name = 'aaa' | 'bbb';

・文字列リテラルをそのまま型として使える

・Name型に指定できる値は'aaa'か'bbb'だけになる。それ以外はエラーとなる。

null非許容型

・nullまたはundefinedを禁止された型を指す

・tsconfig.jsonで「compilerOptions - strictNullChecks」をtrueにすることでnull非許容になる

・nullを使いたい場合は共有型を使えばよい

function (関数の書き方1)

function 関数名(仮引数名: 仮引数のデータ型): 戻り値のデータ型 { 
  処理 
}

・戻り値がない場合は、戻り値のデータ型に「void」を指定する（他の記述方法も同じ）

関数リテラル (関数の書き方2)

let 変数名 = function(仮引数名: 仮引数のデータ型): 戻り値のデータ型 { 
  処理 
}

ラムダ式 (関数の書き方3)

let 変数名 = (仮引数名: 仮引数のデータ型): 戻り値のデータ型 => { 
  処理 
}

・{}は処理が1文の場合に省略可能

引数の省略

・仮引数名の末尾に「?」を付与することで、引数の指定がoptionalになる

引数のデフォルト値

function 関数名(仮引数名: 仮引数のデータ型 = デフォルト値): 戻り値のデータ型 {}

・デフォルト値を設定した仮引数は任意引数になる

・任意引数の後ろに必須引数は設定できない

・リテラル、式(関数)、他の仮引数を設定できる

・他の引数を設定する場合、既に定義されているもののみ可能(「sample(x: string = y, y: string)」はダメ)

・デフォルト値が適用されるのは、引数を省略したときとundefinedが指定されたとき。

可変長引数

function 関数名(...仮引数名: 仮引数のデータ型) {}

・仮引数の前に「...」を付与する

オーバーロード

function 関数名(仮引数名: 仮引数のデータ型1): 戻り値のデータ型; 
function 関数名(仮引数名: 仮引数のデータ型2): 戻り値のデータ型; 
function 関数名(仮引数名: any): 戻り値のデータ型 { 
  処理 
}

・先にシグニチャのみを定義する（{}はいらない）

・具体的な実装はシグニチャ達の直後に記述する

・具体的な実装をする関数の仮引数のデータ型はanyにする

関数で共有型の使用

・引数に共有型を使用できる（これを使うとオーバーロードがシンプルになる）

・戻り値に共有型を使用できる

クラス

定義

class クラス名 { 
    プロパティ名: プロパティのデータ型; 
 
    constructor(仮引数) { 
        this.プロパティ名 = 仮引数; 
    } 
 
    メソッド名(): 戻り値のデータ型 { 
        処理 
    } 
 
}

・コンストラクタの名前はconstructorで固定

・コンストラクタには戻り値のデータ型を指定できない

・クラスの使用は「new クラス名(引数);」/ メソッドの使用は「インスタンス.メソッド名();」

使用

let p = new クラス名(引数); 
console.log(p.メソッド名());

アクセス修飾子

・public : クラス外からもアクセス可能（デフォルトではpublicになる）

・protected : クラス内、派生クラスからのみアクセス可能

・private : クラス内からのみアクセス可能

コンストラクタとプロパティーのコード量を減らす書き方

定義

constructor(アクセス修飾子 プロパティ名: プロパティのデータ型) {}

・コンストラクタの引数にアクセス修飾子を付与することで、プロパティとコンストラクタを同時に定義できる

getter

定義

get メソッド名(): 戻り値の型 { 
  return this.プロパティ名; 
}

使用

インスタンス.getterメソッド名

setter

定義

set メソッド名(引数: 引数の型) { 
  this.プロパティ名 = 引数; 
}

使用

インスタンス.setterメソッド名 = 値

static変数

定義

アクセス修飾子 static 変数名: 変数の型 = 値;

使用

クラス名.変数名

・クラス内でstatic変数を使用する場合は「this.変数名」と変わらない記述をする必要がある

staticメソッド

定義

アクセス修飾子 static メソッド名() { 
  処理 
}

使用

クラス名.staticメソッド名

名前空間（パッケージ管理）

・名前空間を使用することで、同盟のクラス/メソッドを空間毎に区別して使用することが可能になる。javaなどでいうパッケージ

定義

namespace ブロック名 { 
    export class クラス名 {} 
    export function メソッド名() { }; 
}

・「namespace」を使用してブロックを作る

・ブロック内で定義するクラス/メソッドには「export」を付与する

使用

new ブロック名.クラス名(); 
ブロック名.メソッド名();

・ドットでクラス/メソッドの階層を指定する。

名前空間階層の指定

・階層を表現するには、「ドットでブロック名をつなげる」か「exportでnamespaceをネストする」

ドットで表現

namespace ブロック名1.ブロック名2 { 
}

namespaceのネストで表現

namespace ブロック名1 { 
    export namespace ブロック名2 { 
    } 
}

継承

class クラス名 extends 継承元クラス { 
 
}

・extends で継承元を指定する。

・単一継承のみ可である

オーバーライド

・スーパークラスで定義されているコンストラクタとメソッドは、サブクラスで同じ定義をすることでオーバーライドできる。

スーパークラスのコンストラクタとメソッドの呼び出し

コンストラクタ

constructor() { 
    super(引数);     
}

・サブクラスのコンストラクタ内で「super();」で呼ぶ出すことが出来る

メソッド

メソッド名(): 戻り値の型 { 
    super.メソッド名(); 
}

・サブクラスのメソッド内で「super.スーパークラスのメソッド名();」で呼ぶ出すことが出来る

抽象メソッド

abstract class クラス名 { 
    abstract メソッド名(): 戻り値の型; 
}

・メソッド名の前に「abstract」を付与すると、サブクラスでのオーバーライドが必須になる抽象メソッドを定義できる

・抽象メソッドを持つクラスは、クラスの前に「abstract」を付与しなければいけない

・抽象メソッドは{...}を定義しない

インターフェース

interface インターフェース名 { 
}

・「interface」で定義する

・メソッドはすべて抽象メソッドでなければいけない

・アクセス修飾しは不可

・staticメンバーの指定不可