📘 TypeScriptのジェネリクス入門: 型の柔軟性を高める方法

今回はTypeScriptのジェネリクスについて学習しましょう！ジェネリクスとは、型引数を受け取る関数を作る機能のことです。

以前の記事で、型引数についてまとめています。 https://pwe-tech.com/basic-ts4/ site preview image

関数の型引数

関数<型引数>(引数) の形

function repeat<T>(element: T, length) {
    const response: T[] = []
    for(let i = 0; i < length; i++) {
        response.push(element)
    }
    return response
}

fuction関数式

const repeat = function<T>(element: T, length): T[] {
    const response: T[] = []
    for(let i = 0; i < length; i++) {
        response.push(element)
    }
    return response
}

アロー関数式

const repeat = <T>(element: T, length): T[] => {
    const response: T[] = []
    for(let i = 0; i < length; i++) {
        response.push(element)
    }
    return response
}

メソッド記法

const util = {
    repeat<T>(element: T, length): T[] {
        const response: T[] = []
        for (let i = 0; i < length; i++) {
            response.push(element)
        }
        return response
    }
}

関数をコールする時は型引数を省略可能

省略した場合は、引数の値から型推論される。

const util = {
    repeat<T>(element: T, length): T[] {
        const response: T[] = []
        for (let i = 0; i < length; i++) {
            response.push(element)
        }
        return response
    }
}
util.repeat("aa", 10)

型引数が複数

const getList = <First, Second>(el1: First, el2: Second): [First, Second] => [el1, el2]
const list = getList<string, number>('aaa', 12)

extends 部分型引数

const repeat = <T extends {name: string}>(element: T, length: number): T[] => {
    const result: T[] = []
    for(let i = 0; i < length; i++) {
        result.push(element)
    }
    return result
}

type User = {
    name: string
    age: number
}
repeat<User>({name: 'taro', age: 12}, 10)