Jan 4, 2021
TypeScript 함수(Functions)
본 포스트는 TypeScript Handbook을 기반으로 작성되었습니다.
안녕하세요. 휴먼스케이프 Dia입니다. 😀
이전 글(TypeScript 인터페이스)에 이어 이번 포스트 에서는 TypeScript의 함수에 대해 알아보겠습니다.
함수(Function)
TypeScript에서 함수는 JavaScript에서와 동일하게 기명함수(named function)와 익명함수(anonymous function)로 선언될 수 있으며, 외부의 변수를 참조할 수 있습니다.
함수 타입(Function Types)
함수에 타입 선언하기
TypeScript에서는 함수로 전달되는 매개 변수와 함수의 반환 값이 타입 지정 대상이며, TypeScript는 반환 문을 보고 반환 값의 타입을 파악할 수 있으므로 반환 타입은 생략이 가능합니다.
함수 구조 타입 작성하기
앞에서 지정한 타입을 바탕으로 아래와 같이 함수 전체의 타입을 작성할 수 있습니다. 함수 구조 타입도 동일하게 매개 변수 타입과 반환 타입으로 이루어져 있으며, =>로 연결해 줍니다. 리턴 타입은 함수 구조 타입의 필수적인 부분 이므로 값을 반환하지 않는 함수라면 비워두는 것이 아니라 void를 사용해 줍니다.
(매개 변수1: 매개 변수1 타입, 매개 변수2: 매개 변수2 타입) => 리턴 타입
변수명은 가독성을 위한 것으로, 아래와 같이 작성할 수도 있습니다.
눈치채셨겠지만, 함수 내에서 참조하는 외부 변수는 타입 작성 대상이 아닙니다.
타입 추론
아래의 예제에서 처럼 방정식의 한 쪽에만 타입이 지정되어 있더라도 타입스크립트 컴파일러는 타입을 추론할 수 있습니다. 이를 “문맥 상의 타입(contextual typing)” 이라고 하며, 많은 경우 이를 활용하여 코드의 양과 수고를 줄일 수 있습니다.
매개 변수
자바스크립트에는 모든 매개 변수는 선택 사항(optional)인 것과 다르게 타입스크립트에서는 정의된 모든 매개 변수는 필수값으로 간주 되며, 정의되지 않은 매개 변수는 인자로 전달될 수 없습니다.
선택(Optional) 매개 변수
만약, 선택 사항으로 두고 싶은 인자가 있다면 ?를 이용해 아래와 같이 정의할 수 있습니다. 여기서 주의할 사항은 optional한 매개 변수는 필수적인 매개 변수 보다 앞서 정의될 수 없습니다.
매개 변수의 기본값 정의
타입스크립트에서는 매개 변수에 기본값을 설정할 수 있어, 사용자가 인자에 값을 제공하지 않으면 매개 변수를 기본 값으로 초기화 합니다.
기본값이 설정된 매개 변수는 선택 매개 변수처럼 취급 됩니다. 아래의 두 함수는 모두 (firstName: string, lastName?: string) => string의 타입을 공유한다고 볼 수 있습니다.
기본값이 설정된 매개 변수는 선택 매개 변수와는 다르게 꼭 필수 매개변수 다음에 정의될 필요는 없습니다. 하지만, 초기 값이 설정된 매개 변수가 필수 매개 변수 앞에 오는 경우 인자로 undefined를 명시적으로 전달해야 합니다.
Rest 매개 변수
Rest 매개 변수는 Spread 문법(…)을 사용하여 매개 변수를 작성한 형태를 말합니다. Rest 파라미터를 사용하면 인자를 함수 내부에서 배열로 전달받을 수 있습니다. 몇 개의 인자가 전달될 지 모르거나, 여러개의 인자를 그룹으로 전달받아 처리하고 싶을 때 유용한 방법입니다. 단, Rest 파라미터는 함수 정의 시 매개 변수의 마지막에 위치해야 합니다.
오버로드(Overloads)
앞에서 언급한 것처럼 타입스트립트는 함수를 선언할 때 명시한 매개 변수 만큼의 인자를 받아야 합니다.
타입스크립트에서 오버로드(Overloads)는 함수명은 같지만 매개 변수의 타입과 반환 타입이 다른 여러 함수를 가질 수 있는 것을 말합니다. (단, 매개 변수의 수는 동일해야 합니다!) 컴파일 시간에 가장 적합한 오버로드를 선택해 컴파일 하기 때문에 런타임 비용이 발생하지 않는 특징이 있습니다.
This
자바스크립트에서 함수를 호출할 때 매개 변수로 전달되는 인자값 뿐만 아니라 arguments 객체 및 this가 함수 내부로 암묵적으로 전달 됩니다. 즉, this는 함수가 호출될 때 설정되는 변수 입니다.
함수 내 this는 호출 시점에 따라 전역 객체를 참조하거나, undefined가 되어버려 원하는 context를 참조하지 않게 되기도 합니다. 이를 해결하기 위해 call, apply 또는 bind 메서드를 사용하여 this를 직접 명시해 주거나, 함수 생성 시 this를 참조하는 화살표 함수(arrow function)을 사용해 줄 수 있습니다. 자바스크립트의 this에 대한 더욱 자세한 내용은 “JavaScript 함수 호출 및 this의 이해”를 참고해 주세요.
타입스크립트에서는 위에 언급한 패턴으로 this를 바인딩 하더라도 함수 내부에서 this의 타입을 알 수 없기 때문에 this는 any 타입이 됩니다.
this 매개 변수
이 경우 컴파일러에 --noImplicitThis 옵션을 주면 에러를 반환하게 됩니다.
타입스크립트에서 this는 아래와 같이 매개 변수의 첫 번째 자리에 가짜(fake) 매개 변수 this를 전달해 명시해 줄 수 있습니다.
위의 예제에 this의 타입을 명시해 주면 아래와 같이 수정할 수 있습니다.
콜백에서의 this
콜백 함수(callback function)는 다른 함수의 인자로 전달될 수 있는 함수입니다. 콜백 함수의 경우 콜백을 호출하는 라이브러리가 일반 함수처럼 실행할 것이기 때문에 this는 undefined가 됩니다. 따라서 콜백으로 함수가 전달되었을 때 this를 구분해 주어야 하는 경우 아래와 같이 강제해 줄 수 있습니다.
this: void 라고 정의해 주었으므로, addClickListener 의 onclick 콜백 함수는 함수 내부에서 this를 필요로 하지 않는 함수 입니다.
아래의 경우에는 에러가 발생하게 됩니다.
만약, 콜백 함수 내부에서 this를 사용하고 싶다면, 화살표 함수를 사용할 수 있습니다.
여기까지 TypeScript Handbook의 함수(Function)에 대해 살펴보았습니다.
감사합니다.
Walk with us!
기술이 세상을 더 아름답게 할 수 있다고 믿으신다면, 휴먼스케이프와 함께 소중한 뜻을 펼칠 수 있습니다.
함께 걸어가며 성장하실 분, 언제든지 연락해주세요 :)
