TIR: Typescript | 함수(6) 오버로드 된 함수 타입 - 221028

Lumpen·2022년 10월 27일
0

TIR

목록 보기
40/40

type Fn = () => void 와 같은 문법은 단축된 함수 타입 문법이다
더 명확히 표현할 수 있다

// 전체 호출 시그니처 
type Fn = {
	(arg1: string, arg2: number): void
}

// 단축형 호출 시그니처
type Fn = (arg1: string, arg2: number) => void

문법은 다르지만 완전히 같은 뜻이다
복잡한 함수일수록 전체 호출 시그니처로 표현하는 것이 좋을 수 있다

함수 타입의 오버로딩이 좋은 예이다
오버로드 된 함수는 호출 시그니처가 어러개
-> 같은 기능을 갖는 함수에 여러 데이터를 처리하도록 재정의 하는것

자바스크립트는 동적 타입 언어이기 때문에 오버로딩 같은 것이 필요 없다 아무 데이터나 넣어서 아무렇게나 반환할 수 있음
하지만 타입 스크립트는 자바스크립트에 정적 타입을 입힌 언어이기 때문에 오버로드 된 함수 시그니처를 이용하여 여러 데이터 타입을 처리할 수 있는 함수를 작성할 수 있다

오버로드된 함수: 호출 시그니처가 여러 개인 함수

대부분 프로그래밍 언어에서 여러 매개변수를 인수로 받아 어떤 타입의 값을 반환하는 함수를 선언 후,
함수가 요구하는 정확한 매개변수 집합을 건네 함수를 호출하면 항상 같은 타입의 반환값을 받게 된다
자바스크립트는 동적 언어로 어떤 함수를 호출하는 방법이 여러가지다
입력 타입에 따라 반환 타입이 달라질 수도 있다

타입스크립트는 이런 동적 특징을 오버로드된 함수 선언으로 제공하고,
입력 타입에 따라 달라지는 함수의 출력 타입은 정적 타입 시스템으로 각각 제공 한다
이런 언어 기능은 타입 시스템의 고급 기능에 속한다

오버로드된 함수 시그니처를 이용하면 표현력 높은 API를 설계할 수 있다

함수 f에 여러 오버로드 시그니처를 선언하면 호출자 관점에서 f의 타입은
오버로드 시그니처들의 유니온이 된다
f를 구현하는 관점에서는 단일한 구현으로 조합된 타입을 나타낼 수 있어야 한다
이 조합된 시그니처는 자동 추론되지 않으므로 f를 구현할 때 직접 선언해야 한다

때문에 타입 스크립트에서는 오버로딩을 다음과 같이 구현한다

type Reserve = {
	(from: Date, to: Date, destination: string): Reservation
    (from: Date, desitination: string): Reservation
}
let reverse: Reverse = (
	from: Date,
  	toOrDestination: Date | string,
  	destination?: string,
) => {}

오버로드 된 함수 시그니처를 두 개 선언 하는데
이렇게 하는 것 보다는
함수를 2개 생성하던가 type을 optional 로 주는 편이 어떨까 싶다..

오버로드는 DOM API 에서 유용하게 활용된다

HTML 태그명을 string으로 받아 엘리먼트를 반환하는 함수를 만든다면

type CreateElement = {
 (tag: 'a'): HTMLAnchorElement 
 (tag: 'canvas'): HTMLCanvasElement
}

let createElement: CreateElement = (tag: string): HTTMLElemet => {}

매개변수는 문자열 리터럴 타입으로 오버로드
기타 상황 추가하여 사용자가 커스텀 내장 타입으로 지원하지 않는 최신 태그명을 전달 후
HTMLELement 를 반환한다
타입스크립트는 선언한 순서대로 오버로드를 해석하므로 오버로드에 지정되지 않은 문자열을 전달하면 HTMLElement로 분류한다

함수를 각각 정의하여 오버로딩 할 수도 있다

function createELement(tag: 'a'): HTMLAnchorElement
function createELement(tag: 'canvas'): HTMLCanvasElement

어떤 문법을 사용할지는 스스로 정하면 된다

전체 타입 시그니처를 함수 호출 방식 오버로딩에만 사용할 수 있는 것은 아니다
함수의 프로퍼티를 만드는 데도 사용할 수 있다
자바스크립트 함수는 호출할 수 있는 객체이므로 다음처럼 프로퍼티를 할당하여
다음과 같은 일을 할 수도 있다

function warnUser(warning) {
 	if (warnUser.wasCalled) return 
  	warnUser.wasCalled = true
  	alert(warning)
}
warnUser.wasCalled = false

type WarnUser = {
	(warning: string): void
    wasCalled: boolean
}

warnUser 는 호출될 수 있는 함수인 동시에 wasCalled 라는 boolean 속성도 가지고 있다

profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글