本文へスキップ
BecomeCoder

TypeScriptコース · 第1章 TypeScriptをはじめる · レッスン3

配列とタプル ― 複数の値をまとめる

ブラウザで完結

導入

同じ種類の値をいくつも並べて持つのが配列、決まった数・決まった型の値を順番に持つのがタプルです。それぞれ型の書き方があります。

説明

配列は「要素の型 + []」で表します。number[] は「数値の配列」です。

let scores: number[] = [80, 95, 70];
let names: string[] = ["太郎", "花子"];
console.log(scores);
console.log(names.length, "人");

配列に別の型の値を混ぜようとするとエラーになります。

let scores: number[] = [80, "満点"];  // エラー: string は入れられない

タプルは、位置ごとに型が決まった配列です。[string, number] は「1つ目は文字列、2つ目は数値」という意味です。

let user: [string, number] = ["太郎", 25];
console.log(user[0], "は", user[1], "歳");

やってみよう

scorespush で数値を足して(scores.push(60);)、合計や個数がどう変わるか console.log(scores) で確かめましょう。

演習

fruits という string[] 型の配列に "りんご""みかん" を入れ、console.log() で配列全体を表示してください。

ヒント1を見る

let fruits: string[] = ["りんご", "みかん"]; と書きます。

実際に動かしてみよう

下のエディタにTypeScriptを書いて「実行」を押すと、その場でJavaScriptに変換してブラウザ内で実行し、出力が表示されます。本文の例をそのまま試したり、型注釈を書き換えたりしてみましょう(console.log の結果が下に出ます。初回だけコンパイラの読み込みに少し時間がかかります)。

TypeScript — ブラウザ内で実行

TypeScriptコンパイラ(同梱)でTS→JSに変換してから実行する学習用環境を読み込みます(初回のみコンパイラの読み込みに少し時間がかかります)。
スクロールして表示された時点でも自動で読み込まれます。