TS: 한입크기로 잘라먹는 타입스크립트 챌린지_day10

🧉 진도

 

7. 제네릭 (3/6)

• 제네릭 소개
• 타입 변수 응용하기
• map, forEach 메서드 타입 정의하기

🍽️ 요약

 

제네릭

/**
 * 제네릭
 */

// function func(value:unknown){
//     return value;
// }
function func<T>(value: T):T {
    return value;
}
// <T> = 타입변수. 함수를 호출할 때마다 인수에 따라 타입이 결정됨
// 범용적으로 쓸 수 있는 제네릭함수


let num = func(10);
// num.toUpperCase();
  if(typeof num === 'number'){
      num.toFixed();
  }

let bool = func(true);
let str = func('string');

// 프로그래머가 명시적으로 사용하는 법
// 1) 
let arr1 = func([1,2,3] as [number, number, number]);
// 2)
let arr2 = func<[number, number, number]>([1, 2, 3]);

타입 변수 응용하기

/** 
 * 첫번째 사례: 여러개의 매개변수가 타입이 다를 때 *
 */

// function swap<T>(a: T, b: T) {
//     return [b, a];
// }
// const [a, b] = swap("1", 2);
// a가 string 이라 b까지 string으로 추론해버려서 오류.

function swap<T, U>(a: T, b: U) {
    return [b, a];
}
const [a, b] = swap("1", 2);



/** 
 * 두번째 사례: 스프레드 문법을 이용해서 조건 제한하기
 */

// function returnFirstValue<T>(data:T[]) {
//     return data[0];
// } data[0]번째 요소의 타입만 알면 되니까 첫번째 요소만 T로 알아보고 나머지는 몇개던지 타입이 뭔지 알 필요가 없으므로 밑의 문법으로 사용 가능

function returnFirstValue<T>(data: [T, ...unknown[]]) {
    return data[0];
}

let num = returnFirstValue([0, 1, 2]); // 0

let str = returnFirstValue([1, "hello", "mynameis"]); //'hello'


/**
 *  세번째 사례: 타입 변수에 조건을 달아 제한하기 
 */

function getLength<T extends {length: number}>(data:T) {
    return data.length;
}

let var1 = getLength([1,2,3]);
let var2 = getLength("12345");
let var3 = getLength({length: 10});
// let var4 = getLength(10);

 

 

map, forEach 메서드 타입 정의하기

/**
 * map method
 */

const arr =[1,2,3];
const newArr = arr.map((it)=> it*2);

function map<T,U>(arr:T[], callback: (item:T)=> U): U[]{
    let result = [];
    for(let i =0; i < arr.length; i++){
        result.push(callback(arr[i]))
    }
    return result;
}

map(arr, (it)=> it*2);
map(['hi', 'hello'], (it)=> parseInt(it));
// map은 항상 결과값 타입이 같을 필요는 없음


/**
 * forEach method
 */

const arr2 = [1,2,3];
arr2.forEach((it) => console.log(it));

function forEach<T>(arr: T[], callback:(item:T) => void){
    for(let i =0; i<arr.length;i++){
        callback(arr[i]);
    }
}

forEach(arr2, (it) => {
    console.log(it.toFixed());
})
forEach(['123', '456'], (it) => {
    it;
})

 

 

🥧 과제

 

Q1. 아래의 코드를 수정하세요.

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

Q2. 아래의 코드를 수정하세요.

function getLastValue<T>(data: [..any, T]): T {
  return data[data.length -1];
}

 

Q3. 아래의 코드를 수정하세요.

function map<T, U>(arr: T[], callback: (item: T) => U): U[] {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(callback(arr[i]));
  }
  return result;
}