解説
「ジェネリクス」（総称型）は、静的型付け言語において、個別の型ではなく汎用的な型として書くための仕組みです。
型の異なる複数の関数やクラスなどを作る必要がなくなり、コードをシンプルに保つことができます。
サンプル
「ジェネリクス」のサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「ジェネリクス」のサンプル</title>
<style>
body { font-size: 2em; line-height: 150%; }
</style>
</head>
<body>
<h2>コード</h2>
<pre id="code-ts"></pre>
<hr>
<h2>実行結果</h2>
<pre id="output"></pre>
<script type="TypeScript" id="ts">
// 型を直接書くと、別の型の場合に型チェックに失敗する
function packNum(v1: number, v2: number): number[] {
return [v1, v2];
}
print("引数が数値と数値: " + packNum(1, 2));
print("引数が文字列と文字列: " + packNum("a", "b"));
print("--");
// ジェネリクス使うことで解決
function pack<T>(v1: T, v2: T): T[] {
return [v1, v2];
}
print("引数が数値と数値: " + pack<number>(1, 2));
print("引数が文字列と文字列: " + pack<string>("a", "b"));
print("引数が真偽値と真偽値: " + pack<boolean>(true, false));
// 引数の型が一致していないとエラーが出る
print("引数が数値と文字列: " + pack<number>(1, "b"));
print("--");
print("型推論を使い、型引数<～>を省略");
print("引数が数値と数値: " + pack(1, 2));
print("引数が文字列と文字列: " + pack("a", "b"));
print("引数が真偽値と真偽値: " + pack(true, false));
// 引数の型が一致していないとエラーが出る
print("引数が数値と文字列: " + pack(1, "b"));
print("--");
// 型の種類を絞る 数値か文字列でないとエラーが出る
function pack2<T extends number|string>(v1: T, v2: T): T[] {
return [v1, v2];
}
print("引数が数値と数値: " + pack2<number>(1, 2));
print("引数が文字列と文字列: " + pack2<string>("a", "b"));
print("引数が真偽値と真偽値: " + pack2<boolean>(true, false));
</script>
<script src="https://cdn.jsdelivr.net/npm/typescript@5.1.6/lib/typescript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/esbuild-wasm@0.19.12/lib/browser.min.js"></script>
<script type="module">
import { init } from './ts_check.js';
init('https://cdn.jsdelivr.net/npm/esbuild-wasm@0.19.12/esbuild.wasm')
</script>
</body>
</html>
出力結果
コード
// 型を直接書くと、別の型の場合に型チェックに失敗する
function packNum(v1: number, v2: number): number[] {
return [v1, v2];
}
print("引数が数値と数値: " + packNum(1, 2));
print("引数が文字列と文字列: " + packNum("a", "b"));
// [ERROR] 6:32 - Argument of type 'string' is not assignable to parameter of type 'number'.
print("--");
// ジェネリクス使うことで解決
function pack<T>(v1: T, v2: T): T[] {
return [v1, v2];
}
print("引数が数値と数値: " + pack<number>(1, 2));
print("引数が文字列と文字列: " + pack<string>("a", "b"));
print("引数が真偽値と真偽値: " + pack<boolean>(true, false));
// 引数の型が一致していないとエラーが出る
print("引数が数値と文字列: " + pack<number>(1, "b"));
// [ERROR] 19:39 - Argument of type 'string' is not assignable to parameter of type 'number'.
print("--");
print("型推論を使い、型引数<～>を省略");
print("引数が数値と数値: " + pack(1, 2));
print("引数が文字列と文字列: " + pack("a", "b"));
print("引数が真偽値と真偽値: " + pack(true, false));
// 引数の型が一致していないとエラーが出る
print("引数が数値と文字列: " + pack(1, "b"));
// [ERROR] 29:31 - Argument of type 'string' is not assignable to parameter of type 'number'.
print("--");
// 型の種類を絞る 数値か文字列でないとエラーが出る
function pack2<T extends number|string>(v1: T, v2: T): T[] {
return [v1, v2];
}
print("引数が数値と数値: " + pack2<number>(1, 2));
print("引数が文字列と文字列: " + pack2<string>("a", "b"));
print("引数が真偽値と真偽値: " + pack2<boolean>(true, false));
// [ERROR] 39:30 - Type 'boolean' does not satisfy the constraint 'string | number'.
実行結果
引数が数値と数値: 1,2
引数が文字列と文字列: a,b
--
引数が数値と数値: 1,2
引数が文字列と文字列: a,b
引数が真偽値と真偽値: true,false
引数が数値と文字列: 1,b
--
型推論を使い、型引数<～>を省略
引数が数値と数値: 1,2
引数が文字列と文字列: a,b
引数が真偽値と真偽値: true,false
引数が数値と文字列: 1,b
--
引数が数値と数値: 1,2
引数が文字列と文字列: a,b
引数が真偽値と真偽値: true,false
フィードバックお待ちしております！
ご感想、解説してほしい用語、解説内容のアドバイスなどございましたら、FacebookやX（旧Twitter）などでお気軽に編集部までお寄せください。よろしくお願いいたします。
