[TypeScript]함수의 타입

함수 타입

함수의 타입은 예시와 같이 정의할 수 있습니다. 함수의 매개 변수 오른쪽에 콜론을 입력하고 타입을 정의하면 됩니다

반환 타입은 매개 변수 괄호를 닫고 콜론을 입력하고 타입을 정의하면 됩니다.

타입을 정의한 후에 함수 내부의 각 변수에 마우스를 올려보면 해당 타입이 나타납니다.

nameText2 변수의 age를 number 타입으로 정의해뒀기 때문에 substr같은 string 메소드를 사용하려고 하면 에러가 발생합니다

getText 함수를 사용하는 코드를 살펴보면 value1은 정해진 타입을 준수하는 매개 변수를 인자로 넣었기 때문에 정상적으로 동작합니다

value2를 살펴보면 2번째 인자에 number가 아닌 string값이 들어가기 때문에 에러가 발생합니다

value3를 살펴보면 함수의 리턴 타입은 string으로 정의해두었는데 리턴 타입을 number로 정의했기 때문에 에러가 발생합니다

함수를 저장할 변수의 타입은 예시와 같이 화살표 함수를 이용할 수 있습니다

함수를 구현하는 코드에서는 따로 타입을 정의하지 않아도 됩니다

parameter에 마우스를 올려보면 name 과 age의 타입이 string, number 라는 것을 알 수 있습니다

그리고 반환 타입으로 숫자를 입력하게 되면 에러가 발생합니다

함수를 저장하는 변수에 있는 타입 정보를 이용하는겁니다

매개 변수 이름 오른쪽에 물음표 기호를 입력하면 선택 매개 변수가 됩니다

이를 영어로는 optional parameter(옵셔널 파라미터)라고 부릅니다

따라서 language는 문자열도 가능하고 undefined 일 수도 있습니다

그래서 해당 함수 내부 코드에서는 undefined를 고려해서 코드가 작성 된 것을 볼 수 있습니다

함수를 호출할때는 language를 입력해도 되고, 또는 입력하지 않아도 됩니다

하지만 마지막 함수 호출을 보면 language에 number 값을 넣고 있죠?

이럴 경우에는 당연히 에러가 발생합니다.

위 예시는 매개 변수에 기본 값을 입력하는 코드 인데요

age에는 15를, language에는 korean을 입력하고 있습니다. 따라서 age를 입력하지 않으면 15가 사용되겠죠.

age는 명시적으로 number라고 입력했지만 language는 따로 입력하지 않았습니다 .

사실 기본값이 문자열이기 때문에 language는 자동으로 string이 됩니다.

그리고 기본 값이 있다는 얘기는 이러한 값들을 입력하지 않아도 된다는 것이기 때문에 함수의 타입을 보면 age와 language에 물음표 표시가 보여집니다.

앞서 말씀드렸던 옵셔널 파라미터가 된것이죠 함수를 사용할때에는 매개 변수에 한가지 값만, 혹은 두가지, 혹은 세가지 값을 모두 사용할 수 있습니다.

이번 예시에서는 ... 이라는 것이 보이는데요 이것은 나머지 매개 변수를 표현한 것입니다 영어로는 rest parameter 라고 부릅니다.

이렇게 함수를 사용할때 첫번째 매개변수를 입력하고 뒤에 입력하는 모든 것을 rest parameter에 담는 것이죠.

rest parameter의 타입은 항상 배열로 정의를 해야 합니다.

예시에서는 number의 배열이라고 했기 때문에 문자열을 입력하면 에러가 발생합니다.

출처
이 포스팅은 이재승 개발자님의 타입스크립트 시작하기 강의와
타입스크립트 공식 웹 사이트 프로젝트인 TypeScript-Handbook 을 통해서
공부한 내용을 기반으로 작성되었습니다