[TypeScript] : 타입스크립트의 함수 정의

지난 시간에 알아봤듯이 타입스크립트는 거의 자바스크립트 언어와 쓰는 방식이 동일하다. 차별 점이 있다면 Type Restriction을 두어서 발생할 수 있는 Human Error를 사전에 방치해서 시간을 절약하는 것이 있다는 것이고 다른 하나는 변수 선언 및 할당 시 타입을 지정해주는 것이다. 이런 규칙은 함수를 정의 할 때도 비슷하다.

✍️ 타입스크립트 내에서의 함수 정의

📝 일반적인 타입 선언 방법

자바스크립트에서 다음과 같은 함수가 정의 되었다고 해보자.

조금 더 다양한 예제를 위해 함수 선언문과 함수 표현식 둘 다 써볼 것 이다.

function playerMaker(name) {
    return {
        name: name,
    };
}

const developerMaker = (name) => {
    return {
        name: name,
    };
};

둘 다, 타입이 지정되지 않는 name을 매개변수로 삼아서 그 name이 사용되는 객체를 리턴한다.

이 2개의 함수를 타입스크립트라면 다음과 같이 적용 할 수 있다.

function playerMaker(name: string): string {
    return {
        name: name,
    };
}

const developerMaker = (name: string): string => {
    return {
        name: name,
    };
};

매개변수 바로 옆에 타입을 써주고 결과 값이 산출되는 코드 블록 바로 옆에 타입을 써주는 것으로 간단하게 함수에 타입스크립트 문법을 적용 할 수 있다.

📝 Call Signature & Overloading

이 전 시간에서 타입 Alias를 통해서 알았듯이 함수에서도 type을 간편하게 위에서 선언해서 적용 시키는 방식이 있는데, 이 것을 Call Signature라고 한다.

다음과 같은 예제를 통해서 간단히 알아볼 수 있다.

//일반적인 타입스크립트로 작성된 함수가 다음과 같다면

function add(a: number, b: number) :number {
    return a + b;
}

//Call Signature를 통해 함수를 다음과 같이 정의 할 수 있다. 

type Add = (a: number, b: number) => number;

const add2: Add = (a, b) => a + b;

그리고 이렇게 작성된 Call Signature에 다음과 같이 2가지 이상의 조건이 붙은 경우를 Overloading이라고 한다.

type Addition = {
    (a: number, b: number): number;
    (a: number, b: string): number;
};

const add3: Addition = (a, b) => {
    return a + b;
};

확실히 타입스크립트가 자바스크립트에서 확장된 언어라서 그런지, 조금만 공부하면 바로 적용할 수 있을 것 같다.

점점 대세가 되어가고 있는 타입스크립트 끝까지 공부해보자!