[TypeScript] 자바스크립트와 비교한 타입스크립트의 장점 두 가지

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다.

첫 번째 장점: 에러의 사전 방지

이러한 자바스크립트 코드가 있다고 해 보자. 이런 코드는, 제대로 정의가 되었는지, 오류가 없는지 등을 브라우저를 실행해야지만 확인할 수 있다.

 

반면에 이렇게, JSDoc 방식으로 타입 정의를 하게 되면 response.를 쳤을 때 뒤에 

이런 식으로 지정해둔 형태를 사용할 수 있게 된다. 34행의 response.address.city의 경우, cit 이런식으로 의도적으로 오타를 작성한다면 자바스크립트에서는 별다른 alert가 없지만 타입스크립트에서는 있지 않은 속성(property)이라는 오류를 코드 상에서 띄운다. 이것이 타입스크립트가 자바스크립트에 비해 가진 장점이라고 할 수 있겠다. 항상 브라우저를 실행해서, 에러를 확인하는 게 아니라 어느정도의 케이스들은 전부 코드 상에서 확인할 수 있다. 즉 에러를 사전에 방지할 수 있다는 것이다.

sample.js

이 간단한 자바스크립트 함수는, a와 b 매개변수에 대해 type이 모두 any로 지정되어 있다. 즉 어떠한 값도 들어갈 수 있다는 것이다. 그래서, 위에서 sum(10, '20')을 보면 알겠지만 자바스크립트에서는 문자열 + 숫자를 전부 문자열로 취급하기 때문에 '1020'이 출력이 된다.

반면에 타입스크립트에서는 이러한 문제를 해결할 수 있다.

sample.ts

똑같은 함수가 있다고 해 보자. (sum이 아닌 add로 표현했지만 똑같은 함수임) 이 때에, 타입스크립트에서는 매개변수 각각(a: number, b:number), 그리고 반환값까지(: number { ... }) 타입을 지정해줌으로써 add라는 함수에 들어갈 매개변수의 타입을 미리 정의하게 된다. 이렇게 할 경우 사진에서 볼 수 있다시피 두 번째 매개변수에 문자열을 넣었을 때 바로 오류를 띄워주게 된다.

 

두 번째 장점: 코드 가이드 및 자동 완성

두 번째 장점은 result라는, add함수의 실행 값을 변수로 지정했을 때 result가 number type으로 지정이 되어있기 때문에 여기서 .을 누르면 number 타입이 가질 수 있는 모든 property를 사용할 수 있다는 점이다. 예를 들면..

number type에만 사용 가능한 toLocaleString(객체로 된 문자열 반환 속성)이라든지.. 이런 것들 말이다. 이는 자바스크립트에서는 불가능하다. 이렇게 property를 사용할 수 있다는 것은, 즉 자동완성을 할 수 있다는 것도 된다. 따라서 타입스크립트를 사용하게 되면 자동완성과 코드 가이드가 제공되어 좀더 빠르고 정확하게 코드를 작성할 수 있게 된다. 이것이 타입스크립트가 자바스크립트와 비교했을 때 가진 두 번째 장점(코드 가이드 및 자동 완성)이다.