[23.03.27] 타입스크립트 제네릭

희승·2023년 3월 27일

TIL

목록 보기
23/33

타입스크립트 제네릭

재사용성이 높은 컴포넌트를 만들 때 자주 사용
여러가지 타입에서 동작하는 컴포넌트를 만들 때

제네릭이란 ?
타입을 마치 함수의 파라미터처럼 사용하는 것
제네릭은 코드를 작성할 때가 아니라 코드를 수행할 때 (런타임) 타입을 명시

제네릭 사용 예시

function logText<T>(text: T): T {
	return text;
}

const text = logText('Hello');
function logText<T>(text: T[]): T[] {
	console.log(text.length);
	return text;
}

// T라는 변수 타입을 받고 인자로는 배열 형태의 T를 받는 함수
// 함수가 [1, 2, 3]이라는 배열을 받으면 number를 반환

// 명시적으로 제네릭 타입 선언하는 방법
function logText<T>(text: Array<T>): Array<T> {
	console.log(text.length);
	return text;
}

Enum, Namespace는 제네릭으로 생성할 수 없다

제네릭 타입

function logText<T>(text: T): T {
	return text;
}

// str 선언 두가지 방법 -> 같은 의미
let str: <T>(text: T) => T = logText;
let str: {<T>(text: T): T} = logText; 
interface GenericLogTextFn {
	<T>(text: T): T;	
}

function logText<T>(text: T): T {
	return text;
}

let myString: GenericLogTextFn = logText;

제네릭 클래스

class GenericMath<T> {
	pi: T;
	sum: (x: T, y: T) => T;
}

let math = new GenericMath<number>();

extends : 객체의 속성을 제약하는 방법


https://joshua1988.github.io/ts/guide/generics.html#제네릭-타입

https://lakelouise.tistory.com/188

https://lakelouise.tistory.com/188

0개의 댓글