ついに!Generics💫

💡 柔らかい!タイプが保証されていて、リピート可能なGenerics!!
ジェニーリックなに?
宣言ではなく作成時にタイプを指定して、タイプだけでなく異なるタイプのメソッドを使用できるようにします.

Genericとはデータ型の一般化(要約)

タイプ情報は動的に決定される

同じルールが複数のタイプに適用できるため

タイプコード作成時に発生する可能性のある重複コードを消去できる

C#とJava同じ言語で、再利用可能な素子を製造する際によく使われるジェネリック!!

つまり、単一のタイプの要素ではなく、様々なタイプの要素を記述することができる.

ジェニーリックにより、様々なタイプの素子や独自のタイプを使用することができる.

Generic基本構文
✔¥基本コード

// text라는 파라미터에 값을 넘겨 받아 text를 반환하는 함수
const getText = (text) => {
  return text;
}

// 파라미터에 어떤 값을 넘겨주더라도 그대로 반환된다.
getText('april'); // 'april'
getText(20); // 10
getText(true); // true

✔市genericコード

// 제네릭 기본 문법이 적용된 함수
const getText = <T>(text: T): T => {
  return text;
}

// 함수를 호출할 때, 함수 안에서 사용할 타입을 넘겨줄 수 있다
getText<string>('april'); // 'april'
getText<number>(20); // 10
getText<boolean>(true); // true

✔¥JENICコードを2つ以上使用

// 두 개의 제네릭이 적용된 함수
const getUserInfo = <T, K>(name: T, age: K): [T, K] => {
	return [name, age];
};

// 함수를 호출할 때, 함수 안에서 사용할 타입을 넘겨줄 수 있다
getUserInfo('april', 20); 

なぜジェニーンリックを使うの?🤔
パラメータの種類が多様な場合はanyanyタイプはタイプチェックをしないことで問題が発生する
JENICを使用していないコード

const getText = (text: any): any => {
  return text;
} 

バイナリコード
まず、関数の名前の後に、<T>というコードを追加し、関数のパラメータと戻り値にタイプTを追加します.
関数を呼び出すときにスキップされるタイプについては、タイプスクリプトを推定できます.
💡 したがって、関数入力値のタイプと出力値のタイプが同じであることを検証できます.

const getText = <T>(text: T): T => {
  return text;
} 

Genericサンプルコード
配列を作成する関数であるジェニーンリックのサンプルコード.
✔市場市場
数値配列の関数と文字配列の関数を作成します.😳
重複するコードがたくさんあります...😬😮‍💨

const makeNumberArray = (defaultValue: number, size: number): number[] => {
	const arr: number[] = [];
	for (let i = 0; i < size; i++) {
		arr.push(defaultValue);
	}
	return arr;
};

const makeStringArray = (defaultValue: string, size: number): string[] => {
	const arr: string[] = [];
	for (let i = 0; i < size; i++) {
		arr.push(defaultValue);
	}
	return arr;
};

const arr1 = makeNumberArray(1, 10);
const arr2 = makeStringArray('empty', 10); 

✔genericを使用してコードをパーティション化

const makeArray = <T>(defaultValue: T, size: number): T[] => {
	const arr: T[] = [];
	for (let i = 0; i < size; i++) {
		arr.push(defaultValue);
	}
	return arr;
};

const arr1 = makeArray<number>(1, 10);
const arr2 = makeArray<string>('empty', 5);

// makeArray 함수의 첫 번째 파라미터를 알면 타입 T도 알 수 있기 때문에, 
// 호출 시 타입 T의 정보를 명시적으로 전달하지 않아도 된다.
const arr3 = makeArray(1, 10);
const arr4 = makeArray(1, 10);

extendsキーワードでジェニーンリックタイプを制限
ライブラリ内のAPI(レスポンスなど)は、入力可能な値の範囲を制限します.
たとえば、リアクター全体のアトリビュート値はオブジェクトタイプのみを許可します.
このため、タイプスクリプトのGenericでは、タイプタイプを制限する機能が提供されます.
勘定科目のサンプル・コード

// 제네릭 T 타입을 number | string에 할당 가능한 타입으로 제한
const identity = <T extends number>(p1: T): T => {
	return p1;
};

identity(1);
identity('a');
identity([]);   // 타입 에러

勘定科目のサンプル・コード

// 제네릭 T 타입을 number | string에 할당 가능한 타입으로 제한
const identity = <T extends number>(p1: T): T => {
	return p1;
};

identity(1);
identity('a');
identity([]);   // 타입 에러

✔¥サンプルコード2

interface IPerson {
	name: string;
	age: number;
}

interface IKorean extends IPerson {
	liveInSeoul: boolean;
}

// 제네릭 T는 IPerson에 할당 가능한 타입이어야 한다
// 제네릭 K는 IPerson의 속성 이름이어야 한다.
// 참고로 keyof는 인터페이스의 모든 속성 이름을 유니온 타입으로 만들어 준다.
const swapProperty = <T extends IPerson, K extends keyof IPerson>(
	p1: T,
	p2: T,
	name: K
): void => {
	const temp = p1[name];
	p1[name] = p2[name];
	p2[name] = temp;
};

const p1: IKorean = {
	name: 'april',
	age: 20,
	liveInSeoul: true,
};

const p2: IKorean = {
	name: 'yrkim',
	age: 20,
	liveInSeoul: true,
};

swapProperty(p1, p2, 'age'); // p1, p2는 IPerson에 할당 가능하기 때문에 타입에러가 발생하지 않는다