この記事ではTypeScriptにおける型(アノテーション)の使い方をご紹介します。
型(アノテーション)の使い方
TypeScriptにおけるアノテーションの使い方をご紹介します！
TypeScriptはJavaScriptと違い変数ごとに型を指定することが可能です。
これにより意図しなかった型の値が代入されることを防ぐことができます。
型(アノテーション)とは？
型(アノテーション)とは、string(文字列)・number(数値)といったように値の種別を明示する機能です。
例えば以下のようにあらかじめstringとして定義された変数testにnumber型の値が代入された場合、TypeScriptではエラーになります。
var test: string;
test="テスト"
test=5555 // Error
型(アノテーション)の書き方
<変数名>: 型;のように書けば変数に型を設定することが可能です。
let test: string = 'テスト'型(アノテーション)の種類
型(アノテーション)には、stringとnumberの他にも種類があります。
今回は特に利用される以下の型(アノテーション)についてご紹介します。
- 文字型(string)、数値型(number)、論理型(boolean)
- 配列(Arrays)
- インターフェース(Interfaces)
- インライン型アノテーション
- any
- null,undefined
- void
文字型(string)、数値型(number)、論理型(boolean)
前述した通り<変数名>: 型;のように記載します。
文字型であればstring,数値であればnumber、論理型であればbooleanを設定します。
var tesNum: number;
tesNum = 1;
var tesStr: string;
tesStr = "テスト";
var tesBool: boolean;
tesBool = True;
配列(Arrays)
配列は<変数名>: 型[];のように型の後に[]を付与することで定義できます。
配列にすることで複数の値を一つの変数で管理することが可能になります。
var tesNum: number[];
tesNum = [1,2,3];インターフェース(Interfaces)
インターフェースを使えば複数のアノテーションを一つの変数で定義することができます。
interface TesInterface {
tes1Num: number;
tes2Num: number;
}
var tesInterface: TesInterface;
tesInterface = {
tes1Num: 1,
tes2Num: 2.
};インライン型アノテーション
オンライン型アノテーションとは、複数のアノテーションを定義した一つの変数を構造体として用意して使う方法です。
var tesNums: {
tes1Num: number;
tes2Num: number;
};
tesNums = {
tes1Num: 1,
tes2Num: 1
};
注意点としては、上記の場合必ず全てのメンバ変数に対し値を設定しなければエラーになります。
any
anyは、すべての型に対応できるアノテーションです。
型の安全性を担保することが目的となるTypeScriptにとっては、あまり利用することが好ましくありませんが、既存のJavaScriptから段階的に移植などを行う際に致し方なく利用したりします。
null/undefined
変数に値が存在しない際に設定されます。
void
関数を実装する際に戻り値がないことを示します。
まとめ
今回はTypeScriptにおける型(アノテーション)の使い方を紹介しました。
いかがだったでしょうか？
ぜひこの機会に習得してみてください。
ここまで記事を読んでいただきありがとうございました♪
