Typescript를 사용하는 이유는 무엇일까?

1. Javascript와 Typescript의 차이

 Typesciprt와 Javascript의 가장 큰 차이는 Typescript는 정적 타이핑을 할 수 있다는 것이다. 

// Javascript
const a = 3;
const b = '5';
console.log(a*b)

// Typescript
const a:number = 3;
const b:string = '5';
console.log(a*b)

let bar: number = true; // error TS2322: Type 'true' is not assignable to type 'number'.

* 변수 타입에 맞지 않는 값을 주면 컴파일 과정에서 에러가 발생한다.

 

2 기존 Javascript의 단점

 동적 타이핑을 하는 Javascript의 경우 변수의 타입이 자주 변하기 때문에 코드를 예측하기 힘들어 오류를 만들 가능성이 높다. 또한 개발 도구(IDE나 컴파일러)가 변수나 함수등의 반환값의 타입을  알 수 없어 코드 어시스트등의 기능을 지원할 수 없게 한다.

 

3. Typescript의 사용 목적

 ⓵ '자바스크립트를 실제로 사용하기 전에 있을만한 타입 에러들을 미리 잡는 것' 이다.

 ⓶ Typescript를 사용하면 개발자가 의도한 변수나 함수등의 목적을 더 명확하게 전달하고, 잘못된 변수/함수 사용에 대한 Error알림을 풍부하게 피드백 받을 수 있다. 

 ⓷ 개발자 간의 상호작용(특히 프론트엔드- 백엔드) 과정에서 Type을 지정해 줌으로써 수도 없이 바뀌는 데이터 포맷의 신뢰도를 높이고 오류를 쉽게 찾을 수 있기 때문에 디버깅 과정을 단축시킬 수 잇다.

 

4. Typescript 오류수정의 예시(출처: Seong-Am Kim님 블로그)

Javascript

  위 코드의 경우 개발자는 현재 달이 2월이니 두달 뒤의 계산 값으로 4월이 나오길 기대한다. 하지만 결과 값은 ‘22’ 가 출력된다. 이는 getCurrentMonth의 return 값의 Type이 String이고 calculateTowMonthsLater 함수에서 계산될때 Javascript에서는 9번줄의 계산에서 2가 자동으로 String으로 형변환(Type Conversion)되기 때문이다. 암묵적 형변환이 실행되기 때문에 오류를 찾기 위해 시간이 오래걸릴 수 있다.

Typescript

 Typescript로 코드를 실행하면 개발도구가 바로바로 에러를 찾아주기 때문에(위의 코드에서 빨간밑줄) 디버깅에 사용하는 시간을 단축시킬 수 있다.

 

5. Typescript의 특장점

 

⓵ 기존 Javascript 소스와의 호환

    Typesciprt를 사용할 때, Typescript가 런타임에서 그대로 돌아가는 경우는 드물다.  Typescript는 컴파일을 통해 Javascript로 변환되는 것이 일단 첫번째 목적인데, 그렇기 때문에 기존의 Javascript와 함께 사용하는 것이 가능하며, Javascript 런타임은 그 컴파일된 Javascript를 기존의 Javascript 파일과 실행 가능하게 되는 것이다.

 

⓶ 다른 언어와의 문법 유사성

  애초에 Javascript가 C, C++, 자바나 C#같은 언어들처럼 (), {}, ; 등을 사용하는 C-family언어이기 때문에 문법적으로 유사함을 내세우는 Typescript 역시 C-family인데, 그 정도가 특히 더 가까워져서, 예를 들면 Generic에 <> 기호를 쓴다. Typescript가 자바, C#, C++와는 본질적으로 비슷하지도 않지만, Typescript를 처음 입문하는 기존 개발자들은 '어! 저거 제네릭이네!' 라고 빠르게 이해할 수 있을 것이다. 거기에 interface, const 같은 지시문 역시 기존 언어 사용자들이 익숙하다고 느낄만한 사용방법을 갖고 있다.

 

⓷ IDE등 개발도구와의 궁합

타입 개념의 도입을 통해 TypeScript 개발을 지원하는 IDE로부터 풍부한 피드백을 받을 수 있다. 일반적인 여느 정적 타입 언어들처럼 자동 완성을 지원하거나, 해당 타입이 지원하지 않는 연산의 시도나 잘못된 인자를 사용한 함수 호출 등을 코딩 중에 즉석에서 검출할 수 있는 것은 기본. 심볼의 이름을 변경하면 해당 심볼을 참조하는 모든 코드들을 자동으로 수정해주는 리팩토링 기능 역시 JavaScript가 아닌 TypeScript이기 때문에 지원될 수 있는 기능이다. 

 

⓸ 과감한 신규문법 도입

Node.js를 포함해서 기존 Javascript 생태계에는 언어의 버전이 올라가도 어느정도 하위호환성을 위해 빠르게 새로운 문법을 추가하거나 기존 문법을 변경하지 못한다. Javascript 문법이 아무리 급진적으로 발전하고 있다 하더라도 신규문법이 제안되어서 거절되는 경우도 많고, 채용이 결정되더라도 실제로 사용이 가능하는데까지 여러 절차를 거치며 최소 1~2년은 걸린다.

 반면 Typescript의 경우 어차피 사용하려면 컴파일과정을 거쳐야 하며 이 과정에서 하위호환성을 따지는게 약간 무의미해지기 때문에 제안단계에 있던 유력한 신규문법들을 ECMA 보다도 더 빠르게 채용하고 있다.

 

6. Typescript 사용시 주의사항

 

⓵ Javascript 컴파일로 동작 

Typescript는 결국 Javascript로 컴파일되어 동작하므로 '런타임에는 약타입' 이라는 약점이 있다. 이는 가정이 맞았을 때 자신의 코드가 잘 동작함을 보장할 뿐이지 사용자가 실제로 어떤 값을 보냈는지 검사하지는 않는다. 따라서 자신의 프로그램이 외부로부터 신뢰할 수 없는 데이터를 받아오는 경계선을 파악하고 필요할 경우 런타입 타입 검사 코드를 추가해야 한다.

 

⓶ 생소한 기능

 복잡한 객체를 안전하게 활용할 수 있도록 제공되는 Typescript의 대표적인 도구가 Advanced Type과 Utility Type인데, 이 기능들은 Javascript 뿐만이 아니라 다른 언어에서도 생소한 개념이기 때문에 개발자들에게 익숙하지 않을 가능성이 상당히 높다. 모든 개발자가 문서를 한번 보고 응용 가능할 정도가 아니기 때문에, 첫 도입시에 이 부분을 간과하면 오히려 도입 전보다 생산성이 안좋아질 수도 있다는 점에 유의하는 것이 좋다.

 

⓷ Javascript 라이브러리 호환성

다른 사람이 만든 라이브러리를 TypeScript에서 쓰려면 해당 라이브러리가 TypeScript로 작성되었거나, 별도로 .d.ts 형식의 타입 정의(type definition) 파일을 제공해야 한다. 이용자가 많고 유명한 라이브러리들은 대부분 다른 개발자들의 재능기부를 통해 타입 정의를 제공하고 있지만, 일부 라이브러리의 경우 타입 정의가 없어서 TypeScript에서 사용할 수 없다.

 

Reference

- https://poiemaweb.com/typescript-typing

- https://namu.wiki/w/TypeScript

- https://jay-flow.medium.com/%EC%99%9C-%ED%83%80%EC%9E%85-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%EC%95%BC-%ED%95%98%EB%8A%94%EA%B0%80-ae511aad8fe8

- https://typescript-kr.github.io/