[Typescript] 함수(Function)

Typescript는 Javascript의 수퍼셋인 만큼, 클래스 / 모듈 / 네임스페이스 못지 않게 함수의 기능적 역할이 중요하다.

Typescript는 표준 Javascript 함수가 수월하게 작업하도록 다양한 기능을 지원한다고 한다.

 

가이드북과 유튜브 강의를 통해, Typescript 함수 활용에 대한 내용들을 공부하고 정리해보았다.

---

💙함수 타입 (Function Type)

아래 예제처럼, 타입스크립트에서는 함수에 대한 타입선언을 진행한다. 매개변수, 반환값 2가지에 대해서 시행한다.

첫 번째 방법은, 각 요소에 대한 타이핑이며, 두 번째 방법은, 함수 타입을 작성하여 함수변수(myAdd)에 지정하는 것이다.

function add(x, y) {
    return x + y;
}

// 1) 함수의 타이핑
function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y };

// 2) 함수 타입작성
let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };

* 지정한 타입과 다른 argument를 받을 경우 에러 발생, x, y 두 매개변수를 설정했는데 미달/초과되도 에러 발생한다.

 

- 타입 추론 (Type Inferring)

let myAdd = function(x: number, y: number): number { return  x + y; };

// 매개변수 x 와 y는 number 타입을 가집니다
let myAdd: (baseValue: number, increment: number) => number =
    function(x, y) { return x + y; };

해당 예시에서, myAdd() 함수의 x, y 매개변수들은 myAdd 함수타입과 상위 baseValue, increment의 number 타입을 참조해 number 타입이 된다. 이러한 타입 추론을 "Contextual Typing" 이라고 한다.

 

- 선택적 매개변수(Optional Parameter)

위에서 설명했듯이, 함수 타입에서 매개변수가 미달되면 에러가 발생한다.

Typescript 컴파일러가 컴파일링 과정에서, 함수의 각 매개변수에 대해 사용자가 값을 제공했는지를 검사하는 것이다.

 

하지만, 필수적이지 않은 매개변수가 존재할 수 있다. 이럴 경우엔 어떻게 해야할까?

우리가 객체 타입에서 선택적 프로퍼티('?')를 적용했듯, 함수에도 선택적 매개변수(Optional Parameter) 라는 개념이 존재한다.

function sendGreeting(message: string, userName?: string): void {	// userName -> optional
  console.log(`${message}, ${userName}`);
}

sendGreeting('hello');	// 정상 출력

이처럼, userName 매개변수에 '?'를 붙여 Optional 로 조정했다. 함수 호출에서 이것이 없더라도 에러가 발생하지 않는다. (undefined)

 

* 함수가 여러 개의 매개변수를 받야아 하는 경우, 선택적 매개변수들은 우측으로 정렬되어야 한다!

function manyParams(param1: number, param2: string, param3?: boolean, param4?: number[]): void {
  // ...
}

 

- 기본 매개변수(Default Parameter)

혹은 초기화 매개변수 라고도 한다. 함수 호출 시, 매개변수가 존재하지 않는 경우 "="를 통해 기본값을 지정할 수 있다.

또한, 해당 매개변수는 '타입 추론'을 통해 이 매개변수의 타입을 예측한다. (아래 예시는, "Sydney"가 default이므로 string 추론)

function sendGreeting(message: string, userName="Sydney"): void {	// userName -> 'Sydney'(default)
  console.log(`${message}, ${userName}`);
}

sendGreeting('hi');	// 'hi Sydney'

* 기본 매개변수는 필수 매개변수와의 순서에 관여받지 않고, 앞에 올 수도 있다. 대신, 이 경우 undefined를 설정해줘야 초기화 방지가능

 

- 나머지 매개변수(Rest Parameter)

필수, 선택적, 기본 매개변수는 하나의 매개변수에 대해 정의할 수 있다. 하지만, 몇 개의 선택적 매개변수를 취할지 모르는 상황이 있다.

이 때 적용되는 문법이 나머지 매개변수이다. ...[변수명]: 타입(통상 배열) 로 설정하며, 이는 선택적 매개변수를 무한으로 가정한다.

function buildName(firstName: string, ...restOfName: string[]) {	// restOfName: 나머지 매개변수
    return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

---

타입스크립트의 함수 선언에 대해 이전에 공부한 내용, 그리고 새로 배운 선택적 매개변수, 나머지 매개변수에 대해 간단히 정리했다.

사실, 가이드북엔 this 매개변수와 오버로드(Overload) 에 대한 소개까지 나와있다.

this는 모호하기도 하고, 클래스와도 연결되기 때문에 클래스를 포스팅하면서 재차 다루겠다. (오버로드는, 직관적인 개념이라 가이드북을..)

다음은, 대망의 Class에 관한 공부다. 잠시 휴식을 취하고, JS 클래스 문법부터 공부하면서 이중으로 포스팅 정리를 진행해야겠다.

 

[출처]

- Typescript 가이드북 : yamoo9.gitbook.io/typescript/types/type-assertions  

- 땅콩코딩 님의 Youtube강의 : www.youtube.com/watch?v=SVtqhpboxGw&list=PLJf6aFJoJtbUXW6T4lPUk7C66yEneX7MN&index=8