➕ zerocho님 typescript all-in-one 강의를 듣고 정리한 내용입니다.

✔ 섹션2

제너릭 이해하기 위해서 js 기본 함수를 분석해보기!

forEach 제네릭 분석

inferface Array<T>{
	forEach(callbackFunction : (value : T, index : number, array : T[]) => void, thisArg? : any) : void;
}

[1,2,3].forEach((item) => {console.log(item)}); //console.log 1,2,3
['1','2','3'].forEach((item) => {console.log(item)}); //console.log '1','2','3' 

const a : Array<number> = [1,2,3]
a.for.forEach((item) => {console.log(item)}); //console.log 1,2,3
                                 

callbackFunction : (value : T, index : number, array : T[]) => void와 (item) => {console.log(item}가 대응
value : item

map 제네릭 분석

inferface Array<T>{
	map<U>(callbackFuntion : (value : T, index : number, array : T[]) => U, thisArg? : any) : U[];
}

const strings = [1,2,3].map((item) => {item.toString()});
// 	map<string>(callbackFuntion : (value : number, index : number, array : number[]) => string, thisArg? : any) : sring[];
console.log(strings) // ['1', '2', '3']

<U>는 map으로 반환되는 함수의 타입

filter 제네릭 분석

// 1️⃣
inferface Array<T>{
	filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
}

// 2️⃣
inferface Array<T>{
	filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
}

const filtered = [1,2,3,4,5].filter((item) => item % 2);
// 1. filter<S extends number>(predicate: (value: number, index: number, array: number[]) => value is number, thisArg?: any): S[];
console.log(filtered) // [1, 3, 5]

const filtered = ['1',2,'3',4,'5'].filter((item) => typeof value === 'string');
// 1️⃣ filter<S extends string | number>(predicate: (value: T, index: number, array: string | number[]) => value is string | number, thisArg?: any): S[];
// 2️⃣ filter(predicate: (value: string | number, index: number, array: string | number[]) => unknown, thisArg?: any): string | number[];
console.log(filtered) // ["1", "3", "5"]

결과 string | number으로 추론되는데 실제로는 string
string으로 결과를 추론하게 하기 위해서는 1️⃣을 사용해서 S에 string이 들어가도로 해야한다!

const predicate = (value : string | number) : value is string => typeof value === 'string';
const filtered = ['1',2,'3',4,'5'].filter(predicate);
console.log(filtered) // ["1", "3", "5"]

lib.es5.d.ts 파일로 공부하자!

forEach 타입 직접 만들기

interface Arr<T>{
  forEach(callback : (item : T) => void) : void
}
const a: Arr<number> = [1,2,3];

a.forEach((item) => {
  console.log(item);
  item.toFixed(1); // 제너릭 사용해야 오류 안뜸
})

a.forEach((item) => {
  console.log(item);
  return '3';
})
  
const b: Arr<string> = ['1','2','3'];

a.forEach((item) => {
  console.log(item);
  item.charAt(3); // 제너릭 사용해야 오류 안뜸
})

a.forEach((item) => {
  console.log(item);
  return '3';
})

const c: Arr<string | number> = ['1',2,'3'];

a.forEach((item) => {
  console.log(item);
})

a.forEach((item) => {
  console.log(item);
  return '3';
})

map 타입 직접 만들기

interface Arr<T>{
 map<S>(callback : (value : T) => S) : S[];
}

const a: Arr<number> {1, 2, 3};
const b = a.map((item) => item+1); // [2,3,4]
const c = a.map((item) => item.toString()); // ['2','3','4'] string[]
const d = a.map((item) => item % 2 === 0); // [false, true, false] boolean[]

const e: Arr<string> =  ['1','2','3'];
const f = e.map((item) => +item);