타입스크립트 | 변수에 함수 타입(function type) 선언하기

타입스크립트에서 함수의 매개변수 반환 값에 대해 타입을 정의하는 것과 같이 함수 전체에 대한 타입이 있습니다. 함수 타입을 정의하는 법에 대해 알아보고 몇 가지 예를 살펴보도록 하겠습니다.

---

함수 타입

함수를 호출할 때 필요한 중요한 정보는 함수의 매개변수와 그 타입 그리고 리턴되는 값입니다. 함수 타입도 매개변수 타입과 리턴 타입의 조합으로 정의합니다.

위 Hello함수는 문자열을 매개변수로 받고, 문자열을 반환합니다. 우리는 const x: string 과 같이 변수에 타입을 선언하는 것처럼 이 함수의 참조를 가지는 변수를 선언할 수 있습니다.

let 키워드를 사용한 후 변수 이름 helloFunc 뒤에 콜론을 적어 그 뒤에 함수 타입을 지정합니다. 함수 타입을 지정하는 구문은 화살표 왼쪽과 오른쪽으로 나눠서 생각하면 편합니다. 화살표 왼쪽에는 매개변수와 매개변수 타입을 괄호로 묶고 적어줍니다. 화살표 오른쪽에는 함수의 반환 타입을 적어줍니다. 함수 선언에서 사용하는 화살표를 화살표 함수와 혼동하면 안 됩니다. 약간 비슷해 보이지만 함수가 아닙니다.

변수를 선언하고 타입을 지정하면 동일한 타입의 함수를 변수에 할당할 수 있습니다. 할당하는 함수의 타입이 변수 선언의 타입과 일치하지 않으면 타입스크립트에서 컴파일러 에러가 발생합니다. 함수를 할당하고 나면 선언한 변수의 이름을 사용하여 함수를 호출할 수 있습니다.

---

함수 타입 실습

몇가지 함수 타입을 선언하고 사용해보는 실습을 해보겠습니다. 우선 함수 하나를 선언해 보겠습니다.

함수 CreateString은 문자열과 숫자 두 개의 매개변수를 사용해서 문자열로 연결한 후 반환합니다.

함수를 실행해서 리턴 값을 myStr 변수에 할당해주었습니다. myStr 변수를 콘솔로 출력하였습니다. 컴파일 후 실행해보면 콘솔에 메시지가 잘 출력됩니다.

이제 함수 CreateString을 변수에 할당하겠습니다.

변수 이름을 StringGen으로 지정했습니다. 변수 이름 뒤에 콜론을 추가한 다음 함수 타입을 지정합니다. 타입에서 지정한 매개변수의 이름(name)이 함수의 매개변수 이름(str)과 다른 걸 확인할 수 있습니다. 이것은 타입에 영향을 미치지 않습니다. 즉 함수의 매개변수 명과 타입 선언의 매개변수 명이 같지 않아도 됩니다. StringGen변수에 CreateString을 할당하였고 이제 StringGen 변수를 사용하여 함수를 호출할 수 있습니다.

콘솔 출력에 hi50이 잘 출력되는 것을 볼 수 있습니다.

 

인라인 함수 할당하기

마지막 실습으로 변수의 유형과 일치하는 인라인 함수를 직접 할당해 보도록 하겠습니다.

선언한 함수 CreateString을 할당하는 대신 인라인 함수로 설정하고 있습니다. 실행 결과 역시 예상한 결과를 얻을 수 있습니다. 기억해야할 중요한 점은 인라인 함수의 타입이 변수의 타입과 같다는 것입니다. 변수를 사용해서 선언하고 타입이 같은 경우 해당 변수에 함수를 할당할 수 있습니다.