타입스크립트 정리하기 6. 함수

본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다.

본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다.

 

6. 함수

6-1. 기본 파라미터와 옵션 파라미터

옵션 파라미터

타입스크립트에서는 모든 파라미터가 사용되어야한다. 파라미터 이름 끝에 ?를 추가하면 해당 파라미터를 옵션 파라미터로 설정할 수 있다.

단, 첫 번째 파라미터는 항상 반드시 사용되어야 하는 파라미터이며, 옵션 파라미터로 설정할 수 없다.

function buildName(firstName:string, lastName?:string){
    //....
}

function buildNameInvalid(firstName?:string, lastName:string){
    //Invalid
}

기본파라미터

사용자가 해당 위치의 파라미터를 사용하지 않으면, undefined로 할당되는 argument이다.

기본값이 할당되며, default-initialized 파라미터라고 부른다.

 

function buildNameDefault(firstName:string, lastName:string = "Smith"){
    //lastName => default-initialized parameter
}
buildNameDefault('foo', 'bar'); // firstName = 'foo', lastName = 'bar'
buildNameDefault('foo'); // firstName = 'foo', lastName = 'Smith'
buildNameDefault('foo', undefined); // firstName = 'foo', lastName = 'Smith'

 

6-2. 파라미터로 사용하는 함수

함수 자체를 함수의 파라미터로 받을 수 있다.

 

function foo(otherFunc: Function): void {
    //...
}

6-2-1. constructor를 함수로 받고싶은 경우, 다음과 같이 수행한다.

function foo(constructorFunc: {new()}){
    new constructorFunc();
}

function foo(constructorWithParamsFunc: {new(num:number)}){
    new constructorWithParamsFunc(1);
}

가독성을 위해 인터페이스를 constructor에 대한 인터페이스를 선언할 수 있다.

interface IConstructor {
    new();
}

function foo(constructorFunc: IConstructor){
    new constructorFunc()
}

interface IConstructor {
    new(num: number);
}

function foo(constructorWithParamsFunc: IConstructor){
    new constructorWithParamsFunc(1)
}

제네릭을 사용하는 방법도 있다.

interface ITConstructor<T, U>{
    new(item: T): U;
}

function foo<T,U>(constructorFunc: ITConstructor<T,U>, item: T): U{
    return new constructorFunc(item)
}

6-2-2. 단순하거나 constructor를 받을 필요가 없는 경우에도 거의 동일하다.

function foo(func: { (): void}){
    func()
}

function foo(constructorWithParamsFunc: { (num:number): void }){
    new constructorWithParamsFunc(1);
}

제네릭과 인터페이스를 동시에 사용하여 가독성을 더 높일 수 있다.

interface IFunction {
    (): void;
}

function foo(func: IFunction){
    func();
}

 파라미터와 함께 사용할 수 있다.

interface INumFunction {
    (num:number): void;
}

function foo(func: INumFunction){
    func(1)
}

제네릭을 추가할 수 있다. 

interface ITFunc<T,U>{
    (item: T):U;
}

function foo<T,U>(func: ITFunc<T,U>, item:T):U{
    return func(item)
}

 

6-3. Union 타입 함수

타입스크립트의 함수는 여러 개의 파라미터를 받을 수 있고, 미리 정의된 union type을 사용할 수 있다.

function whatTime(hour:number|string, minute:number|string){
    return hour+':'+minute;
}

whatTime(1,30);
whatTime('1',30);
whatTime(1,'30');
whatTime('1','30');

모든 결과는 동일하게 '1:30'을 반환한다.

 

타입스크립트에서 파라미터는 union된 타입이라 해도 하나의 타입으로 간주한다. 함수를 만들 때, union한 타입의 대상 중 하나를 선택하여 반환값의 타입으로 지정해야 한다.

function addTen(start:number|string){
    if(typeof start === 'string'){
        return parseInt(start)+10;
    }
    else{
        return start+10;
    }
}

6-4. 함수의 타입

명명된 함수

function multifly(a,b){
    return a*b;
}

익명함수

let multifly = function(a, b) {return a*b;};

람다/화살표 함수

let multifly = (a,b) => { return a*b;};