TypeScript - 함수 유형

안녕하세요, 열정적인 프로그래머 되고자 하는 여러분! 오늘은 TypeScript 함수 유형의 fascinaiting한 세상으로 안내해 드리겠습니다. 프로그래밍에 처음이라면 걱정하지 마세요; 저는 여러분을 단계별로 안내해 드릴 것입니다. 수년간 많은 학생들에게 가르쳐온 경험을 바탕으로입니다. 이 흥미로운 여정을 함께 시작해 보겠습니다!

함수 타이핑

TypeScript에서 함수는 최상위 시민(first-class citizens)으로, 다른 어떤 값과 마찬가지로 취급할 수 있습니다. 하지만 TypeScript가 특별한 이유는 이러한 함수를 타이핑할 수 있는 능력 때문입니다. 상상해 보세요, 당신이 특별한 레시피를 가진 셰프(함수)입니다. 레시피는 필요한 재료(파라미터)와 만들어질 요리(반환 유형)를 알려줍니다.

간단한 예를 보겠습니다:

function greet(name: string): string {
return `Hello, ${name}!`;
}

이 예제에서 greet은 우리의 함수입니다. name이라는 string 타입의 입력을 받아서 string을 반환합니다. 괄호 뒤의 : string은 반환 타입을 지정합니다.

이제 이 함수를 사용해 보겠습니다:

const greeting = greet("Alice");
console.log(greeting); // 출력: Hello, Alice!

TypeScript는 우리가 함수를 정확히 사용하게 합니다. 만약 숫자를 문자열 대신 전달하려 한다면:

greet(123); // 오류: 인자의 타입 'number'은 파라미터의 타입 'string'에 할당할 수 없습니다.

TypeScript는 코드를 실행하기 전에 이 오류를 잡아줍니다. 마치 부엌에서 당신이 실수로 설탕 대신 소금을 사용하지 않도록 도와주는 조력자처럼입니다!

TypeScript 함수 유형 표현

이제 함수 유형 표현에 대해 배워보겠습니다. 이 것들은 우리의 함수에 대한 블루프린트입니다. 실제로 구현하지 않고 함수가 어떻게 보여야 하는지 설명합니다.

일반 문법은 다음과 같습니다:

(parameter1: type1, parameter2: type2, ...) => returnType

예를 들어:

let mathOperation: (x: number, y: number) => number;

이는 mathOperation을 두 개의 숫자를 받아서 숫자를 반환하는 함수를 가질 수 있는 변수로 선언합니다. 마치 "두 개의 재료를 받아서 하나의 요리를 만들 수 있는 셰프가 필요하다"고 말하는 것과 같습니다.

그런 다음 이 변수에 함수를 할당할 수 있습니다:

mathOperation = function(x, y) {
return x + y;
}

console.log(mathOperation(5, 3)); // 출력: 8

함수 유형 변수 선언

우리는 타입 별칭을 사용하여 함수 유형에 이름을 줄 수도 있습니다. 이는 동일한 함수 유형을 여러 곳에서 재사용하고 싶을 때 유용합니다.

type GreetFunction = (name: string) => string;

let greet: GreetFunction;

greet = function(name) {
return `Hello, ${name}!`;
}

console.log(greet("Bob")); // 출력: Hello, Bob!

이 예제에서 GreetFunction은 우리의 타입 별칭입니다. 레시피에 이름을 주어 나중에 쉽게 참조할 수 있도록 한 것입니다.

함수 파라미터를 함수로 지정

때로는 다른 함수에 함수를 파라미터로 전달하고 싶을 때가 있습니다. 이는 프로그래밍에서 강력한 개념으로 "고차 함수(higher-order functions)"라고 불립니다. 마치 다른 셰프를 가르쳐주는 주임 셰프처럼입니다.

예제를 보겠습니다:

function applyOperation(x: number, y: number, operation: (a: number, b: number) => number): number {
return operation(x, y);
}

let result = applyOperation(5, 3, (a, b) => a + b);
console.log(result); // 출력: 8

result = applyOperation(5, 3, (a, b) => a * b);
console.log(result); // 출력: 15

여기서 applyOperation은 우리의 고차 함수입니다. 두 개의 숫자와 함수 파라미터를 받습니다. 우리는 다른 연산 함수를 전달하여 다른 결과를 얻을 수 있습니다.

타입 별칭을 함수 유형에 사용

복잡한 함수 유형을 다루는 데 타입 별칭을 사용하면 코드가 더 읽기 쉬워집니다. 더 복잡한 예제를 보겠습니다:

type MathOperation = (x: number, y: number) => number;
type MathOperationWithDescription = (description: string, operation: MathOperation) => string;

const add: MathOperation = (x, y) => x + y;
const subtract: MathOperation = (x, y) => x - y;

const describeMathOperation: MathOperationWithDescription = (description, operation) => {
return `${description}: ${operation(10, 5)}`;
}

console.log(describeMathOperation("Addition", add)); // 출력: Addition: 15
console.log(describeMathOperation("Subtraction", subtract)); // 출력: Subtraction: 5

이 예제에서 우리는 두 개의 타입 별칭을 만들었습니다: MathOperation과 MathOperationWithDescription. 이는 우리의 코드를 더 읽기 쉽고 유지보수하기 쉽게 만듭니다.

다음 표는 우리가 다룬 함수 유형을 요약합니다:

함수 유형	설명	예제
기본 함수 유형	파라미터 타입과 반환 타입을 지정	(name: string) => string
함수 유형 변수	특정 유형의 함수를 가질 수 있는 변수	let greet: (name: string) => string;
함수 유형 별칭	재사용 가능한 함수 유형 이름	type GreetFunction = (name: string) => string;
고차 함수	함수를 파라미터로 받는 함수	(x: number, y: number, operation: (a: number, b: number) => number) => number

기억하시라, TypeScript의 함수 유형은 우리가 함수를 정확히 사용하도록 보장하는 것입니다. 그들은 마치 도로의 가드레일처럼 우리를 안전하게 유지합니다. 연습을 통해, 여러분의 코드가 더 견고하고 이해하기 쉬워질 것입니다.

계속 코딩하고, 배우고, 그리고 과정을 즐기세요!

Credits: Image by storyset