👀
Array型とTuple型【個人学習まとめ】
Array型
他のプログラミング言語同様の配列。
これまで同様に、型を指定しなければ型推論する。
const suuti = [1, 2, 3, 4, 5];//number[]型(型推論)
const kojinNames = ["太郎", "次郎", "三郎"];//string[]型(型推論)
指定された型以外の値を配列に格納しようとするとエラー。
suuti.push("6");
型注釈を行うには変数名:型名[]
とする。
let fruits: string[] //型注釈によるArray型の指定
fruits = ["Apple", "Grape", "Banana", "Peach", "pear"];
console.log(fruits[0].toUpperCase()); // → APPLE
Tuple型
TypeScriptには、JavaScripには存在しないTuple(タプル)
という型が存在する。
固定された長さを持ち、各要素に対して特定の型が指定できる。
コンパイル時には、JavaScriptの配列(Array
)に変換される。
文法は変数名:[型名1,型名2...]
次の例は、loginStatus
の0'番目が
sting型、
1番目が
boolean`型のTuple型。
let loginStatus: [string, boolean] = ["ログイン名", true];
変数loginStatus
はTuple
型で定義されていて、2つの要素を持つことが指定されている。
3つ目の要素としてログイン回数の数値を代入しようとすると型の不一致によるエラーとなる。
Tuple
型に存在しないインデックスにアクセスしようとするとエラー。
ラベル付きのTuple型
Tuple
にラベルを付与することによって、各要素がどんなデータを表しているかを直接確認できるようになる。
もちろん、指定している型と異なる型を代入しようとするとエラーになる。
type ShingoColor = [red: number, green: number, blue: string];
const shingo: ShingoColor = [1, 2, 'three'];
const shingo2: ShingoColor = [1, 2, 3];
ラベル末尾に?
を付けることによって、該当の要素をオプショナル(任意)として宣言可能。
さらに、スプレッド構文...
を使って、複数の要素を含むことが可能。
type TupleSample = [first: number, second?: string, ...rest: any[]];
let data1: Foo = [1]; //first要素のみの配列を代入
let data2: Foo = [1, "hello"]; //firstとsecond要素のみを代入
let data3: Foo = [1, "hello", true, 10, "world"]; //first,second要素の他に、...restに複数の要素を割り当て
Discussion