👀

Array型とTuple型【個人学習まとめ】

2024/10/22に公開

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...]
次の例は、loginStatus0'番目がsting型、1番目がboolean`型のTuple型。

let loginStatus: [string, boolean] = ["ログイン名", true]; 

変数loginStatusTuple型で定義されていて、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