【TypeScript初心者】タプルを理解する

はじめに

「読んで学ぶTypeScript」をちょっとずつ読み進めます！
今回は、タプルについてです！

---

コーディングに慣れていないので、ところどころ用語を調べて記載しながら書きますmm
そのため、初心者の方が理解するには、助けになるかもしれません

---

既存の型だけでは不便なことがある

TypeScriptには、stringやnumberなどのプリミティブ型以外に、それらを組み合わせてより複雑なデータを表現する機能があるらしいです。

今回はそれらの一つであるタプルについて学びます

タプル

• TypeScript で提供されている特殊な配列の型の一つ
• 複数の異なる型の要素を一つの配列で管理することができる
  • 異なる型のデータをまとめて一つの単位として扱いたい時に使う

配列とタプルの違い

// 配列の例 - 配列として定義（推論される型 (string | number)[] ）
const scoreArray = ["Taro", 100];

// 0番目のデータ（名前）を取り出す
const name = scoreArray[0]; 

console.log(name.toUpperCase());
// nameがnumber（数値）である可能性があるため、TypeScriptがコンパイルエラーを出す
// 実行時にはTypeErrorとなる可能性があるため、TypeScriptが事前に防いでくれる

タプルの書き方は、[]を書いて中に型を書くだけでOK

// タプルの例
const scoreTuple: [string, number] = ["Taro", 100];
//                 ^^0番目  ^^1番目   

// 0番目のデータ（名前）を取り出す
const name = scoreTuple[0];

console.log(name.toUpperCase()); 
// [0]がstringだと、確定しているのでエラーにならない

タプルは、配列の『何番目に何の型が入るか』を固定できるので、型安全性が高い

---

• また、タプルにはラベルをつけることができる
  • 各型の使い道がわかりやすくなる
• ラベルを使って要素にアクセスすることはできない

ラベルをつける場合、「全ての要素につける」 か 「全くつけない」 にしないと、コードの可読性が損なわれる

// タプル - ラベルの例
const scoreTuple: [name: string, level: number] = ["Taro", 100];
//                  ^^ラベル  　　　^^ラベル   

scoreTuple.name; // Error ラベルを使って要素にアクセスすることはできない

タプルを受けた変数ができること

中の型が持つプロパティ、メソッドを使用できる

型が持っているプロパティ、メソッドとは？

• プロパティ：値に関する情報や属性を保持する変数
• メソッド：値を操作したり、特定の処理を実行したりするもの

実際の型のプロパティやメソッドの例が以下です。

• string型の場合
  • プロパティ例：length
    • 文字列がいくつの文字で構成されているかを示す長さ（数値）
• number型の場合
  • メソッド例：toString()
    • 数値を文字列に変換するメソッド
    • 引数に何進数かを指定すると、2進数や16進数などの表記に変換できる

// 例
const scoreTuple: [string, number] = ["Taro", 100];

list[0].length; // `[0]`には string のプロパティ・メソッドが使用できる
list[1].toString(); // `[1]`には number のプロパティ・メソッドが使用できる

タプルが使える場面

時間のかかる処理を並列で行うとき（Promise.all()を使うとき）に、結果の整合性を保証するために使える

// 時間のかかる処理を並列で行う (Promise.all()を使う)

// 処理A（5秒かかる） -> Promise<number>
const takes5Seconds = (): Promise<number> => new Promise(resolve => {
  setTimeout(() => resolve(2025), 5000);
});

// 処理B（3秒かかる） -> Promise<string>
const takes3Seconds = (): Promise<string> => new Promise(resolve => {
  setTimeout(() => resolve("結果A: 3秒の処理が完了"), 3000);
});


// Promise.all()で二つの処理を並列で行う (最長時間の5秒で完了)
const tuple: [string, number] = await Promise.all([
  takes5Seconds(), // 0番目の要素
  takes3Seconds(), // 1番目の要素
]);

const resultA: string = tuple[0]; // 常に takes5Seconds() の結果
const resultB: number = tuple[1]; // 常に takes3Seconds() の結果

タプルの 『何番目に何の型が入るか』 を固定できる特徴が発揮されることで、便利な点があります

• 処理速度によって、処理結果の格納される順番が変わらない
  • （処理Bが処理Aより先に完了しても、配列の0番目には、必ず処理Aの結果が格納される）
• 戻り値の静的な型安全性が確保され、実行時のエラーを防ぐ

さいごに

次は、列挙型やユニオン型・インターセクション型について読んでみようと思います！

アドカレ2025が開催中！

今年もアドカレ開催中です
面白そうなカレンダーがたくさんです！

特設サイト ↓

ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓

参考