前回の記事では interface と type の違い を解説しました。
TypeScriptでは
- interface
- type
を使ってデータ構造を定義できます。
しかし実務では次のような問題が発生します。
似た型が大量に増える例えば
- User配列
- Product配列
- Post配列
などです。
この問題を解決する仕組みが Generics（ジェネリクス） です。
この記事では次の内容を解説します。
- Genericsとは
- Genericsの基本
- 配列での利用
- 関数での利用
- 実務での利用
Genericsとは
Genericsとは
型をパラメータとして扱う仕組みです。
通常の関数を見てみましょう。
“`ts id=”g5m9e0″
function identity(value: string): string {
return value
}
この関数はstring
しか扱えません。
もし数値を扱いたい場合ts id=”n2g4f5″
function identityNumber(value: number): number {
return value
}
という別の関数を作る必要があります。
これは非常に非効率です。
Genericsを使うと、これを **1つの関数で実現できます。**
---
# Genericsの基本
Genericsは次のように書きます。ts id=”u7dfgx”
function identity(value: T): T {
return value
}
ここでのid=”xqg4pc”
T
は **型パラメータ**です。
この関数は次のように使えます。ts id=”l9h7y0″
identity(“hello”)
identity(10)
identity(true)
つまりstring
number
boolean
すべて同じ関数で扱えます。
---
# Genericsのイメージ
Genericsは型のテンプレート
のようなものです。
例ts id=”kp4tci”
function print(value: T): T {
return value
}
Tの部分に
* string
* number
* object
などが入ります。
---
# 配列とGenerics
Genericsは配列でも使われています。
例えばts id=”hz7c08″
Array
これはid=”de3w3n”
number型配列
です。
実はts id=”cf3y26″
number[]
も同じ意味です。
---
# Generics関数の実用例
Genericsは次のような関数でよく使われます。ts id=”7i8kn7″
function first(array: T[]): T {
return array[0]
}
使用例ts id=”hmp5x9″
first([1,2,3])
first([“A”,”B”,”C”])
この関数は
* number配列
* string配列
どちらでも使えます。
---
# Genericsとオブジェクト
Genericsはオブジェクト型でも使えます。
例ts id=”vcz7ah”
function wrap(value: T) {
return { value }
}
使用例ts id=”y3m4u2″
wrap(10)
wrap(“hello”)
結果id=”s1w7nq”
{ value: 10 }
{ value: “hello” }
になります。
---
# Genericsの実務例
実務では次のような場面で使われます。
---
## APIレスポンス
例ts id=”6f3mne”
type ApiResponse = {
data: T
status: number
}
使用ts id=”s0ghp8″
type UserResponse = ApiResponse
---
## React Hooks
ReactでもGenericsが使われています。ts id=”5n0q6t”
useState(0)
これはid=”9o0v27″
stateの型
を指定しています。
---
## データ処理関数ts id=”w9my3c”
function mapArray(items: T[]): T[] {
return items
}
---
# Genericsのメリット
Genericsのメリットは次の通りです。
---
## 再利用性
同じ関数を複数の型で使えます。
---
## 型安全
anyを使わずに柔軟な型を作れます。
---
## コード削減
似た関数を何個も作る必要がありません。
---
# Genericsの注意点
Genericsは便利ですが、使いすぎるとコードが複雑
になります。
基本は必要な部分だけ使う
ことが重要です。
---
# まとめ
この記事では **TypeScriptのGenerics** を解説しました。
重要なポイント
* Genericsは型パラメータ
* 型を再利用できる
* 関数や配列で使われる
* API設計で重要
GenericsはTypeScriptの中でも非常に強力な機能です。
理解するとコードの再利用性
“`
が大きく向上します。
次の記事
次回は
TypeScriptとReact
を解説します。
ReactではTypeScriptが非常によく使われており、
- props型
- state型
- event型
などを定義します。
コメント