TypeScript型注釈一覧

TypeScriptの学習をした為、一覧化していく

TypeScriptとは

2012年、Microsoft社が発表したJavaScriptを拡張した言語
厳密な型付けをすることができる為、大規模開発で効果を発揮

型注釈

let 変数名：データ型

• 文字列(string)

• 数値(number)

• 数値で扱えない範囲の数値(bigint)

• 真偽値(boolean)

• null(null)

• undefined(undefined)

• シンボル(symbol)

let price:number = 120; //数値のみ代入可能
let message:string = "TypeScript"; //文字列のみ代入可能

列挙型（複数の定数を一つにまとめる）

enum 列挙型名 {
  メンバー1 ＝ 値1,
  メンバー1 ＝ 値2,
  メンバー1 ＝ 値3,
}

呼び出す時
列挙型名.メンバー1;

enum week {
 Sun,
 Mon,
 The,
 Wed,
 Fri,
 Sat
}
;
day === week.Sun;

※値を省略すると、0から始まる連番が自動で割り当てられる

ユニオン型（いずれかの値のみ代入可能にする）

let 変数名：データ型1｜データ型2；

let anyNumber:number | string;
anyNumber = "9"; //数字、または文字列のいずれかが代入可能なのでエラーにならない

リテラル型（特定の値のみ代入可能にする）

let a:"example" = "example";

let a:"example" = "example"; //example以外を代入するとエラーになる

配列の型注釈

let 変数名：データ型[ ];
let 変数名：Array<データ型>;

let x:(number | string)[];
x=[1,2,3,4,5];

let x:Array<number> = [1,2,3,4,5]; //いずれかの書き方でOK

読み取り専用

変数名：readonlyデータ型[ ];

let x:readonly number[] = [1,2,3];

読み取り専用の場合は下記不可

• 要素の値を変更

• 個数や位置変更

• 書き込み可能な配列への代入

エイリアス（データ型を別の名称をつける）

type型名＝データ型;

type select = string;

関数の型注釈

function 関数名（引数：データ型）：データ型

戻り値を返さない関数

function関数名（）:void

any型（任意のデータと互換）

let value: any;

何を代入してもエラーにならないが、TypeScriptを使用する意義がなくなってしまう為使用しないほうがベター

引数の省略

function 関数名（引数：データ型＝デフォルト値）{
}

function hello(message:string = "HELLO") {
  console.log(message);
}

hello(); //引数がない場合、デフォルト値が呼び出されてエラーにならない

引数の分割代入

function 関数名（[a,b]:データ型）{
}
関数名（配列名）;

最後に

今回バニラJavaScriptの書き方についてアウトプットしたが、フレームワークでの導入方法も別途学習していかなければならない。

学習コストがかかるが、
・静的型付けによる早期エラーの発見
・コードの可読性/保守性の向上
上記メリットがありコストをかけてでも習得する意義があると感じた。

TypeScriptの良さを体感し、フロントエンド開発においてTypeScriptの習得が必須である理由に納得。

Documentation - Object Types