2023.05.25) 타입스크립트의 함수 (1)

1. call signatures

함수 위에 마우스를 올렸을 때 보게 되는 것을 말한다.

함수를 어떻게 호출해야하는지와 함수의 반환 타입을 알려준다.

타입을 만들 수 있고, 함수가 어떻게 작동하는지 서술해둘 수 있다.

type Add = (a:number, b:number) => number;    // call signatures

const add:Add = (a, b) => a + b

 

2. overloading

함수 이름은 같지만 매개변수 또는 반환값의 타입이 다른 함수를 말한다.

선언부와 구현부로 나뉜다.

선언부 : 가능한 매개변수 타입만 지정

구현부 : 함수 구현, 모든 선언부를 표현할 수 있어야 함. 선언부의 마지막 부분에 작성되어야 함.

type Config = {
	path: string,
    state: object
}

type Push = {
	(path: string): void
    (config:Config): void
}

const push: Push = (config) => {
	if (typeof config === "string") { console.log (config) }
    else {
    	console.log (config.path)
    }
}

 

 

3. polymorphism

여러가지 다양한 형태들이란 뜻이다.

type SuperPrint = {
	<T>(arr: T[]): T
}

const superPrint: SuperPrint = (arr) => arr[0]

const a= superPrint([1,2,3,4])
const b = superPrint ([true, false])
const c = superPrint (["a","b","c"])
const d = superPrint ([1,2,true,"a"])

generic을 사용하여,

함수의 call signatures를 입력할 때 placeholder를 사용하게 한다.

 

 

4. generic

generic을 쓰는 이유는 any처럼 처리하기 편하면서도 한 함수 안에서 타입을 담아 전달할 수 있기 때문에

강력한 타입 체크도 겸할 수 있기 때문이다.

제네릭 타입의 변수 이름으로 보통 JS 변수처럼 이름을 붙여줘도 되지만 T(타입), V(밸류)를 많이 쓴다.

앞에 브라켓을 넣어서 변수 선언한다.

interface SuperPrint {
  <T, M>(arr: T[], b: M): T;
}
const superPrint: SuperPrint = (arr) => {
  return arr[0];
};
const a = superPrint([1, 2, 3], "x");
const b = superPrint([1, 2, 3], [1]);

 

 

5. generic의 확장

type Player<E> = {
  name: string;
  extraInfo: E;
};

type OriPlayer = Player<OriExtra>;

type OriExtra = { age: number };

const player: OriPlayer = {
  name: "Ori",
  extraInfo: {
    age: 5,
  },
};

const olafPlayer: Player<null> = {
  name: "Olaf",
  extraInfo: null,
};

이런식으로 코드 재사용을 하며 사용할 수 있다.