타입스크립트의 함수

이 글은 타입스크립트의 함수에 대해 설명합니다.

YouTube Video

타입스크립트의 함수

타입스크립트의 함수는 타입 주석이 추가된 자바스크립트 함수입니다. 타입스크립트에서는 함수의 입력값(매개변수)과 출력값(반환값)의 타입을 명확히 정의하여 더 견고한 코드를 작성할 수 있습니다. 아래에서는 타입스크립트에서 함수 정의의 기본 방법과 함수의 특징들을 소개합니다.

기본 함수 정의

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• add 함수는 두 개의 number 타입 인자를 받아서 number 타입의 값을 반환합니다.
• 이 함수는 타입이 명시적으로 지정된 number 타입의 두 인자 x와 y를 받습니다.
• 반환 타입도 : number로 명시되어 있습니다.

익명 함수(함수 표현식)

익명 함수와 함수 표현식은 타입스크립트에서도 사용할 수 있습니다. 타입은 같은 방식으로 주석 처리할 수 있습니다.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• 익명 함수를 변수에 할당한 뒤 나중에 호출할 수 있습니다.

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• 이름이 있는 함수 표현식을 사용해서 재귀 호출을 할 수 있습니다.

화살표 함수

화살표 함수에서도 타입 주석을 사용할 수 있습니다.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

이 코드는 두 개의 숫자를 인자로 받아 그 차이를 반환하는 타입 주석이 있는 subtract 화살표 함수를 정의합니다.

선택적 매개변수와 기본값 매개변수

매개변수를 선택적으로 만들거나 기본값을 설정할 수 있습니다.

선택적 매개변수

매개변수 이름 뒤에 ?를 추가하면 선택적으로 만들 수 있습니다.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

이 코드는 선택적인 인자를 받을 수 있으며, 인자가 주어지면 그 이름으로 인사하고, 그렇지 않으면 일반적인 인사를 반환합니다.

기본값 매개변수

매개변수에 기본값을 설정할 수도 있습니다.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

이 함수는 인자가 전달되지 않으면 "Guest"를 기본값으로 사용하여 지정된 이름이나 기본 이름으로 인사합니다.

함수 타입 정의

함수 자체의 타입을 정의하는 것도 가능합니다. 예를 들어, 함수를 매개변수로 전달할 때 사용됩니다.

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

이 코드는 두 개의 숫자를 받아 숫자를 반환하는 Operation 함수 타입을 정의하고, 이를 사용해 덧셈과 곱셈 함수를 만든 뒤 실행합니다.

반환값이 없을 때(void 타입)

반환 값이 없는 함수에서는 void 타입을 지정하십시오.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

이 코드는 문자열 메시지를 받아 값을 반환하지 않고 콘솔에 출력하는 void 함수 logMessage를 정의합니다.

콜백 함수

함수를 다른 함수의 인수로 전달하고 나중에 실행하게 하는 것을 콜백 함수라고 합니다. 비동기 처리 및 이벤트 처리에서 자주 사용됩니다.

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

이 예제에서는 값을 콘솔에 출력하는 함수가 콜백 함수로 전달됩니다.

또는 type이나 interface를 사용하여 콜백 타입을 정의할 수 있습니다.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

type이나 interface를 사용하여 콜백 타입을 정의하면 재사용성이 향상됩니다.

함수 오버로딩

함수 오버로딩을 사용하면 동일한 이름이지만 서로 다른 매개변수 목록을 가진 함수를 정의할 수 있습니다. TypeScript에서는 동일한 이름의 여러 함수를 정의하고 매개변수의 타입 및 개수에 따라 다른 작업을 수행할 수 있습니다.

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

TypeScript에서 오버로딩은 다음과 같이 구현됩니다:.

• 오버로드 시그니처

  • 함수가 어떻게 사용될 수 있는지(그 시그니처)를 정의합니다. 이를 여러 번 작성함으로써 오버로딩이 가능해집니다.

• 구현 시그니처

  • 실제 함수 본문을 구현합니다. 이 부분은 한 번만 정의되며, 오버로드 시그니처에 선언된 모든 경우를 처리합니다.

오버로딩 규칙

함수 오버로딩에는 다음 규칙이 적용됩니다:.

• 오버로드 시그니처 정의 순서

  • 평가는 위에서 아래로 진행되므로, 구체적인 타입을 먼저 정의하고 더 일반적인 타입을 그 뒤에 정의하는 것이 권장됩니다.

• 구현 시그니처의 호환성

  • 구현 시그니처는 모든 오버로드 시그니처의 인수 및 반환 값과 호환되어야 합니다.

• 오버로드 시그니처에 세부사항을 명시하세요

  • 구현 시그니처는 모호한 경향이 있으므로, 오버로드 시그니처에 세부사항을 명시해야 합니다.
  • 구현 시그니처만 정의되면 함수에 대한 타입 추론이 충분하지 않을 수 있습니다.

요약

TypeScript의 함수는 다음과 같은 특징을 가지고 있습니다.

• 타입 주석
  • 인자와 반환값의 타입을 지정하면 더 안전한 코드를 작성할 수 있습니다.
• 익명 함수 및 화살표 함수
  • JavaScript와 마찬가지로 사용할 수 있으며, 타입 주석을 추가하면 타입 안정성이 향상됩니다.
• 선택적 및 기본 매개변수
  • 필요에 따라 인자 지정 방식을 더 유연하게 만들 수 있습니다.
• 함수 타입 정의
  • 함수 자체의 타입을 정의하여 타입 검사를 수행합니다.
• 함수 오버로딩
  • 동일한 함수 이름으로 다양한 인자를 지원할 수 있습니다.

이를 활용하면 TypeScript에서 더욱 명확하고 견고한 코드를 작성할 수 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video