[TypeScript] 타입스크립트의 함수 정의와 타입 명시

TypeScript에서는 JavaScript와 마찬가지로 기명 함수(named function)와 익명 함수(anonymous function)를 사용하여 함수를 정의할 수 있습니다. 이러한 함수 정의 방식은 API에서 함수 목록을 작성하거나 일회성 함수를 다른 함수로 전달할 때 유용합니다.

다음은 JavaScript와 유사한 방식으로 TypeScript에서 기명 함수와 익명 함수를 사용하는 방법입니다!

기명 함수 (Named Function)

기명 함수는 함수 이름을 명시하여 정의하는 방식

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

익명 함수 (Anonymous Function)

익명 함수는 이름이 없는 함수를 변수에 할당하는 방식

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

캡처링 (Capturing)

함수는 함수 외부의 변수를 참조할 수 있습니다. 이러한 동작을 캡처링이라고 합니다. 캡처링의 이해는 JavaScript 및 TypeScript를 효과적으로 사용하는 데 중요합니다!

let z: number = 100;

function addToZ(x: number, y: number): number {
  return x + y + z;
}

위 예시에서 함수 addToZ는 함수 외부에 정의된 변수 z를 참조하고 있습니다. 이렇게 외부 변수를 참조하는 것은 자주 사용되는 패턴이며, 클로저(Closure)의 중요한 부분입니다.

TypeScript로 재작성한 예시

TypeScript에서 타입을 명시적으로 정의한 기명 함수와 익명 함수의 예시입니다.

기명 함수 (Named Function)

function multiply(a: number, b: number): number { return a * b; }

익명 함수 (Anonymous Function)

let myMultiply = function(a: number, b: number): number { return a * b; };

캡처링 (Capturing)

TypeScript에서 외부 변수를 참조하는 함수의 예시입니다.

let w: number = 50; function addToW(a: number, b: number): number { return a + b + w; }

예제 코드 전체

기명 함수와 익명 함수, 그리고 캡처링을 모두 포함한 TypeScript 코드 예제

// 기명 함수
function add(a: number, b: number): number {
  return a + b;
}

// 익명 함수
let myAdd = function(a: number, b: number): number {
  return a + b;
};

// 외부 변수를 참조하는 함수 (캡처링)
let z: number = 100;

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

// 함수 호출 예시
console.log(add(10, 20));        // 30
console.log(myAdd(10, 20));      // 30
console.log(addToZ(10, 20));     // 130 (z = 100)

 

이와 같이 TypeScript에서는 JavaScript와 동일한 방식으로 함수들을 정의하고 사용할 수 있습니다. 타입을 명시함으로써 더욱 안전한 코드를 작성할 수 있으며, 캡처링을 통해 외부 변수에 접근할 수 있습니다.

함수 타입 (Function Types)

TypeScript에서는 함수에 타입을 정의할 수 있습니다. 이를 통해 함수의 매개변수와 반환 타입을 명확히 할 수 있으며, 함수 사용 시 발생할 수 있는 오류를 사전에 방지할 수 있습니다.

함수에 타입을 추가하기 (Typing the function)

기본적인 함수 정의에 타입을 추가한 예시

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

위 코드에서 add와 myAdd 함수는 각각 매개변수 x와 y의 타입이 number이고, 반환 타입도 number임을 명시하고 있습니다. TypeScript는 반환되는 값의 타입을 추론할 수 있으므로, 반환 타입 생략이 가능합니다!

함수 타입 작성하기 (Writing the function type)

이제 함수 타입을 전체적으로 정의해보겠습니다! 함수의 타입은 매개변수의 타입과 반환 타입으로 구성됩니다.

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

함수 타입을 정의할 때, 매개변수 목록과 반환 타입을 명시합니다. 매개변수 이름은 가독성을 위해 사용하는 것이며, 타입 정의에 필수 요소는 아닙니다.

다음 예시는 매개변수 이름을 다르게 작성한 것입니다.

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

위 예시에서 매개변수 이름은 baseValue와 increment로 변경되었지만, 타입 정의는 동일합니다.

반환 타입은 매개변수 타입 목록과 화살표 표기(=>) 사이에 위치하며, 함수가 값을 반환하지 않을 경우 void를 사용합니다.

타입의 추론 (Inferring the types)

TypeScript 컴파일러는 타입 추론을 통해 타입을 유추할 수 있습니다.

// myAdd는 전체 함수 타입을 가집니다
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;
    };

첫 번째 예시에서는 함수 표현식에 타입이 명시되어 있습니다. 두 번째 예시에서는 함수 타입이 변수에 명시되어 있고, 매개변수 x와 y는 타입 추론을 통해 number 타입으로 간주됩니다. 이러한 타입 추론 형태를 "contextual typing"이라고 하며, 이를 통해 코드의 타입 일관성을 유지하면서도 작성 노력을 줄일 수 있습니다.

 

Reference

https://typescript-kr.github.io/pages/functions.html