Search
Duplicate
🪓

[TS] 오버로딩

간단소개
타입스크립트의 오버로딩에 대해 간단히 알아보자
팔만코딩경 컨트리뷰터
ContributorNotionAccount
주제 / 분류
TypeScript
Scrap
태그
overloading
9 more properties

오버로딩이란?

일반적으로 오버로딩이란 이름은 같은데 인자가 다른, 그냥 다른 함수를 정의하는 것을 말합니다.
예를 들어 C++이나 Java에서는 아래처럼 이름만 같은, 다른 함수를 여러 개 정의할 수 있습니다.
namespace ft { void someFunction(void); void someFunction(size_t count); }
C++
복사
C++의 오버로딩 예시
package ft; public interface OverloadingExample { void someFunction(void); void someFunction(int count); }
Java
복사
Java의 오버로딩 예시

자바스크립트의 오버로딩?

자바스크립트는 오버로딩 같은 기능을 언어 차원에서 제공하지 않습니다.
일반적인 오버로딩은 이름만 같은, 전혀 다른 함수를 정의하는 것이라고 했는데요,
자바스크립트의 오버로딩은 실제로 같은 함수 안에서 인자에 따라 다른 동작을 하는 것입니다.
function someFunction(...args) { if (args.length === 0) return someFunctionWithNoArgs(); else if (args.length === 1 && typeof args[0] === 'number') return someFunctionWithNumberArgs(args[0]); else throw InvalidArgumentException("인자가 잘못 주어졌는데요?"); }
JavaScript
복사
자바스크립트의 오버로딩 예시
C++이나 Java에서는 오버로딩 된 함수를 잘못된 인자로 호출한다면 컴파일 단계에서부터 오류가 발생합니다.
하지만 자바스크립트는 잘못 호출하는 것을 방지하는 별도의 기능이 없습니다.

타입스크립트의 오버로딩!

자바스크립트에서는 잘못 호출하는 것을 방지하는 별도의 기능이 없다고 했는데요,
타입스크립트에서는 함수 하나에 여러가지 인자와 리턴 타입을 지정할 수 있습니다.
function someFunction(): void; function someFunction(count: number): void;
TypeScript
복사
타입스크립트(.d.ts)의 오버로딩 예시
function optionalMap( map: (data: number) => string, data: number, ): string; function optionalMap( map: (data: number) => string, data: number | null, ): string | null; function optionalMap( map: (data: number) => string, data: number | undefined, ): string | undefined; function optionalMap( map: (data: number) => string, data: number | null | undefined, ): string | null | undefined { return data === null || data === undefined ? (data as null | undefined) : map(data); }
TypeScript
복사
타입스크립트의 오버로딩 예시
단순히 함수 정의 앞에 인자, 리턴 타입이 다른 함수 선언을 추가하기만 하면 됩니다.

오버로딩된 타입을 나타내는 방법

오버로딩된 함수 타입은 interface를 통해 나타낼 수 있습니다.
interface OverloadedFunction { (): void; (count: number): void; }
TypeScript
복사
someFunction에 대한 타입 예시