Quantcast
Viewing all articles
Browse latest Browse all 757

【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)

Viewing all articles
Browse latest Browse all 757

Trending Articles