타입스크립트_제네릭

🎈주제: 제네릭

 

1. 제네릭이란?

제네릭은 보통 C#이나 JAVA와 같은 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용한다.

특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성할 때 주로 사용한다.

 

예시)

어떤 함수가 있다.

이 함수는 숫자를 받아서 내보내줘!

 

function func(arg: number) {
  return arg;
}

func(123);

 

아, 숫자랑 문자랑 같이 부탁해!

 

function func(arg: number | string) {
  return arg;
}

func(123);
func('hi');

 

 

아 맞다. 배열도 필요했다. 숫자배열!

 

function func(arg: number | string | number[]) {
  return arg;
}

func(123);
func('hi');
func([1,2,3,4]);

 

아 문자 배열도 좀..

이거 계속 추가해야하나..? 그냥 any 써..?

 

 

---

2. 제네릭 사용

그래서 사용 하는 것이 제네릭이다.

 

function func<T>(arg: T): T {
  return arg;
}

func(123);
func('hi');
func([1,2,3,4]);

 

• func<타입 변수 지정>
• arg: 타입 인자
• : 타입 반환

그럼 이런식으로 사용할 수 있다.

 

function func<T>(arg: T): T {
  return arg;
}

func<number>(123);
func<string>('hi');
func<number[]>([1,2,3,4]);

 

2-1. 함수

 

type TypeFunc = <T>(arg: T) => T;
interface InterfaceFunc {
    <T>(arg: T): T;
}

function func<T>(arg: T): T {
    return arg;
}

const test1: TypeFunc = func;
const test2: InterfaceFunc = func;

 

2-2. 클래스

 

class Print<T, U> {
    name: T;
    isStudent: U;

    constructor(name: T, isStudent: U) {
        this.name = name;
        this.isStudent = isStudent;
    }
}

const personName = new Print('kkan', true);
const personId = new Print(125223, false);

 

T / U 같은 것은 개인적인 규칙을 가지고 사용해야한다.

---

3. 제네릭 타입 좁히기

제네릭을 사용하다보면 의문을 든다.

any랑 뭐가 다른거지..?

그럴때 사용하는 것이..

 

extends

function print<T extends string | number>(arg: T): T {
    return arg;
}

print('kkan');
print(1234321);

 

그럼 다른 타입은 못쓰나?

 

응 안돼 돌아가~

 

 

End.