[TS] generic 제네릭 타입 <string> ~ <number> ~ <???> ~

 

 

💡제네릭 타입에 대해 알아보자.

 

const shoeSizes: number[] = [230, 240, 250];
shoeSizes.map((num) => {});

const clothingSizes: string[] = ['M', 'L', 'XL'];
clothingSizes.map((names) => {});

num:number   names: string

파라미터의 타입을 알아서 인식하고 있다.

어떻게 한 걸까?!

 

 

map 메서드를 살펴보면 <> 안에 값이 있는데, 여기에 유동적인 값이 들어간다.

 

이렇게 특정한 타입으로 고정시켜 두는 게 아니라 꺾쇠 안에 임의의 값을 지정해 두고

그때그때 다른 타입을 넣어서 쓸 수 있게 하는 문법을 제네릭 이라 한다.

 

generic : 데이터 타입을 변수화 한 것

type Generic<T>={ // 이름은 아무렇게나 정할 수 있으나 일반적으로 T 사용
  someValue: T;
}

type Test = Generic<string>

function someFunc<T>(valu: T) {} // 함수 옆에 꺾쇠 T 를 적어서 인자 타입에 바로 T 가 들어간다.

someFunc<string>(); // => function someFunc<string>(valu: string)
// 스트링을 넣어서 호출하니 커서를 올려보면 타입이 스트링으로 표시된다.

정해둔 타입이 들어가 있다.

함수 호출 시 숫자를 넘겨주니 오류가 뜬다 ❗️

 

 

💡 배열의 각 요소를 출력하는 함수를 제네릭 타입으로 만들어보자!

function printArray<T>(items: T[]) { // 배열 타입을 임의로 T 라고 정함
  for (const item of items) {
    console.log(item);
  }
}

 

<T> ➡️ 타입 파라미터, 임의 값

 

 

정해둔 대로 파라미터 값이 추론되고 있다.

넘겨진 값이 알아서 T 로 들어가 는 것.

number[] ➡️ T[]

stirng[] ➡️ T[]

 

👀 함수를 호출할 때 타입 파라미터를 정의해 줄 수도 있다.

printArray<boolean>(shoeSizes); // 작성법 참고만! 위에서 타입을 정해놔서 에러 뜨는 중

 

👀 interface 에서도 제네릭을 사용할 수 있다.

interface Product {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
}

interface SizeProduct<T> extends Product { // 이름 뒤에 <T>
  sizes: T[];
}

enum ClothingSizes {
  S = 'S',
  M = 'M',
  L = 'L',
}

type ClothingProduct = SizeProduct<ClothingSizes>;

 

👀 타입 별칭에서도 사용 가능

type Pair<T> = [T, T];
const point: Pair<number> = [1, 2];
const fullname: Pair<string> = ['aoto', 'yae'];

 

✳️ 여러 개를 쓸 땐 쉼표로 구분한다.

type Pair<T, U, V> = [T, T];

Map<key, value>

const map = new Map<string, Product>();
map.get();

 

그래서 이런 함수들에서도 타입을 활용할 수 있다.

 

❗️ 타입 파라미터의 이름은 되도록 한 글자로 짓고,

부득이한 상황은 앞에 T 를 붙인다. TResult ~

 

 

~ 활용 ~

const stock = new Map<string, number>();
stock.set('g001', 1);
stock.set('g002', 2);
console.log(stock.get('g001')); // 1
console.log(stock.get('g002')); // 2