[타입스크립트] 함수 타입

타입스크립트에서 함수 타입은 함수의 매개변수와 반환 값의 타입을 명확하게 지정하여 코드의 안정성을 높이고 개발 생산성을 향상시키는 중요한 개념입니다.

기본적인 함수 타입

// 매개변수가 없고 숫자를 반환하는 함수
function add(x: number, y: number): number {
    return x + y;
}

// 빈 배열을 반환하는 함수
function createArray(): string[] {
    return [];
}

• 함수 선언: function 함수명(매개변수: 타입, ...): 반환타입 형태로 선언합니다.
• 매개변수: 각 매개변수의 타입을 명시합니다.
• 반환 값: 함수가 반환하는 값의 타입을 명시합니다.

함수 타입 별칭

// 함수 타입에 별칭을 부여
type AddFunction = (x: number, y: number) => number;

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

• type 키워드: 함수 타입에 별칭을 부여하여 코드 가독성을 높입니다.
• 화살표 함수: 함수 표현식을 간결하게 작성할 수 있습니다.

함수 타입의 다양한 활용

• 인터페이스: 함수 타입을 인터페이스의 프로퍼티 타입으로 사용할 수 있습니다.
• 제네릭: 함수 타입에 제네릭을 사용하여 재사용성을 높일 수 있습니다.
• 옵셔널 매개변수: 매개변수에 ?를 붙여 선택적인 매개변수로 만들 수 있습니다.
• 기본 매개변수: 매개변수에 기본값을 설정할 수 있습니다.
• rest 매개변수: 나머지 매개변수를 배열로 받을 수 있습니다.

// 인터페이스에 함수 타입 포함
interface User {
    name: string;
    getId: () => number;
}

// 제네릭 함수 타입
function identity<T>(arg: T): T {
    return arg;
}

// 옵셔널 매개변수
function logging(message: string, userId?: number) {
    // ...
}

// 기본 매개변수
function greet(name: string, greeting: string = 'Hello') {
    // ...
}

// rest 매개변수
function sum(...numbers: number[]): number {
    return numbers.reduce((total, n) => total + n, 0);
}

함수 타입 활용 시 주의점

• 타입 추론: 타입스크립트는 많은 경우 함수의 타입을 자동으로 추론하지만, 명시적으로 타입을 지정하는 것이 좋습니다.
• 오버로드: 동일한 함수 이름으로 다양한 시그니처를 가진 함수를 정의할 수 있습니다.
• 함수 서명: 함수 서명은 함수의 타입을 나타내는 중요한 요소입니다.

왜 함수 타입을 사용해야 할까요?

• 코드 안정성: 컴파일 시점에 타입 오류를 잡아내어 실행 시 예기치 못한 오류를 방지합니다.
• 코드 가독성: 함수의 역할과 사용법을 명확하게 나타내어 코드 이해도를 높입니다.
• 도구 지원: IDE의 자동 완성, 리팩토링 등 다양한 도구를 활용하여 개발 효율을 높일 수 있습니다.

타입스크립트에서 함수 타입을 선언하는 방법은 여러 가지가 있습니다. 각각의 방법은 코드의 가독성, 유연성, 그리고 특정 상황에 맞는 적합성 등에서 차이를 보입니다.

1. 함수 시그니처 인터페이스

• 특징: 함수의 형태를 정의하는 가장 일반적인 방법입니다. 인터페이스를 사용하여 함수의 매개변수와 반환 값의 타입을 명확하게 지정합니다.

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(src, sub) {
  return src.search(sub) !== -1;
}

 

2. 함수 타입 별칭

• 특징: 함수 시그니처 인터페이스와 유사하지만, 별칭을 사용하여 더 간결하게 표현할 수 있습니다.

type SearchFunc = (source: string, subString: string) => boolean;

let mySearch: SearchFunc;
mySearch = function(src, sub) {
  return src.search(sub) !== -1;
}

 

3. 화살표 함수 타입

• 특징: 화살표 함수 표현식을 사용하여 함수 타입을 간결하게 정의합니다.

let mySearch: (source: string, subString: string) => boolean;
mySearch = function(src, sub) {
  return src.search(sub) !== -1;
}

4. 콜백 함수 타입

• 특징: 다른 함수의 매개변수로 전달되는 함수를 의미합니다.

function myForEach(arr: any[], callback: (item: any) => void) {
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i]);
  }
}

5. 제네릭 함수 타입

• 특징: 다양한 타입의 값을 다룰 수 있도록 제네릭을 사용하여 함수 타입을 정의합니다.

function identity<T>(arg: T): T {
  return arg;
}

이미 다양한 함수 타입 선언 방식에 대해 살펴보았지만, 더욱 심층적으로 다양한 스타일과 활용법을 알아보고자 합니다.

1. 인터페이스를 활용한 함수 타입 선언의 추가적인 예시

// 객체 메서드 타입 정의
interface User {
  name: string;
  getId(): number;
  // 옵셔널 매개변수를 가진 메서드
  setAddress?(address: string): void;
}

• 객체의 메서드 타입: 인터페이스를 사용하여 객체의 메서드 타입을 정의할 수 있습니다. 이는 객체 지향 프로그래밍에서 매우 유용합니다.
• 옵셔널 매개변수: ?를 사용하여 매개변수를 선택적으로 만들 수 있습니다.

2. 제네릭 함수 타입의 활용

// 다양한 타입의 배열을 처리하는 함수
function map<T, U>(array: T[], fn: (item: T) => U): U[] {
  return array.map(fn);
}

• 다중 제네릭: T와 U라는 두 개의 제네릭 타입을 사용하여 더욱 유연한 함수를 만들 수 있습니다.

3. 함수 오버로딩

function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  // ...
}

• 다중 시그니처: 동일한 함수 이름으로 여러 개의 시그니처를 정의할 수 있습니다. 컴파일러는 호출 시 전달되는 인자를 기반으로 적절한 시그니처를 선택합니다.

4. 함수 타입과 인덱스 시그니처

interface Dictionary {
  [index: string]: string;
}

function getValue(dict: Dictionary, key: string): string {
  return dict[key];
}

• 인덱스 시그니처: 객체의 프로퍼티 타입을 동적으로 지정할 수 있습니다.

5. 함수 타입과 this 키워드

interface Calculator {
  add(x: number, y: number): number;
}

let calc: Calculator = {
  value: 10,
  add(x: number, y: number): number {
    return this.value + x + y;
  }
};

• this 타입: 메서드 내에서 this가 가리키는 객체의 타입을 명시할 수 있습니다.

6. 함수 타입과 콜백 지옥 해결

async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  return data.json();
}

• 비동기 함수: async/await 키워드를 사용하여 비동기 코드를 동기 코드처럼 작성할 수 있습니다.

7. 함수 타입과 조건부 타입

type TypeName<T> = T extends string ? 'string' :
  T extends number ? 'number' :
  T extends boolean ? 'boolean' :
  'object';

• 조건부 타입: 타입 가드를 사용하여 타입을 분기할 수 있습니다.

8. 함수 타입과 mapped type

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

• mapped type: 기존 타입을 기반으로 새로운 타입을 생성할 수 있습니다.