타입스크립트 - 함수

함수

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

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

더하기 기능을 하는 함수를 만들면 아래와 같습니다. 

return 값이 없으면 void라고 적어줍니다. 

 

선택적 파라미터(Optional Parameter)

인터페이스에서 했던 것처럼 ?를 이용해서 선택적으로 매개변수를 받을 수 있습니다.(매개변수의 타입은 지켜줘야합니다)

참고로 자바스크립트처럼 기본값(Default Value)를 넣어서 똑같이 구현할 수도 있습니다.

 

 

선택적 파라미터를 사용하면서 주의해야할점은 해당 매개변수는 필수 매개변수의 뒤쪽으로 와야합니다. 

만약 선택적 매개변수가 앞으로 온다면 매개변수를 1개만 받았을 때 어떤 매개변수를 입력했는지 알 수 없기 때문입니다.

 

 

여기서 age를 앞에오게 하고 싶으면 | 연산자를 사용할 수 있습니다. 

age에는 number와 undefined 형식이 들어갈 수 있고 만약 값이 들어가지 않는 경우 명시적으로 undefined를 적어줘야합니다. 

 

나머지 매개변수(Rest)

매개변수로 전개구문을 사용할 수도 있습니다. 이 경우 매개변수 타입은 배열형태가 됩니다. 

 

 

인터페이스와 함수(this)

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

User인터페이스로 만든 Sam 객체를 this로 지정하기 위해서 showName에다가 Sam을 bind했습니다. 

그런데 this가 어떤 타입인지 알 수 없기 때문에 오류가 발생합니다. 

this 타입을 정의해주기 위해서는 첫 번째 매개변수로 this의 타입을 정의해 주면 됩니다. 

만약 다른 매개변수가 있더라도 맨 앞에 this의 타입을 정의해줄 수 있습니다.

이 때는 매개변수를 받더라도 this가 아닌 다음 요소에 받은 매개변수가 들어가게 됩니다. 

 

 

함수오버로딩

매개변수로 number타입의 요소를 받는지, string 타입의 요소를 받는지에 따라 다른 결과값을 반환하고 싶을 수 있습니다. 

아래를 보면 에러가 발생하는데 이유는 sam이나 jane이 User나 string객체를 반환하는 것에 대한 확신이 없기 때문입니다.

이처럼 타입스크립트는 함수가 작동하기 전에 발생할 수 있는 에러를 체크해줄 수 있는 장점이 있습니다. 

 

위의 에러를 해결하기 위해 함수 오버로딩을 사용할 수 있습니다. 

어떤 타입의 age를 받았을 때 어떤 타입의 리턴값을 반환할 것인지를 명확하게 해 주면 오류는 사라지게 됩니다. 

즉  age가 string이면 string타입의 리턴값, age가 number이면 User타입의 리턴값을 반환한다고 명시적으로 작성했습니다.