TypeScriptで配列の中身のデータ型を指定する方法

TypeScriptで配列の中身の数やそのデータ型を指定したかったのですが、ググり方がダメなのかわかるまで大変でしたので記事にします

結論

const food: [string, string, string, number] = [
    "吉野家", "牛丼", "並盛", 352
];

数が多くても少なくてもダメですし、型を間違えればもちろんエラーが出ます。

エラーを出してみる

型を変えてみる

const food: [string, string, string, number] = [
    "吉野家", "牛丼", "並盛", "352円"
];

// TS2322: Type 'string' is not assignable to type 'number'.

中身を減らしてみる

const food: [string, string, string, number] = [
    "吉野家", "牛丼", 352
];

// TS2322: Type '[string, string, string, number]' is not assignable to type '[string, string, number]'.  Source has 3 element(s) but target requires 4.

活用方法

普通の配列指定

const food: Array<any> = [
    "吉野家", "牛丼", "並盛", 352
];

これでも指定できるんですけど混在していて厳密に型指定しておきたい場合は不便ですよね。
例えば以下のようなループで使うことを前提とした配列。

const food: Array<[string, string, string, number]> = [
    ["吉野家", "牛丼", "並盛", 352],
    ["松屋", "牛めし", "並盛", 320],
    ["すき家", "とろ〜り3種のチーズ牛丼", "大盛", 630],
];

こういう厳密性が大切な配列を定義したいときなんかは非常に頼りがいがあります。

※2021/08/01時点での牛丼情報なので時期によっては価格が違う可能性があります。

お付き合いいただきありがとうございました！
この記事が何かお力になれたらうれしいです。