• 1. 제네릭개요
• 2. 함수와 타입
• 3. 제네릭
• 3-1 예제

1. 제네릭개요

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

타입을 하나의 변수처럼 취급하여 유연한 처리가 가능하게 한 것이 제네릭이라 할 수 있다.

2. 함수와 타입

basic.ts

1. 함수를 작성해보자

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

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

2. 반환값의 타입지정

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

basic.ts

1. output 함수를 작성해보자
Copy

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


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

3. 제네릭

3-1 예제

basic.ts

1. insertAtBeginning 함수 작성
Copy

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

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

2. 다음 함수 작성
Copy

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 타입으로 지정되었기 때문


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

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

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

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

updateArr[0].splice('')

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

타입스크립트에서는 오류가 나지 않지만 실행시에 오류가 발생한다.

splice 함수는 문자 타입에만 사용할수 있는 메소드이고 updateArr 의 타입은 any 이다.

하지만 실질적으로 updateArr 내부에 저장된 값 testArr의 타입은 number 이며

최종적으로 자바스크립트의 splice 메소드에서 사용할수 없는 number 자료형에 사용되었으므로 오류가 난다

1. Generic 을 사용한 해결


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


Copy

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(""));

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

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

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

3. 컴파일
Copy

npx tsc

4. 실행확인