前回の記事では TypeScriptのオブジェクト型 を解説しました。
オブジェクト型は
- APIレスポンス
- ユーザーデータ
- 設定データ
などを扱う際に非常に重要です。
今回の記事では 配列型（Array Type） を解説します。
この記事では次の内容を説明します。
- TypeScriptの配列型
- number[] の書き方
- Array の書き方
- オブジェクト配列
- readonly配列
配列はフロントエンド開発で頻繁に使われるため、しっかり理解しておきましょう。
配列型とは
JavaScriptでは次のような配列をよく使います。
const numbers = [1, 2, 3]この配列には
数値が入っています。
しかしJavaScriptでは次のようなコードも可能です。
numbers.push("hello")この場合、配列の中に
number
stringが混在することになります。
これは多くの場合 バグの原因になります。
TypeScriptでは配列に型を指定することで、この問題を防ぐことができます。
number[] の書き方
最も基本的な配列型は
型[]です。
例
let numbers: number[] = [1, 2, 3]この場合、numbersには
number型しか入れることができません。
例えば次のコードはエラーになります。
numbers.push("hello")TypeScriptは
string は number に代入できないと判断します。
Array の書き方
配列型にはもう一つ書き方があります。
let numbers: Array<number> = [1, 2, 3]この書き方は
ジェネリック配列と呼ばれます。
number[] と Array の違い
基本的には 同じ意味です。
number[]
Array<number>どちらも同じ型です。
実務では
number[]の方がよく使われます。
理由
書きやすい
読みやすいからです。
文字列配列
文字列の配列も同じように定義できます。
let names: string[] = ["Taro", "Hanako", "Jiro"]この場合
names.push("Saburo")はOKですが
names.push(100)はエラーになります。
オブジェクト配列
実務では オブジェクト配列 をよく使います。
例
type User = {
name: string
age: number
}
let users: User[] = [
{ name: "Taro", age: 20 },
{ name: "Hanako", age: 25 }
]この場合、配列の要素はすべて
User型になります。
例えば次のコードはエラーになります。
users.push({ name: "Ken" })理由
age がないからです。
型推論と配列
TypeScriptは配列でも型推論を行います。
例
let numbers = [1, 2, 3]この場合
number[]と推論されます。
つまり次のコードはエラーになります。
numbers.push("hello")readonly配列
TypeScriptでは 変更できない配列 を作ることもできます。
例
const numbers: readonly number[] = [1, 2, 3]この配列は
numbers.push(4)ができません。
readonly配列は
- 設定データ
- 定数リスト
- APIレスポンス
などで使われます。
配列メソッドと型
TypeScriptでは配列メソッドも型安全です。
例
let numbers: number[] = [1, 2, 3]
numbers.map(n => n * 2)この場合
n → numberと推論されます。
filter
numbers.filter(n => n > 1)reduce
numbers.reduce((a, b) => a + b)TypeScriptはこれらの型も自動で判断します。
Reactでの配列型
Reactでは配列型をよく使います。
例
type User = {
id: number
name: string
}
const [users, setUsers] = useState<User[]>([])この場合
usersはUser型の配列になります。
APIレスポンスの例
APIレスポンスでも配列型を使います。
例
type Post = {
id: number
title: string
}
let posts: Post[]配列型を使うメリット
TypeScriptで配列型を使うメリットは次の通りです。
データの整合性
誤った型を防げます。
IDE補完
配列要素の型が分かります。
バグ防止
意図しないデータを防げます。
まとめ
この記事では TypeScriptの配列型 を解説しました。
重要なポイント
- number[] で配列型を定義できる
- Array でも書ける
- オブジェクト配列がよく使われる
- readonly配列もある
配列型は
React
Vue
APIなどの開発で頻繁に使われるため、非常に重要な型です。
次の記事
次回は
Union型とLiteral型
を解説します。
Union型を使うことで
複数の型を扱えるようになります。
これはTypeScriptの型設計で非常に重要な概念です。
コメント