[Typescript] 타입스크립트 함수 타입 / function type

함수 타이핑

const typeFunc = (x: number, y: number): number => {
  return x + y;
}

인자로 들어올 x, y의 타입과 반환타입을 선언해줄 수 있다. 반환되는 값의 타입은 return문을 보고 추론할 수 있으므로 생략이 가능하다.

전체 타입 작성하기

let allTypeFunc: (a: number, b: number) => number =
    function(x: number, y: number): number { return x + y; };

let noTypeFunc = function(x, y){return x+y};

위 코드를 보면 allTypeFunc 변수는 number 타입을 가진 a와 b를 인자로 받고, number를 리턴해주는데, 이걸 함수에 또다시 타입선언을 해준 케이스다. allTypeFunc의 모든 타입을 제거하면 noTypeFunc와 같다.

Typescript는 타입추론을 해주기 때문에, 방정식의 한쪽에만 타입이 있으면 생략이 가능하다.

 

옵셔널 파라미터와 기본 파라미터 (Optional Parameter & Default Parameter)

Typescript에서는 파라미터의 갯수와 타입이 정확해야 한다.

const product = (name: string, id: number) => {
  return {name, id};
}

const firstProduct = product('클렌저', 32, 4); // 3개임
const secondProduct = product(32); // 1개임
const ThirdProduct = product('클렌저', '32'); // id가 string임
const FourthProduct = product('클렌저', 32); // OK

유연한 매개변수를 사용하려면 옵셔널 파라미터 ? 를 사용하면된다. 옵셔널 파라미터를 줄때는 순서가 중요하다. 

const product = (name?: string, id?: number) => {
  return {name, id};
}

const firstProduct = product('클렌저'); // ok
const ThirdProduct = product(32);  // 첫번째를 옵셔널로 줬기 때문에 error

파라미터에 기본값을 주려면 이렇게 작성한다.

const product = (id?: number, name = "mijung", ) => {
  return {name, id};
}

const firstProduct = product(1); // {name:'mijung', id:1}

 

나머지 파라미터 (Rest Parameters)

인자가 몇개 들어오지 모를때는 나머지 ...rest를 쓴다.

const product = (id: number, ...rest:string[] ) => {
  return {id, rest};
}

const firstProduct = product(32, "test","test1","test2"); // {id: 32, rest: Array(3)}

 

this와 화살표 함수

화살표 함수 내부의 this : 생성된 객체를 가리킴
function 내부의 this : 호출 시 결정됨. (호출한 곳이 this를 가리킴)

그래서 화살표함수가 아닌 function으로 선언한 함수의 경우, 해당 객체 내 this가 있다면 호출시 this가 달라지므로 에러가 발생한다. 이 경우에 this:void 로 명시를 해주거나, 화살표 함수로 변경한다.

 

오버로드

함수명이 같으면서 서로다른 매개변수를 가진 함수를 여러개 만드는 것. 오버로딩을 사용하면 함수의 다양한 형태를 지원할 수 있다.

function product(x: {id: number; name: string; }[]): number;
function product(x: number): {id: number; name: string; };
function product(x): any {
  //... number일때, 배열 일 때 케이스 구현
}

오버로딩을 사용하려면 함수이름은 같아야하고, 매개변수의 순서도 같아야 한다. (추가되는것은 상관없음)
그리고 구현 시, 매개변수의 타입이 number 일때, string일 때 등의 케이스들을 구현해야 한다.

*매개변수 타입을 명시하지않은 product(x): any 함수는 오버로드 목록에 해당되지않는다.