【TypeScript】ジェネリクス (generics)の利便性を体感する

ジェネリクスって何？

型の安全性とコードの共通化を両立するために利用されます。
簡単に言い換えると、型を変数として扱えるようにすることと近いです。
本記事では実際にアプリケーション開発で使えそうな具体例を挙げます

特定の値が存在するか確かめる関数

ReactやNext.jsで活躍すると思います。
特定の値がNullかundefinedの時に、trueを返す関数です。
判定したい値は型が様々（APIのレスポンスデータだったり純粋なstringだったり）かと思いますが、ジェネリクス を使うことで型の分だけ関数を記述することなく済みます。
Nullishについて↓

isNullish.ts

function isNullish<Type>(value: Type | null | undefined) {
	if (value === undefined || value === null) {
		return true;
	}
	return false;
}

ジェネリクスを使って型を変数のように扱っています。（<type>のところです。文字列は任意ですがTが多いです）
上記ですと、valueにはどんな型を入れても事前に型注釈していれば型安全です。(以下の例では型推論を使っているので注釈はしていません)

実際には以下のように利用できます。

some.tsx

export default function page() {
    const strData = "こんちは";
    	return (
    		<div>
                //利用箇所
    			{!isNullish(strData) && (
    				<p className="text-black">{strData}値は存在したよ</p>
    			)}
    		</div>
    	);
}

some.tsx

export default function page() {
    const data = { hello: "Hello!" };
    	return (
    		<div>
                //利用箇所
    			{!isNullish(data) && (
    				<p className="text-black">{data.hello}値は存在したよ</p>
    			)}
    		</div>
    	);
}

このようにisNullish関数を定義しておけば、APIのレスポンスデータを確かめる時からUI内のデータの確認の時までこれ一本で済みコードがスッキリします。