[TypeScript] 함수

개요

저번 글에서는 변수와 TypeScript에서 적용되는 타입들에 대해 정리를 했는데, 이 글에서는 TypeScript에서의 함수 사용법에 대해 정리해보려고 한다.

 

1. 함수 선언 방식

기본 함수 선언 방식

function greet(name : string) : string {
    return `안녕, ${name}`;
}

 

-> JavaScript와 다르게 각 매개변수 뒤에 :타입을 입력해주고

-> 함수의 반환 타입을 매개변수 뒤에 동일하게 :타입 형태로 입력해준다.

-> 만약 반환하는 타입이 없는 경우에 :void 로 입력해준다.

 

함수 표현식

const greet = (name: string) : string {
    return `안녕, {name}`;
};

/** 화살표 함수 **/
const greet = (name: string): string => {
    return `안녕, {name}`;
};

 

-> 함수 표현식을 변수에 할당할 수 있다.

 

  const sum = (num1 : number, num2 : number) => {
    return num1 + num2;
  };

 

-> 반환 타입을 생략하더라도 코드의 컨텍스트를 분석해 자동으로 추론해준다고 한다.

 

2. 선택적 매개변수

함수의 매개변수가 필수 값이 아닌 경우에 ?를 사용해서 선택적으로 지정할 수 있다.

이때 주의해야 할 점은 선택적 매개변수가 항상 필수 매개변수 뒤에 위치해야 한다는 것이다.

 

function greet(name: string, age?: number): string {
    if (age !== undefined) {
        return `안녕하세요, ${name}님! ${age}군요. `;
    } else {
        return `안녕하세요, ${name}님!`;
    }
}

console.log(greet("말랑이"));          // 안녕하세요, 말랑이님!
console.log(greet("말랑이", 25));     // 안녕하세요, 말랑이님! 당신은 25군요.

 

-> age에 ?를 사용하며 age가 선택 사항이 됐다.

-> 이때 선택적 매개변수를 제공하지 않으면 자동으로 undefined 값이 된다.

 

3. 기본값 매개변수

함수 호출 시에 값이 전달되지 않으면 기본값이 사용된다.

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

console.log(multiply(5)); //5
console.log(multiply(5,2)); // 10

 

4. 나머지 매개변수

function sum(...numbers: number[]): number {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22

 

-> 임의의 개수의 인수를 배열로 받을 수 있게 한다.

-> 단, 마지막 매개변수에 반드시 위치해야 한다.

 

5. 함수 시그니처

함수가 어떤 매개변수를 받고 어떤 타입을 반환하는지를 지정하는 틀이다.

 

주로 type 또는 interface를 통해 정의할 수 있다.

//함수 시그니처 정의
type GreetFunction = (name: string) => string;

// 구현
const greet : GreetFunction = (name) => `안녕, ${name}`;

console.log(greet("HO")); // 안녕, HO

 

interface GreetFunction {
    (name: string) : string;
}

const greet : GreetFunction = (name) => {
    return `안녕, ${name}`;
};

 

-> 이것보다 훨씬 복잡한 함수의 타입을 정의 할 때 코드의 가독성을 향상시킬 수 있다.

-> 특히 콜백 함수를 정의할 때 유용하다.

type Callback = (data: string) => void;

function process(callback: Callback): void {
    callback("안녕!");
}

process((message) => console.log(message)); // 안녕!

 

6. 함수 오버로드

같은 함수 이름인데 매개변수 개수, 타입 또는 반환 타입이 다른 여러 함수를 가지는 것을 말한다.

// 함수 시그니처 (오버로드 목록)
function describe(value: string): string;
function describe(value: number): string;
function describe(value: boolean): string;

// 함수 구현부
function describe(value: any): string {
    if (typeof value === "string") return `String: ${value}`;
    if (typeof value === "number") return `Number: ${value}`;
    if (typeof value === "boolean") return `Boolean: ${value}`;
    return "Unknown type";
}

console.log(describe("Hello"));  // String: Hello
console.log(describe(42));       // Number: 42
console.log(describe(true));     // Boolean: true

 

-> 오버로드된 함수를 통해 컴파일 타임에 타입 체크를 통해 잘못된 사용을 방지할 수 있다.

-> 구현부는 단 하나! 이때 any 타입과 타입 체클르 사용해 다양한 타입을 처리한다.