【解説】TypeScriptの型定義をまとめてみた【初心者向け】 
【応用】TypeScriptで使えるその他の型定義【まとめてみた】 目次
【解説】TypeScriptのジェネリクスの使い方【型を引数に】
TypeScriptのジェネリクスの使い方を、下記の順に解説していきます。
・ジェネリクスとは？
・基本的な使い方
・＜＞にいれる文字
・extends（型引数に制約を設定）
・Typeエイリアスに使う
・インターフェースに使う
・クラスに使う
・Promiseに使う
・デフォルトの型パラメーター
順に見ていきましょう。
ジェネリクスとは型を引数で受け取れるものとなります。
関数、クラス、インターフェースで使うことが可能です。
これにより再利用性が高まり、型安全性が確保されます。
関数名と引数の間に＜＞を記述します。
そこに好きな文字をいれます。
ただ基本体には大文字のT（typeを示すような）を入れることが多いです。
この<T>というのが型の引数となり、関数を呼び出すときに<number>のように記述すれば型を受け取る事が可能です。
function 関数名<T>(引数: T): T {
}
関数名<number>(引数); // number型を指定
関数名<string>(引数); // string型を指定ちなみに複数記述することが可能です。
function 関数名<T, U>(引数: T, 引数: U): T {
}下記が例としたコードです↓
function testFunc<T>(a: T): T {
return a;
}
testFunc<number>(5); // number型を指定
testFunc<string>('テストです'); // string型を指定こんな感じでジェネリクスは再利用性が高まるのでかなり便利。
＜＞にいれる文字はどんなアルファベットでも良いですが、基本的には下記を使うことが多いです。
- T ⇒ Typeを示す
- U ⇒ 2,3番目に使うことが多い
- S ⇒ 2,3番目に使うことが多い
- E ⇒ Element
- K ⇒ Key
- V ⇒ Value
- N ⇒ Number
実は型の引数に条件をつける方法があります。
それが「extends」と記述することです。
<T, U extends number>上記のようにすると、Uはnumber型という制約がつかれます。
例としたコードがこちら↓
function testFunc<T, U extends number>(a: T, b: U): string {
return `${a}さんは、${b}歳です。`;
}
console.log(testFunc<string,number>('山田さん', 20)); // 山田さんさんは、20歳です。
console.log(testFunc('田中さん', 24)); // 省略しても可能 田中さんさんは、24歳です。extendsを使うことで、型引数に入る型を正確にすることができます。
ジェネリクスはTypeエイリアスに使うことも可能です。
型定義時に引数を用いておき、使うときに指定します。
type Fruit<T> = {
name: T;
size: T;
num: number;
}
const orange: Fruit<string> = {
name: 'みかん',
size: '小さめ',
num: 3,
}インターフェースにもジェネリクスを使うことが可能です。
型定義時に引数を用いておき、使うときに指定します。
interface Fruit<T> {
name: T;
size: T;
num: number;
}
const orange: Fruit<string> = {
name: 'みかん',
size: '小さめ',
num: 3,
}
【解説】TypeScriptのインターフェースの使い方【interface】 クラスにもジェネリクスを使うことが可能です。
class Fruit<T, U> {
constructor(public name: T, public num: U) {
}
}
const orange = new Fruit<string, number>('みかん', 5);
console.log(orange); // Fruit { name: 'みかん', num: 5 }
【解説】JavaScriptのクラスの使い方【フィールド／static／extends／super】 
【解説】TypeScriptで使うクラスの型【まとめてみた】 Promiseにもジェネリクスを使うことが可能です。
function testFunc<T>(value: T): Promise<T> {
return new Promise((resolve) => {
setTimeout(() => resolve(value), 1000);
});
}
// 使用例
testFunc<number>(5).then((result) => console.log(result)); // 5
testFunc<string>("テストです").then((result) => console.log(result)); // "テストです"
【解説】JavaScriptのPromise｜async／awaitの使い方 ジェネリクスの型引数には、デフォルトの型を指定することができます。
下記のようにした場合、デフォルトではTにstringの型が入ってくれます。
interface Fruit<T = string> {
name: T;
size: T;
num: number;
}
let orange: Fruit;【解説】TypeScriptのジェネリクスの使い方【型を引数に】：まとめ
- ジェネリクスとは型を引数で受け取れるもの
- 関数名と引数の間に＜＞を記述する
- 「extends」を使えば型引数に制約をつけれる
- ジェネリクスはTypeエイリアスに使うことも可能
- ジェネリクスはインターフェースに使うことも可能
- ジェネリクスはクラスに使うことも可能
- ジェネリクスはPromiseに使うことも可能
- デフォルトの型を指定することができる
ジェネリクスを使う時はためしてみてね！
