본문 바로가기
JavaScript/TypeScript

[TypeScript] 제네릭(Generic)이란?

by dev또리 2023. 2. 17.
728x90

제네릭(Generic) ?

  • 재사용 가능한 클래스, 함수를 만들기 위해 다양한 타입에서 사용 가능하도록 하는 것
  • 제네릭이 적용된 대상 (클래스, 함수, 인터페이스)은 선언 시점이 아닌 생성 시점에 사용하는 타입을 결정
  • 제네릭에 사용되는 파라미터는 타입 파라미터라 하며 관용적으로 T를 사용한다
  • 코드를 작성할 때 식별자를 써서 아직 정해지지 않은 타입을 표시한다.
    • 일반적으로 식별자는 T, U, V ...를 사용한다.
    • 필드 이름의 첫 글자를 사용하기도 한다.

 

function getSize<T>(arr:T[]):number{
	return arr.length;
}

const arr1 = [1,2,3];
getSize<number>(arr1); // 3을리턴
//getSize<number|string>(arr1); //위와 같음

const arr2 = ["a","b","c","d"]
getSize<string>(arr2); // 3을리턴

const arr3 = [false,true,true]
getSize<boolean>(arr3);	//3을 리턴

const arr4 = [{},{},{name:"g"}]
getSize<object>(arr4);	//3을 리턴

 

<T>는 타입변수라고 한다

타입변수는 사용자가 제공한 타입으로 변환될 식별자이다

 

 

 

 

Generic 사용하는 이유?

 

1) 오류를 쉽게 잡을 수 있다
 -  any 타입을 사용하면 컴파일 시 타입을 체크하지 않는다
 - 컴파일 시 컴파일러가 오류를 찾지 못한다
2) 재사용성 높은 함수와 클래스 생성 가능
 - 한 번의 선언만으로 다양한 타입에 재사용 가능하다
 - 코드의 가독성 향상

 

 

 

//인터페이스 확장

interface IAnimal{
name:string
}
interface ICat extends IAnimal{
sound():string
}
class Cat implements ICat {
name:string;
constructor(name){
this.name=name;
}
sound(){
return "야옹";
}
}
//같은 이름의 interface를 여러개 만들 수 있음
//기존에 만들어진 interface에 내용을 추가하는 경우 유용함
interface IName{
name1:string;
age:number;
}
interface IName{
name2:string;
}
const namename: IName = {
name1: "A",
age:20,
name2:"B"
}
728x90

댓글