TypeScript - 함수

타입스크립트에서의 함수

웹 애플리케이션을 구현할 때 자주 사용되는 함수는 타입스크립트로 크게 다음 3가지 타입을 정의할 수 있습니다.

• 함수의 파라미터(매개변수) 타입
• 함수의 반환 타입
• 함수의 구조 타입

함수의 기본적인 타입 선언

타입스크립트의 함수 선언 방법을 이해하기 위해 먼저 간단한 자바스크립트 함수를 보겠습니다.

function sum (a,b,c){
    return a + b + c;
}

위 자바스크립트 함수에 타입을 부여하면 아래와 같습니다.

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

기존 자바스크립트 함수의 선언 방식에서 매개변수와 함수의 반환 값에 타입을 추가하였습니다.

 

참고사항 -> 함수의 반환 값에 타입을 정하지 않을 때는 void라도 사용

 

function log (text:string):void{
    console.log("void")
}

함수의 인자

타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주합니다. 따라서, 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야하며 컴파일러에서 정의된 매개변수 값이 넘어 왔는지 확인합니다. 달리 말하면 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다는 의미입니다.

function sum5(a:number,b:number ,c:number){
    return a + b + c;
}
sum5(10,20);// error, too few parameters
sum5(10,20,30);//60
sum5(10,20,30,40);// error, too many parameters

위와 같은 특성은 정의된 매개변수의 갯수 만큼 인자를 넘기지 않아도 되는 자바스크립트의 특성과 반대됩니다. 만약 이러한 특성을 살리고 싶다면 ?를 이용해서 아래와 같이 정의할 수 있습니다.

function sum5(a:number,b:number ,c:number,d?:number){
    return a + b + c;
}
sum5(10,20);// error, too few parameters
sum5(10,20,30);//60
sum5(10,20,30,40);//타입에러가 없다

매개변수 초기화는 ES6 문법과 동일합니다.

function sum(a: number, b = '100'): number {
  return a + b;
}
sum(10, undefined); // 110
sum(10, 20, 30); // error, too many parameters
sum(10); // 110

REST 문법이 적용된 매개변수

ES6 문법에서 지원하는 Rest 문법은 타입스크립트에서 다음과 같이 사용할 수 있습니다.

function sum5(a:number, ...nums:number[]):number{
    let totalNubmer = 0;
    for(let key in nums){
        totalNubmer += nums[key];
    }
    return a + totalNubmer;
}

this

타입스크립트에서 자바스크립트의 this가 잘못 사용되었을 때 감지할 수 있습니다. 

타입스크립트에서 this가 가리키는 것을 명시하려면 아래와 같은 문법을 사용합니다.

function 함수명(this: 타입) {
  // ...
}