TypeScript란?
TypeScript란 JavaScript의 확장된 언어입니다. 즉, 타입스크립트는 결국 자바스크립트 기반인 프로그래밍 언어입니다. 새로 만들어진 언어가 아닌 자바스크립트 언어를 사용하여 새로운 기능과 장점이 추가된 언어입니다.
타입스크립트는 브라우저(또는 node.js)와 같은 자바스크립트 환경에서 실행할 수 없습니다. 타입스크립트를 브라우저에서 실행하기 위해서는 순수 자바스크립트 파일로 변환해주어야 합니다.
이 변환 과정을 우리는 "트랜스파일링"이라고 부르며 "타입스크립트 컴파일러"를 사용하여 트랜스파일 작업을 합니다.
타입스크립트 구문들은 컴파일 과정에서 모두 "제거"가 됩니다. 즉, 런타임 시점에 아무런 영향을 주지 않으며 단지 빌드 타임 오버 헤드를 갖고 있습니다.
타입스크립트 파일은 파일 확장자를 ".ts(tsx)"로 생성합니다.
TypeScript의 목표
1. 에러 사전 방지(런타임 이전)
자바스크립트에서 변수의 타입을 따로 지정하여 사용하지 않습니다. 변수는 어떤 타입의 값이든 할당받을 수 있으며, 할당받는 값에 따라 동적으로 변수의 타입이 결정됩니다(동적 타이핑).
하지만 타입스크립트를 통해 "정적(런타임 이전)"으로 변수에 대한 타입을 미리 지정하여 발생할 수 있는 에러를 미리 방지할 수 있습니다.
이외에도 존재하지 않는 프로퍼티나 메서드에 대한 접근시 에러를 표시하고, 함수의 경우 지정된 개수만큼 인수를 전달하고 전달되는 인수의 타입까지 정적으로 미리 지정하여 런타임에 발생할 수 있는 에러에 대해서 사전 방지할 수 있습니다.
sum 함수 호출문은 인수로 숫자 10과 문자열 10을 전달하면서 호출하고 있습니다. 이는 자바스크립트 문법상 아무런 문제가 되지 않습니다.
개발자는 sum 함수가 인수로 숫자만을 전달받고, 반환값으로도 숫자를 반환되도록 기대하여 작성한 함수입니다.
위 그림처럼 Preview에 a는 any, b도 any, 함수에도 any가 표시된 것을 볼 수 있습니다. 이는 매개변수 a, b 그리고 함수의 반환값 모두 어떤 타입(any)의 값이든 가질 수 있다는 의미입니다.
이번에는 sum 함수는 TypeScript로 작성해보겠습니다.
위 그림처럼 호출문의 인수에 에러가 발생하게 됩니다. 이는 우리가 지정한 함수 반환값의 type이 아니기 때문에 에러가 발생하게 됩니다. 그리고 Preview를 보면 any 대신에 매개변수와 함수에 우리가 지정한 타입인 number가 표시되고 있는 것을 확인할 수 있습니다.
2. 코드 자동 완성
TypeScript를 사용하면 코드 생산성에도 도움을 줍니다.
타입스크립트에게 미리 타입을 알려줌으로써 해당 타입으로 접근가능한 API에 대해서 "자동완성을 표시"하여 오탈자 발생을 미리 방지할 수 있으며, 접근 불가능한 API 접근시에는 에러를 표시하게 됩니다.
위 코드에서 sum 함수의 반환값을 number라고 지정했기 때문에 result 변수에 할당되는 값 또한 number이 됩니다. 즉, 타입스크립트는 result 변수에 할당될 값이 number 타입임을 인지하고 관련된 API에 대해서 자동완성을 표해줍니다.
그리고 number 타입으로 접근할 수 없는 다른 API에 접근시 타입스크립트는 접근할 수 없는 API에 접근하고 있다고 인지하고 에러를 표시하게 됩니다.
위 코드처럼 result 변수에 할당된 값으로 String.prototype.split() 메서드 접근시 타입스크립트는 number 타입에 해당 메서드는 존재하지 않다고 에러를 표시합니다.
자동완성 단축기 설정
참고로 자동완성에 대한 단축기를 설정하기 위해서 "바로 가기 키"에서 단축기 설정이 가능합니다.
"triggerSuggest"명령에 키 바인딩을 원하는 단축기로 설정하여 사용할 수 있습니다.
