TypeScript型入門！応用力の高いジェネリクスを使いこなそう

前回の続きです。

今回はジェネリクスに焦点を当てて話をします。

Generics（ジェネリクス）はTypeScript特有の型システムではなく、C#やJavaといった静的型付け言語でも実装されています。

ジェネリクスを理解すると一気にTypeScriptの活用の幅が広がるので、この機会にぜひ覚えてみましょう！

TypeScript型入門｜ジェネリクスとは

ジェネリクスを一言で表すと「型の抽象化」です。

いや、さすがに、この一言じゃ伝わりませんね。笑

具体例を示します。以下のような型定義を持つ関数が存在していたとしましょう。

const showMessage = (message: string): string => {
  return message
}

const showIndex = (index: number): number => {
  return index
}

上記のように、「同じロジックで型のみ異なる」コードを抽象化することができます。

const genericsSample<T> = (arg: T): T => {
  return arg
}

genericsSample<string>("WooHoo!") // showMessage()と同じ
genericsSample<number>(555) // showIndex()と同じ

それでは実際に、Reactで書くコードを例にして、ジェネリクスの使い方を学んでみましょう。

TypeScript型入門｜ジェネリクスの使い方

Reactでジェネリクスを活用するとしたら、以下のような例が挙げられます。

const createStringChangeEventCallback = (update: Dispatch<SetStateAction<string>>) => {
  return useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    update(event.target.value)
  },[update])
}

const createNumberChangeEventCallback = (update: Dispatch<SetStateAction<number>>) => {
  return useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    if (/^[0-9]+$/.test(event.target.value)) {
      update(Number(event.target.value))
    }
  }, [update])
}

// 上記の2関数を1つにまとめる

const createChangeEventCallback = (update: Dispatch<SetStateAction<T>>) => {
  return useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    if (typeof event.target.value === number) {
      if (/^[0-9]+$/.test(event.target.value)) {
        update(Number(event.target.value))
      }
    } else {
        update(event.target.value)
    }
  }, [update])
}

// 使ってみる
const [name, setName] = useState<string>("");
const [age, setAge] = useState<number>(0);
const inputName = createChangeEventCallback<string>(setName)
const inputAge = createChangeEventCallback<number>(setAge)

内部にNumberで変換するかどうかのロジックがあるので、若干無理矢理感がありますが。。

型が異なるだけで複数用意していた関数が1つにまとまるのは嬉しいですね！

ぜひ活用してみてください！

ABOUT ME

稲垣 貴映

サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。