TypeScript(5)-함수 오버로딩,Generics

함수 오버로딩

두 함수를 하나로 만들어 주려면?

function saySomething(word:string | string[]):string{
  if(typeof word ==="string"){
    return word;
  }else if(Array.isArray(word)){
    return word.join(" ");
    throw new Error("unable to say something");
    //string,string[] 타입이 둘다아니면 undefined 오류가 나서 throw처리
  }
  

이렇게 할 수 있지만 함수 오버로딩을 사용해보자

함수 오버로딩은 type선언와 함수구현이 나눠진다.

function saySomething(word: string):string
function saySomething(words:string[]):string
//배열로 들어올때도 string 타입으로 반환
function saySomething(word:any):any {
  if(typeof word ==="string"){
    return word;
  }else if(Array.isArray(word)){
    return word.join(" ");
    throw new Error("unable to say something");
  }
  saySomething(['hello','world'])

Generics

제네릭(Generics)은 타입스크립트에서 코드의 재사용성을 높이기 위해 사용되는 기능입니다. 제네릭을 사용하면 특정 타입에 종속되지 않고 다양한 타입을 처리할 수 있다.

함수에 다른 타입의 인수가 들어오면 게속 다른 타입을 넣어줘야하는 상황이 온다.

function getArrayLength<T>(arr:T[]):number{
  return arr.length;
}

const array1 = [1,2,3];
getArrayLength<number>(array1);

const array2 = ['a','b','c'];
getArrayLength<string>(array2);

제네릭은 타입을 함수의 파라미터처럼 사용한다.

const makeArr = <X,Y>(x:X,y:Y):[X,Y] => {
  return [x,y];
}
const array = makeArr<number,number>(4,5);
const array = makeArr<string,string>("a","b");

여기에다가 기본값을 넣어줄수도있다. (위 아래 동일)

const makeArr1 = <X,Y = string >(x:X,y:Y):[X,Y] => {
  return [x,y];
}
const array = makeArr1<string>("a","b");

그리고 아래에는 제네릭을 extends랑 사용해보자

const makeFullName = (obj : {firstName :string, lastname:string}) => {
  return{
    ...obj,
    fullName:obj.firstName + " "+obj.lastName
  }
}
makeFullName({firstName:"john",lastName:"Doe",location:"seoul"})

여기서 location에서 에러가 난다.
다른것들도 들어올 수 있게 하려면 다음과 같이 제네릭을 사용해준다.

const makeFullName = <T extends {firstName:string,lastName:string}>(obj : T) => {
  return{
    ...obj,
    fullName:obj.firstName + " "+obj.lastName
  }
}
makeFullName({firstName:"john",lastName:"Doe",location:"seoul"})

이렇게 수정해주면 first name, last name은 원래 들어가고 더 새로운 것들이 들어갈 수 있게 된다.