[TypeScript] Typing Functions and Signatures

이번 글에서는 코드의 기능과 타입 안전을 보장하는 함수와 서명 입력에 중점을 둡니다. 함수 매개변수와 반환 타입에 주석을 다는 방법을 이해하는 것은 효과적인 타입스크립트 개발을 위해 매우 중요합니다. 코드베이스에 명확성과 자신감을 부여하는 함수 입력의 미묘한 차이를 살펴보세요.

1. Function Parameter and Return Type Annotations

타입 어노테이션을 사용하여 함수 매개변수 타입과 반환(Return) 타입을 명시적으로 지정할 수 있습니다.

1
2
3
4
5
6
function add(x: number, y: number): number {
return x + y;
}

let result: number = add(3, 5);
console.log(result); // Output: 8

이 예제에서 add 함수는 number 타입의 매개변수 두 개를 받아 number 타입의 값을 반환합니다.

2. Optional and Default Parameters

매개변수 이름 뒤에 ?을 추가하여 선택적 매개변수로 만들 수 있으며, = 구문을 사용하여 기본값을 제공할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
function greet(name: string, greeting?: string): string {
if (greeting) {
return `${greeting}, ${name}!`;
} else {
return `Hello, ${name}!`;
}
}

console.log(greet('John')); // Output: Hello, John!
console.log(greet('John', 'Hi')); // Output: Hi, John!

이 예제에서 greet 함수에는 선택적 매개변수(greeting)가 있으며, 이 매개변수가 제공되면 인사말에 사용됩니다.

3. Function Types and Variable Assignment

함수에 대한 타입을 정의하고 변수에 할당할 수 있습니다.

1
2
3
4
5
6
7
8
9
// Function type definition
type MathOperation = (a: number, b: number) => number;

// Function assigned to a variable with the defined type
const multiply: MathOperation = (x, y) => x * y;

let multiplicationResult: number = multiply(4, 6);

console.log(multiplicationResult); // Output: 24

여기서 MathOperationnumber 타입의 매개변수 두 개를 받아 number를 반환하는 함수를 나타내는 타입입니다.

4. Function Overloads

함수 오버로드를 사용하여 함수에 대해 여러 타입 서명을 제공할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
// Function overloads
function combine(a: string, b: string): string;
function combine(a: number, b: number): number;
function combine(a: any, b: any): any {
return a + b;
}

let stringResult: string = combine('Hello, ', 'world!');
let numberResult: number = combine(3, 5);

console.log(stringResult); // Output: Hello, world!
console.log(numberResult); // Output: 8

이 예제에서 combine 함수에는 여러 타입 서명이 있어 두 개의 문자열 또는 두 개의 숫자를 받아들일 수 있습니다.

결론

함수와 매개변수를 올바르게 입력하면 코드 명확성을 높이고, 더 나은 도구 지원을 가능하게 하며, 개발 중에 잠재적인 오류를 포착할 수 있습니다.

Share