함수에서의 타입 지정

함수도 역시 타입 지정 가능합니다. 먼저 간단한 자바스크립트 함수가 있다고 합시다.

function sum(a, b) {
  return a + b;
}

위의 함수에 타입을 지정하면 다음과 같습니다.

function sum(a: number, b: number): number {
  return a + b;
}

기존의 자바스크립트 함수에서 매개변수 a와 b에 number 타입을, 함수의 반환값에도 number 타입을 지정해줬습니다. 이렇게 타입스크립트를 사용해서 매개변수와 함수의 반환 값에 타입을 지정해 줄 수 있습니다.

화살표 함수에서도 가능합니다.

const sum = (a: number, b: number): number => a + b;

만약 함수의 반환 값이 없다면 void를 지정해주면 됩니다.

function foo(a: string): void {
  console.log(a);
}

Default Parameter (기본 매개변수)

ES6과 똑같이 함수에 전달된 파라미터의 값이 undefined이거나 전달된 값이 없을 때, 기본 값으로 초기화 해줄 수 있습니다.

function add(a: number = 0, b: number = 1): number {
  return a + b;
}

Optional Parameter (선택적 매개변수)

함수에서 파라미터 값이 필요할 수도, 필요하지 않을 수도 있는 상황에서 사용합니다.

? 기호를 사용하여 선택적 매개변수로 사용할 수 있습니다.

function info(name: string, age?: number): string {
  return name + " " + age;
}
info("kim", 20); // kim 20
info("kim"); // kim

! 주의할 점

function info(name: string, age?: number): string {...} // 가능
function info(age?: number, name: string): string {...} // 불가능

선택적 매개변수는 기본 매개변수보다 뒤에 적어줘야합니다.

Rest Parameter (나머지 매개변수)

ES6의 Spread Operator(전개 연산자)를 타입스크립트에서도 동일하게 사용할 수 있습니다.

function postingList(...data: string[]) {
  // ...
}

Union Type

함수에서도 매개변수나 반환 값이 두 개 이상의 타입을 가질 때 Union Type을 사용할 수 있습니다.

function foo(x: number | string): number | string {
  return x * 2;
}

하지만 매개변수의 타입을 모르니 에러가 발생합니다. Union Type은 일반적으로 데이터 조작을 금지해놨기 때문입니다.

Operator '*' cannot be applied to types 'string | number' and 'number'

이런 경우에는 타입을 하나로 Narrowing 해주거나 Assertion 해주면 해결할 수 있습니다.

Type Narrowing, Assertion