이번 포스팅은 저번 포스팅의 연장선으로 타입스크립트에서 함수를 어떻게 사용할 수 있는지에 대해서 알아보려고 합니다!
참고한 강좌 영상은 아래 첨부합니다 :)
목차
0. 기본 사용법
TypeScript에서의 함수는 타입 지정을 제외하면 JavaScript와 다를 게 없습니다.
더하기 기능을 하는 함수를 만들면 아래와 같습니다.
return값이 없기 때문에 함수 선언의 마지막에 void라고 적어줍니다.
0.0. Optional Parameter
인터페이스에서 했던 것처럼 ?(Optional Parameter)를 이용해서 선택적으로 매개변수를 받을 수 있습니다.
매개변수를 받는 경우 당연히 매개변수의 타입은 지켜줘야 합니다.
아니면 자바스크립트처럼 기본값을 넣어서 똑같이 구현할 수도 있습니다.
조금 주의해야 할 점은, Optional Parameter를 사용하게 되는 경우 해당 매개변수는 필수 매개변수의 뒤쪽으로 와야 합니다.
어떻게 보면 당연한 내용이죠? 만약 선택적 매개변수가 앞으로 온다면 매개변수를 1개만 받았을 때 어떤 매개변수를 입력했는지 알 수 없을테니까요.
나는 반드시 age를 앞에 오게 하고 싶다면!!
| 연산자를 사용할 수 있습니다.
age에는 number와 undefined 형식이 들어갈 수 있고, 만약 값이 들어가지 않는 경우 명시적으로 undefined를 적어주면 됩니다.
0.1. 전개 구문
매개변수로 전개 구문을 사용할 수도 있습니다.
이 경우 매개변수의 타입은 배열형태가 됩니다.
1. 인터페이스와 함수
이번에는 인터페이스와 함수를 엮어서 사용해보도록 하겠습니다.
User 인터페이스로 만든 Sam 객체를 this로 지정하기 위해서 showName에다가 Sam을 bind했습니다.
그런데 this가 어떤 타입인지 알 수 없기 때문에 빨간 밑줄이 뜨게 됩니다.
this의 타입을 정의해주기 위해서는 첫 번째 매개변수로 this의 타입을 정의해 주면 됩니다.
만약 다른 매개변수가 있더라도 맨 앞에 this의 타입을 정의해줄 수 있습니다.
이 때는 매개변수를 받더라도 this가 아닌 다음 요소에 받은 매개변수가 들어가게 되죠.
1.0. 함수 오버로딩
매개변수로 number 타입의 요소를 받는지, string 타입의 요소를 받는지에 따라 다른 결과값을 반환하고 싶을 수 있습니다.
아래처럼 만들면 내부에서 if문을 통해 처리를 해 줬음에도 불구하고 아래에서 사용하려고 하면 빨간 밑줄이 뜨는데요!
이것은 sam이나 jane이 User나 string객체를 반환하는 것에 대해 확신이 없기 때문입니다.
이처럼 TypeScript는 함수가 작동하기 전부터 발생할 수 있는 에러를 체크할 수 있다는 큰 장점이 있습니다.
아무튼 이런 문제를 해결하기 위해서는 함수 오버로딩을 사용하면 됩니다.
어떤 타입의 age를 받았을 때 어떤 타입의 리턴값을 반환할 것인지를 명확하게 해 주면 오류는 사라지게 됩니다.
아래 예시에서는 age가 string이면 string타입의 리턴값, age가 number이면 User타입의 리턴값을 반환한다고 명시적으로 작성하였습니다!
최근댓글