TypeScript[6] Function

- Function

---

함수 또는 메소드를 정의할때 TypeScript은 인자와 반환값에 타입을 설정해준다.

JavaScript는 타입이라는 것이 없기때문에 가독하기위해 메소드명과 변수명에 타입을 명시할 수 밖에 없었다.

function getMonthFromString(dateOfStringFormat){ //date 인자는 string
    const monthOfNumberFormat = parseInt(dateOfStringFormat.subString(4,6),10); //month 반환값은 Number

}

굉장한 불편함과 만약 인자값으로 string이 아닌 다른 타입의 인자값이 들어왔다면 에러가 발생하게 된다.

TypeScript는 이러한 단점을 보완하고자 

const getMonth = (data:string) =>{ return parseInt(data.substr(4,6),10)} 

인자와 반환값에 타입을 설정하여 메소드명과 변수명이 훨씬 짧아졌다.

그럼에도 불구하고 해당 함수가 하는 역할을 ES6으로 작성했을때 보다 명확해졌으며, 불필요한 방어코드 마저 사라진다.

- Function overloading

---

함수 오버로딩의 개념은 정적 타입 언어와 동적 타입 언어와의 차이점이 있다.

C나 Java 같은 정적 타입 언어의 경우, 매개변수의 개수와 타입에 따라서 정적으로 여러 개의 함수를 구현할 수 있다.

반면 JavaScript는 하나의 함수 내부에서 타입 검사를 해서 동적으로 오버로딩을 구현할 수 있다.

TypeScript의 경우, 오버로딩이 불가능하지는 않지만 그 방식은 정적 타입 언어인 C나 Java보다는 동적 타입 언어인 JavaScript와 유사하다.

다시 말해 다른 인자를 받는 여러 개의 함수를 구현하는 것이 아니라, 하나의 함수에서 인자의 타입이나 개수에 따라 여러 분기를 태우는 것이다. 

일단 TypeScript는 함수에 정해진 타입과 정해진 수의 인자를 넘기지 않으면 에러를 발생시키므로 함수를 선언할 때 어느 정도의 유연성을 확보해야 오버로딩을 구현할 수 있다. 인자 갯수의 유연성을 확보하는 방법중 먼저 Optional Parameter 다.

- Optional Parameter

---

말 그대로 선택적 매개변수, 즉 호출할 때 끼워줘도 되고 안 끼워줘도 되는 매개변수이다. 두 경우 모두 에러없이 호출할 수 있으므로 함수 오버로딩에 필수적이다.

function optional(name : string, eng? : boolean){
    if(eng){
        name ="LeeMinWoo";
    }
    return name;
}

console.log(optional("이민우")); // 이민우

   console.log(optional("이민우",true)); //LeeMinWoo

 ?  키워드가 붙은 매개변수는 넣어도 안 넣어도 함수 호출에 문제는 없지만 해당 매개변수의 유무에 따라 다르게 동작하는 optional parameter가 된다.

- Union Type

---

위에서는 인자의 개수에 따라 다른 동작을 시킬 수 있게 되었다. 하지만 인자의 타입에 따라 다른 동작을 수행시키고 싶다면 어떻게 해야 할까?

 class Person{

    age : number;
    constructor(age : number){ // error
        this.age=age;
    }
    constructor(person : Person){ // error
        this.age =person.age
    }
    
}

위처럼 생성자에 다른 타입의 매개변수를 넘기는 경우 다른 동작을 호출할 수 있도록 구현하고 싶지만 TypeScript는 중복된 식별자를 가진 메소드 구현을 지원하지 않으므로 에러가 발생한다.

이런 경우는 Union Type을 사용하면 해결이 가능한데 아래의 예제를 살펴보자.

class Person{
    age : number;
    constructor(arg: number | Person){
        if(typeof arg === 'number'){
            this.age=arg
        } else if(arg instanceof Person){
            this.age=arg.age;
        }
    }

}

타입 정의 사이에 껴있는  | 연산자가 보이는가? 해당 연산자는 OR를 의미하며, 이 코드를 해석할때 arg라는 매개변수의 타입이 number 혹은 Person 타입이 될수 있다라는 뜻이다. 즉, 생성자 내부에서 타입 검사를 해서 오버로딩을 할수 있을 것이다. 나머지 타입을 통해 호출하게 되면 에러를 발생 시킨다.

- Default Parameter , Rest Parameter

---

const getRandomNumber = (min:number = 0,max:number = 10): number =>{
    return Math.floor(Math.random() * (max-min))+ min;
}

console.log(getRandomNumber(1)); 

위 코드에서는 인자가 넘겨지지 않았을 경우(undefined), 지정해준 값으로 인자를 설정합니다. 명시적으로 null 을 인자로 넘겨주면 default 로 설정된 매개변수를 무시하고 null을 인자로 넘겨준다.

지정한 인자를 모두 넘기지 않으면 에러를 발생하던 TypeScript도 default parameter 가 지정되어 있으면 에러를 발생시키지 않는다.

function buildName(firstName:string, ...restOfName:string[]){
    return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph","Samuel","Lucas","Mackinzie");

console.log(employeeName);

Rest parameter는 무한한 개수의 Optional parameter로 취급된다. Rest parameter에 인수를 전달할때 원하는 만큼의 파라미터를 입력할 수 있다.

그리고 또한 아무것도 입력하지 않아도 된다. 컴파일러는 줄임표(...)로  입력된 이름에 나머지 파라미터들을 배열로 만들어 입력한다. 이 배열 파라미터는 함수 내부에서 사용할 수 있다. 

https://hyunseob.github.io/2016/11/18/typescript-function/

https://jaeyeophan.github.io/2017/12/18/TS-3-Function-in-TypeScript/    

https://infoscis.github.io/2017/05/20/TypeScript-handbook-functions/