function / union / void 타입

함수 매개변수 타입

다음 코드는 JavaScript에서 아무런 문제가 없지만 tsconfig.json에 설정된 noImplicitAny 설정 값이 true일 경우, 명시적으로 타입 설정을 하지 않아 컴파일 시 다음과 같은 오류를 출력합니다.

// [오류]
// [ts] 'id' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다.
// (parameter) id: any
// [ts] 'name' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다.
// (parameter) name: any
function setInfo(id, name) {
  return { id, name };
}

let product_one = setInfo(120912, '스노우보드');

noImplicitAny 설정 값이 true이면, 암시적인 any 사용 시, 오류 메시지를 출력합니다.

오류 메시지에서 말한 any 타입이 아닌, number, string 타입으로만 인자를 전달 받으려면 매개변수에 다음과 같이 설정해 사용합니다.

function setInfo(id:number, name:string) {
  return { id, name };
}

let product_one = setInfo(120912, '스노우보드');

실습

유니온 타입

id 매개 변수에 설정 가능한 타입 값을 number, string 모두 가능하게 하려면 파이프(|)를 사용하여 설정합니다. 이를 유니온(union) 타입이라고 부릅니다.

function setInfo(id:number|string, name:string){
  return { id, name };
}

실습

함수 리턴 타입

void는 결과 값을 반환하지 않는 함수에 설정합니다. 반면 결과 값을 반환하는 함수의 경우 명시적으로 반환 값의 타입을 기술할 수 있습니다. 아래 코드를 살펴보세요.

// 리턴 값 타입이 명시적으로 설정되지 않는 함수
function assignClass(name:string): void {
  document.documentElement.classList.add(name);
}

// 리턴 값 타입이 숫자인 함수
function factorial(n:number): number {
  if (n < 0) { return 0; }
  if (n === 1) { return 1; }
  return n * factorial(n-1);
}

// 리턴 값 타입이 문자인 경우
function repeat(text:string, count:number=1): string {
  let result:string = '';
  while(count--) { result += text; }
  return result;
}

void 0은 undefined와 같습니다. 명시적으로 반환 값을 설정하지 않는 함수는 undefined를 반환하기에 TypeScript에서는 void를 명시합니다.

실습

함수 식

변수에 함수 값을 할당하는 식(Expression)은 컴파일 과정에서 오류를 발생시키지는 않습니다.

let assignClass = function(name) {
  document.documentElement.classList.add(name);
};

하지만 보다 명시적으로 함수에 설정 가능한 타입을 정의하고자 한다면 다음과 같이 작성할 수 있습니다.

// 변수에 함수 매개변수, 리턴 타입에 대한 명시적 설정
let assignClass: (n:string) => void;

// 변수에 함수 값 할당
assignClass = function(name) {
  document.documentElement.classList.add(name);
};

변수에 명시적 타입 설정과 함수 값 할당 구문을 별도로 나누지 않고, 한번에 정의할 수도 있습니다.

let factorial:(n:number)=>number = function (n) {
  if (n < 0) { return 0; }
  if (n === 1) { return 1; }
  return n * factorial(n-1);
};

ES6 화살표 함수 식을 사용하면 다음과 같이 기술할 수도 있습니다.

let factorial:(n:number)=>number = n => {
  if (n < 0) { return 0; }
  if (n === 1) { return 1; }
  return n * factorial(n-1);
};

문이 아닌 식으로 화살표 함수를 활용하면 다음과 같이 작성해도 결과는 동일합니다. 하지만 읽기는 불편해집니다.

let factorial:(n:number)=>number = n => n < 0 ? 0 : n === 1 ? 1 : n * factorial(n-1);

실습

참고

Handbook - Functionstypescriptlang

TypeScript - 함수 데이터 타입

Handbook - Basic Typestypescriptlang

TypeScript - void 데이터 타입