[FE] TypeScript

TypeScript

MS에 의해 개발, 관리되고 있는 오픈소스 프로그래밍 언어

대규모 개발에 있어서 발생하는 JS의 문제를 해결하기 위한 JS의 확장된 언어

=> ES5의 Superset이기 때문에 기존의 JS 문법을 그대로 사용 가능

=> ES6의 새로운 기능들을 사용하기 위해 별도 트랜스파일러를 사용하지 않아도 기존의 자바스크립트 엔진에서 실행 가능

 

Dynamic Typing을 지원하는 JS와 달리 직접 타입을 부여해주어야 하는 정적 타입의 언어

브라우저에서 실행하기 위해선 파일을 JS로 한번 변환하는 컴파일 작업을 거쳐야 함

정적 타입 언어

TS는 JS의 단점 중 하나인 동적으로 타입을 지정하는 특징을 보완하기 위해 등장

JS는 변수 타입이 런타임에 지정되는 대표적인 동적 타입 언어

동적 타입 언어는 배우기 쉽고 유연하다는 장점이 있지만 런타임 에러 발생 가능성이 높다는 단점이 치명적

=> 특히 큰 규모의 프로젝트에서 개발 도중 에러를 찾기 너무 어렵다...!

 

TS는 정적 타입 언어로 변수의 타입을 명시적으로 지정해서 사용

function sum(a, b) {
  return a + b;
} // js

function sum(a: number, b: number): number {
  return a + b;
} // ts

위의 두 코드는 모두 숫자 a, b를 인자로 받아 더한 값을 리턴해주는 함수

만약 해당 함수에 각각 '10', '20'을 인자로 주면 어떻게 될까?

Dynamic Typing을 지원하는 JS는 문제없이 '1020'이라는 문자열을 결과로 도출

하지만 TS에서 동일하게 실행한다면 number타입에 문자열이 입력될 수 없다고 에러를 띄워줌

=> 의도하지 않은 코드의 동작을 예방

런타임 에러 vs 컴파일 에러

'10', '20'이라는 값을 주면 둘 다 문자열이기 때문에 JS는 문자열끼리 그냥 합쳐버린다

그렇다면 문자열과 숫자를 주면 어떤 일이 발생하는걸까?

 

sum(10, 'a')로 각각 숫자와 문자열을 인자로 주었다고 가정

TS는 프로그램이 실행되기 전 컴파일 과정에서 'number가 들어와야 하는데 string이 들어왔잖아...?' 하고 컴파일 에러가 발생

하지만 JS는 아무런 문제를 확인하지 못하고 실행되다가 프로그램이 돌고 있는 중간에 '둘이 type이 달라서 못 더하겠는데?' 하고 런타임 에러가 발생

 

물론 지금은 코드가 간단해서 바로 에러를 확인하고 고치면 되지만 규모가 큰 코드라면...?

잘 돌아가던 코드가 이유없이 죽어버리는 경우가 있으니까 TS를 사용하면 이런 부분을 사전에 방지할 수 있음

TypeScript 동작과정

TS는 기본적으로 JS 기반의 언어이기 때문에 JS로 변환한 뒤 자바스크립트 런타임에 의해 수행

간단하게 동작과정을 살펴보자

1. 개발자가 TS로 코드를 작성하면 타입스크립트 컴파일러(tsc)에 의해서 타입스크립트 AST 코드로 변경
2. 파싱 된 타입스크립트 AST 코드는 타입 검사기에 의해 타입이 체크되고 컴파일러를 통해 자바스크립트 코드로 변환

=> 이후의 과정은 자바스크립트 런타임에 의해 JS와 마찬가지로 실행

TypeScript의 장점

- 손쉬운 버그 예방

컴파일을 하는 과정에서 타입을 결정하므로 타입에 맞지 않는 데이터가 들어가면 컴파일 에러 발생

또한 JS에 비교적 정확한 에러메세지를 보여주니까 디버깅하기에도 좀 더 쉽다

- 강력한 도구 지원

프론트 개발을 할 때 많이 사용되는 VS Code는 툴의 내부가 TS로 작성되어 있고, TS 개발에 최적화

function sum(a, b) {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString(); // js

예를 들어서 위와 같은 코드가 있다고 하자

위의 코드에 total 값은 type이 지정되어 있지 않아서 number의 API인 toLocaleString()를 일일이 작성해줘야 함

그런데 만약 타입스크립트로 작성한다면?

function sum(a: number, b: number): number {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString(); // ts

변수 total에 대한 타입이 지정되어 있기 때문에 VSCode에서 해당 타입에 대한 API를 미리보기로 띄워줄 수 있다는 소소한 장점

TypeScript의 단점

- 초기 세팅의 어려움

TS는 독자적인 언어가 아니기 때문에 기존의 JS 엔진에서 실행

이를 위해서 기본적으로 설치해야 하는 모듈이 존재하고, 컴파일을 하기 위한 옵션들도 설정해야 함

=> 이를 보완하기 위해 'Create React App', 'Vue CLI', 'Angular CLI' 같은 TS를 지원하는 초기 세팅 도구가 존재

- 유연하지 못한 코드 작성

number나 string 말고 object같은 복잡자료형일 경우에는 TS에서 선언해줘야 하는 것이 상당히 많음

=> JS로 세 줄이면 되는 애들을 막 10줄 씩 작성해야 하는 경우 발생

 

코드를 작성하는데 오래걸린다는건 생산성과도 직결

게다가 TS가 익숙하지 않은 개발자라면 매번 타입을 지정해줘야 하기 때문에 번거로울 수 있으며, 타입 어노테이션으로 인한 타입 에러로 오히려 JS보다 생산성이 떨어질 수 있음

반드시 타입스크립트를 사용해야 할까?

사실 JS의 장점인 유연성과 빠른 코딩은 TS를 사용해도 개발자의 역량으로 어느정도 해결이 가능한 부분

또 TS에 있는 any라는 자료형을 이용하면 JS와 비슷하게도 개발 할 수 있음

 

물론 TS는 JS에 비해 비교적 어려워 진입장벽이 분명히 존재

하지만 규모가 큰 프로젝트를 한다면 비교적 가독성이 좋고, 컴파일로 많은 에러를 사전 예방 할 수 있는 TS가 장기적으로는 더 좋지 않은가 하는 개인적인 생각

---

SuperSet 상위 확장을 의미하는 말