【TypeScript入門】配列とタプルについて簡単にまとめてみた

はじめに

TypeScriptで配列とタプルを扱い方を簡単にまとめました。

配列の要素として持つ値の型を定義できる

  // シンプルな配列の型定義
  const colors: string[] = ['red', 'blue']
  colors.push('yellow') // OK
  // colors.push(123) // コンパイルエラー
  console.log('sample:', colors)

配列定義方法:T[]とArrayは同義

  const even: Array<number> = [2, 4, 6]
  even.push(8) // OK
  // even.push("100") // コンパイルエラー
  console.log('sample:', even)

合併型も使える

• 特別な理由がない限り使わないほうがよい
  • for文等で値を取得する際に値の型に気をつけないといけないから

  // 合併型を用いた配列の型定義
  const ids: (string | number)[] = ['ABC', 123]
  ids.push('DEF') // OK
  ids.push(456) // OK
  console.log('sample:', ids)

配列の型推論

• アノテーションしなくても型推論される

 // 型推論された配列の生成
  const generateSomeArray = () => {
    const _someArray = [] // any[] 　　　　　*　変数名の_は、内部だけで扱われるという意味
    _someArray.push(123) // number[]として推論される
    _someArray.push('ABC') // (string | number)[]として推論される
    return _someArray
  }

  const someArray = generateSomeArray()
  someArray.push(444)
  // someArray.push(true) // generateSomeArray()は(string | number)[]の配列を返すと推論されるので、booleanは追加されない
  console.log('sample:', someArray)

タプルについて〜より厳格な配列〜

• タプルは配列の各要素の数と型を定義できる

  // 一般的なタプルの型定義
  const response: [number, string] = [200, 'OK']
  // response = [400, "Bad Request", "Email parameter is missing"] // 定義された要素数と合わない
  // response = ["400", "Bad Request"] // numberにstringを代入できない
  console.log('sample:', response)

• 可変長（レストパラメーター）も使える

 // 可変長引数を使ったタプル
  const restParameters: [string, ...string[]] = ['ABC', 'DEF', 'GHI']
  restParameters.push('JKL')
  console.log('sample:', restParameters)

イミュータブルな配列

• Javascriptの配列はconstで宣言してもミュータブル（書き換え可）

 // Javascriptの配列
      const commands1: string[] = ['git add', 'git commit', 'git push']
      commands1.push("git fetch") // 追加OK
      commands1[2] = "git pull" // 代入OK
      console.log('sample:', commands1)

• readonlyでイミュータブル（書き換え不可）な配列/タプルを作れる

    // 読み取り専用の配列
    const commands2: readonly string[] = ['git add', 'git commit', 'git push']
    // commands2.push("git fetch") // 追加不可
    // commands2[2] = "git pull" // 代入不可
    console.log('sample:', commands2)

• readonlyの別の書き方

    // 読み取り専用の定義方法
    const immutableNumbers: ReadonlyArray<number> = [1, 2, 3]
    // immutableNumbers.push(4) // NG
    console.log('sample:', immutableNumbers)

    const immutableNames: Readonly<string[]> = ['Tarou', 'Kazu', 'Yuto']
    // immutableNames.push("Takashi") // NG
    console.log('sample:', immutableNames)