[TS] 함수 타입

TypeScript에서 함수 정의

TS는 매개변수의 타입과 반환 타입을 설정해야 합니다.

아래는 number타입의 매개변수와 string값을 반환하는 getParam()함수입니다.

// 일반 함수
function getParam(val: number): string {
  return "매개변수의 값: " + val;
}

// 화살표 함수
let getParam = (val: number): string => {
  return "매개변수의 값: " + val;
}

(val: number)는 getParam() 함수의 매개변수를 나타냅니다. 매개변수의 이름을 val로 설정하였고 타입은 number로 정의합니다.

소괄호 뒤의 : string는 getParam() 함수의 반환 타입을 나타냅니다.

TypeScript는 함수의 반환 타입을 자동으로 추론하기 때문에 함수의 반환 타입을 생략할 수 있습니다.

// 일반 함수
function getParam(val: number) {
  return "매개변수의 값: " + val;
}

// 화살표 함수
let getParam = (val: number) => {
  return "매개변수의 값: " + val;
}

만약, 함수가 값을 반환하지 않으면 반환 타입을 void로 정의합니다. 위에서 설명했듯이 TypeScript에서 함수의 반환 타입을 생략할 수 있으므로 void 타입도 생략 가능합니다.

// void
function pringVal(val: number): void {
  console.log("매개변수의 값: " + val);
}

// 생략
function pringVal(val: number) {
  console.log("매개변수의 값: " + val);
}

💡 함수 반환 타입 생략의 문제점
팀 프로젝트에서 개발자가 함수의 반환 타입을 확인하기 위해 코드를 살펴봐야 하는 문제가 발생하므로 함수 반환 타입을 명시하는게 좋습니다.

Call Signature

변수 또는 객체는 다음 예제처럼 타입을 미리 정의하고 선언할 수 있습니다.

// 타입을 먼저 정의
type StringOrNumber = string | number;

// 위에서 정의된 타입으로 변수 선언
let val: StringOrNumber = 100;

 마찬가지로 함수도 타입을 미리 정의할 수 있으며, 함수의 타입을 정의하는 것을 호출 시그니처(Call Signature)라고 합니다.

다음은 number 타입인 2개의 매개변수와 string 값을 반환하는 함수입니다.

function add(x: number, y: number): string {
  return "매개변수의 합:  " + (x + y);
}

위 함수의 호출 시그니처를 표현하면 다음과 같습니다.

(x: number, y: number) => string

소괄호 내부에는 함수의 매개변수를 정의하고 화살표 다음에는 함수의 반환 타입을 정의합니다. 호출 시그니처는 함수의 본문을 포함하지 않아 타입 추론이 불가능하므로 함수의 반환 타입을 명시해야 합니다.

다음은 호출 시그니처를 이용하여 함수의 타입을 정의 후 함수를 선언하는 예제입니다.

type add = (x: number, y: number) => string;

let addFunc: add = (x, y) => {
  return "매개변수의 합: " + (x + y);
}