[TypeScript]함수 타입(Function Type)

TypeScript에서 함수 정의

TypeScript의 함수는 JavaScript처럼 함수를 생성할 수 있지만, 매개변수의 타입과 반환 타입을 설정해야 합니다.

 

다음은 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로 정의합니다.

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

위에서 설명했듯이 TypeScript에서 함수의 반환 타입을 생략할 수 있으므로 void 타입도 생략 가능합니다.

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);
}

---

정리

이번 포스팅에서는 함수 타입을 정의하는 방법에 대해 소개하였습니다.

• 함수의 반환 타입은 생략 가능합니다. 하지만, 명시하는 것을 권유합니다.
• 함수의 타입을 정의하는 방법을 호출 시그니처라고 합니다.