[TS] TS Doc Handbook 1회독 - 3

More on Functions

함수 타입 표현식

type Function = (a: string) => void;

(매개변수: 타입 default any) => 반환타입

 

// 호출 시그니처
type Function = {
  description: string;
  (someArg: number): boolean;
};

함수 내부 프로퍼티의 경우 함수 타입 표현식으로는 불가능하기에 객체 타입으로 표현한다.

// 구성 시그니처
type Constructor = {
  new (s: string): SomeObject;
};

생성자 함수의 경우 new 키워드를 사용한다.

 

제네릭 함수

// <Type>이 메인
function firstElement<Type>(arr: Type[]): Type | undefined {
  return arr[0];
}

// 타입 제한
<Type extends { length: number }>

다양한 타입에 대해 함수를 사용하기 위함

function minimumLength<Type extends { length: number }>(
  obj: Type,
  minimum: number
): Type {
  if (obj.length >= minimum) {
    return obj;
  } else {
    return { length: minimum }; // 오류
  }
}

위 코드는 제너릭 함수를 사용하다 보면 발생할 수 있는 오류입니다.

 

좋은 제네릭 함수 가이드라인

1. 타입 매개변수 누르기(Push Type Parameters Down): 가능하면 타입 매개변수를 제약하지 말고 그 자체를 사용해라

2. 더 적은 타입 매개변수 사용하기(Use Fewer Type Parameters)

3. 타입 매개변수는 두 번 나타나야 한다(Type Parameters Should Appear Twice): 제네릭이 필요 없는지 확인하라

 

선택적 매개변수(Optional Parameters)

콜백 함수에서 사용할 때 ''' 콜백에 대한 함수 타입을 작성할 때, 해당 인수 없이 호출할 의도가 없는 한, 절대로 선택적 매개변수를 사용하지 말아라 '''라는 규칙을 따라야 합니다.

 

함수 오버로드

2개 이상의 오버로드 시그니처를 적고 본문을 작성하면 됩니다. 실제로 사용하는 경우에는 오버로드 시그니처 없이 본문만 작성해도 동작에 문제는 없습니다만, 주석 용도로 적어놓는 것은 좋아 보입니다.

function makeDate(timestamp: number): Date; //  오버로드 시그니처
function makeDate(m: number, d: number, y: number): Date; // 오버로드 시그니처
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}
const d1 = makeDate(12345678);
const d2 = makeDate(5, 5, 5);

 

공식문서에서 추천하는 방법은 오버로드 대신 유니온 타입을 사용하는 것입니다.

 

함수 내부의 this 선언하기

JS에서 매개변수의 이름으로 this를 사용하지 못합니다. 이에 TS는 this의 타입을 정의하는데 매개변수 이름을 this를 사용하는 것을 허용합니다.

interface DB {
  filterUsers(filter: (this: User) => boolean): User[];
}
// 실제로 this라는 이름을 가진 매개변수가 있는 것이 아닌,
// filter callback 함수 내부에서 사용되는 this의 타입이
// User임을 알려주기 위한 코드

 

추가 타입

void

object: 원시 값이 아닌 모든 값. Object, {}, object는 셋 모두 다른 것이다.

unknown: 모든 값을 나타내 any와 유사하지만, 어떤 것을 대입하는 것이 유효하지 않기 때문에 더 안전하다.(?)

never

Function: any를 반환하며 언제나 호출될 수 있음을 의미한다.

 

나머지 매개변수, 인수

...구문을 사용해 매개변수나 인수를 사용할 수 있다. 그런데 TS에서 해당 타입은 any가 아닌 any[]로 사용됩니다. 그런데 나머지 인수를 사용할 때 받아들이는 인수의 개수가 한정적이라면 에러가 발생할 수 있습니다. 그럴 때 일반적으로 as const를 사용합니다.

 

매개변수 구조 분해

 

함수의 할당가능성

void 반환 타입이 아무것도 반환하지 않도록 강제하지 않는다.

type voidFunc = () => void;

const f1: voidFunc = () => {
  return true;
};
 
const f2: voidFunc = () => true;
 
const f3: voidFunc = function () {
  return true;
};

// 위 세 함수는 () => void 타입이다.

// 하지만 리터럴 함수 정의가 void 반환 값을 가진다면, 어떤 값도 반환하면 안 됩니다.
function f2(): void {
  // @ts-expect-error
  return true;
}
 
const f3 = function (): void {
  // @ts-expect-error
  return true;
};

 

 

참고

무료 사이트 모음 2021, 자라는 것을 잘하는 개발, 2025.02.06

https://www.typescriptlang.org/ko/docs/handbook/typescript-from-scratch.html, 2025.02.06

https://opentutorials.org/course/5080, 생활코딩, 2025.02.06