devlog

フロントエンドエンジニアの技術ブログ

TypeScriptのTuple型

  • 配列のような感じだけど、別物。
  • JavaScriptなら一括に配列として扱われている
let data1: [string, number] = ['taro', 20]; // これはオッケー
let data2: [string, number] = [20, 'taro']; // これはエラー
let data3: [string, number] = ['taro', 20, 40]; // これもエラー
let data4: [string, number] = ['taro']; // これもエラー

変数data2から、Tuple型はアノテーションで定義した順番で値が入っていないとダメな型って事が分かる。 変数data3data4から、アノテーションで定義した個数より値が少なくても、多くてもダメ。

値を取得する時は、このようにインデックスを使って得る事ができる。ここは配列と一緒。

let data1: [string, number] = ['taro', 20];

let data1_1 = data1[0]
let data1_2 = data1[1]

console.log(data1_1) // 'taro'
console.log(data1_2) // 20

型推論されるから、data1[1]に対してString.prototype.split()を行うとコンパイルエラーが発生する。 data1[1]型推論: numberだから、Stringオブジェクトのメソッドは使用できない。

let data1: [string, number] = ['taro', 20];

let data1_1 = data1[0].split('a')
console.log(data1_1) // ["t", "ro"]

// これはコンパイルエラー
// プロパティ 'split'はタイプ 'number'に存在しません。
let data1_2 = data1[1].split('a')

Tuple型は、予め決まった長さかつ、配列のインデックスに対応する型が決まっている配列みたいな型って認識で良いのだろうか。 今までJavaScriptしか触ってこなかったのでTuple型っていうのが、いまいちピンと来ない。 「Union Typesの配列じゃダメなの?」と思う部分もあるのだが、きっとインデックスに対して型が紐付いている所が便利なんだろうと思う。

@ 2019 devlog