12. generic

1. 제네릭개요

제네릭은 컴포넌트 또는 함수에서 사용하는 데이터의 타입을 외부에서 지정하는 것을 의미한다.
어떤 타입의 데이터를 사용할 지를 선언 시점이 아니라, 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다.
한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다.
타입을 하나의 변수처럼 취급하여 유연한 처리가 가능하게 한 것이 제네릭이라 할 수 있다.

2. 함수와 타입

basic.ts

1. 함수를 작성해보자

/**
 * 06 functions & types
 * **/

function add(a:number,b:number){
	return a+b;
}

1. 반환값의 타입지정

function add(a: number, b: number): number | string {
	return a + b;
}

basic.ts

1. output 함수를 작성해보자

function output(value:any){
	console.log(value)
}
output("출력")

1. 반환타입이 void 로 확인된다
2. void 는 null, undefined 와 같은 비어있는 값의 의미이나 함수의 반환값이 비어있음을 의미한다
3. return 을 함수에 추가후 다시 반환타입을 확인하면 any 로 변경된것을 볼수있다

3. 제네릭

3-1 예제

basic.ts

1. insertAtBeginning 함수 작성

function insertAtBeginning(array:any[],value:any){
	const newArr=[value,...array] //1
	return newArr; //2
}

1. newArr 에 spred operator 를 사용하여 value 와 배열을 연결한다
2. newArr 을 리턴한다

1. 다음 함수 작성

const testArr = [1, 2, 3]; //1
const updateArr = insertAtBeginning(testArr, -1); //2

1. testArr 에 배열로 아무 숫자나 넣는다
2. updateArr 에 insertAtBeginning함수를 호출하면서 인자로 testArr 과 -1 을 전달한다
3. updataArr의 리턴값은 최종적으로 [-1,1,2,3] 이 될것이다
4. 확인해야 할 부분은 각 문장의 타입이다. 마우스를 변수명위에 올려서 추론된 타입을 확인해보자
   아래의 이미지처럼 testArr 은 number , updateArr 은 any로 확인이 된다

updateArr 에서 inserAtBeginning 함수의 인자로 넘겨지면서 any 타입으로 지정되었기 때문

1. typescript 는 insertAtBeginning 함수 내 매개변수의 배열은 any 타입으로 추론하며 하위 모든 객체, 값은 any타입으로 생각하게 된다.

여러 형태의 값을 전달받아 복잡한 일을 하는 함수의 경우 any 타입의 사용이 불가피 할때가 있다

하지만 any 를 사용하면 함수호출 이후 반환되는 값은 모두 any 타입으로 추론되어 타입스크립트의 기능을 제대로 사용할수 없게된다.

1. 자바스크립트에서 문자열을 자르는 함수를 추가해보자

updateArr[0].splice('')

위의 함수는 컴파일후 출력해보면 오류가 난다

타입스크립트에서는 오류가 나지 않지만 실행시에 오류가 발생한다.
splice 함수는 문자 타입에만 사용할수 있는 메소드이고 updateArr 의 타입은 any 이다.
하지만 실질적으로 updateArr 내부에 저장된 값 testArr의 타입은 number 이며
최종적으로 자바스크립트의 splice 메소드에서 사용할수 없는 number 자료형에 사용되었으므로 오류가 난다

1. Generic 을 사용한 해결

코드를 수정하면 아래와 같이 작성단계에서 에러가 검출되는것을 볼수 있다

function insertAtBeginning<T>(array: T[], value: T) {
	const newArr = [value, ...array];
	return newArr;
}
const testArr = [1, 2, 3];
const updateArr = insertAtBeginning(testArr, -1);
updateArr[0].splice("");//updateArr에는 number 가 있으므로 오류
console.log(updateArr[0].splice(""));

1. 문자자료형을 전달해보자
2. insertAtBeginning 함수를 호출하면서 인자로 string 을 전달한다.

const stringArr = insertAtBeginning(["a", "b"], "c");
stringArr[0].split("");
console.log(stringArr[0].split(""));

b. generic type 으로 지정된 매개변수는 전달된 값의 타입에 따라 추론된다.

1. 컴파일

npx tsc

1. 실행확인