TS overview

TS란?

JS를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어.

TS의 특징

1. 컴파일 언어, 정적 타입 언어

JS는 동적 타입의 인터프리터 언어로 런타입에서 오류를 발견할 수 있음. 반면 TS는 정적타입의 컴파일 언어이며 TS컴파일러 or 바벨을 통해 JS코드로 변환됨.

장점: 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있음.

단점: 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있음.
2. JS 슈퍼셋(superset) JS 기본 문법에 TS의 문법을 추가한 언어이다. 따라서 유효한 JS로 작성한 코드는 확장자를 .ts로 변경하고 TS로 컴파일해 변환할 수 있다.
3. 객체 지향 프로그래밍 지원 TS는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체지향 프로그래밍 패턴을 제공한다.

TS 사용을 고려해야 하는 이유

1. 높은 수준의 코드 탐색과 디버깅

TS는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다. 실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%가 사전에 타입스크립트로 감지할 수 있다고 한다.
2. JS 호환

TS는 JS와 100% 호환된다. 따라서 FE 또는 BE 어디든 JS를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있습니다. TS는 앱과 웹을 구현하는 JS와 동일한 용도로 사용 가능하며 서버 단에서 개발이 이루어지는 복잡한 대형 프로젝트에서도 빛을 발한다.
3. 강력한 생테계

TS는 그리 오래되지 않은 언어임에도 불구하고 강력한 생태계를 가지고 있다. 대부분의 라이브러리들이 TS를 지원하며 MS의 VSCode를 비롯해 각종 에디터가 TS 관련 기능과 플러그인을 지원한다.
4. 점진적 전환 가능

기존의 JS 프로젝트를 TS로 전환하는데 부담이 있다면 추가 기능이나 특정 기능에만 TS를 도입함으로써 프로젝트를 점진적으로 전환할 수 있습니다. JS에 주석을 추가하는 것에서부터 시작해 시간이 지남에 따라 코드베이스가 완전이 바뀌도록 준비 기간을 가질 수 있다. 하지만, 새로운 프로그래밍 언어에 대한 러닝 커브(Learning Curve), 상대적으로 낮은 가독성, 코드량 증가 등의 이유로 TS 사용을 망설이는 개발자가 많습니다. 프로젝트 성격에 따라 TS를 사용할지 결정하면 됩니다. 프로젝트의 규모가 크고 복잡할수록, 유지보수가 중요한 장기 프로젝트일수록 TS의 이점이 부각될 것입니다.

FE framework, library & TS

1. React
React와 TS의 호환성은 비교적 좋은 편입니다. 최근 들어 많은 개발자들이 React와 TS 조합을 선택하고 있습니다. React 공식 홈페이지에서는 타입스크립트를 사용하기 위한 가이드를 제시하고 있습니다. 페이스북에서 공식적으로 배포하는 React 웹 개발용 보일러 플레이트(Boilerplate, 구조·설정 작업을 자동으로 진행해주는 도구이자 명령어)인 Create React App은 간단한 옵션 추가만으로 TS를 사용할 수 있도록 지원합니다.
2. Vue
Vue 2.0에서는 TS를 사용할 수 있지만 몇몇 라이브러리의 도움을 받아야 하거나 구현 자체가 안 되는 문제도 다수 있었습니다. 다행스럽게도 최근 릴리즈된 Vue 3.0부터는 TS를 공식 지원합니다. Vue 3.0 CLI(Command Line Interface)는 TS 도구화 지원을 기본으로 제공합니다.
3. Angular
JS 기반인 Angular 버전 1과 달리 버전 2부터는 TS 기반으로 만들어졌고 TS를 권장하고 있습니다.

TS로 어떻게 전환하면 좋을까?

JS 프로젝트를 TS로 어떻게 전환할 수 있을까요? 유효한 JS는 유효한 TS이며 TS는 모든 타입을 명시적으로 선언하지 않아도 최선을 다해 타입을 추론하려고 합니다. 이러한 사실은 JS를 TS로 점진적, 단계적으로 전환할 수 있음을 의미합니다.

1. VSCode로 JS 페어링
VSCode에는 편집기 또는 특정 작업 영역(프로젝트)에 대해 JS에서 TS 검사를 활성화할 수 있는 설정이 포함되어 있습니다. .vscode/setting.json에 다음 코드를 추가할 수 있습니다.

{
 "Javascript.implicitProjectConfig.checkJs": true
}

이제 타입이 안전하지 않은 줄에는 에디터에서 해당 코드를 에러로 표시합니다. 이러한 에러 메시지는 에디터에만 표시되며 코드에는 영향을 주지 않습니다.

@ts-ignore - 해당 줄
@ts-nocheck - 전체

해당 코드를 추가하여 타입 체크를 선택적으로 비활성화 할 수도 있습니다.

2. JS용 TS 컴파일러 사용 TS 컴파일러를 설치하고 스크립트를 실행하거나 설정합니다. tsconfig.json 파일을 사용하여 컴파일러 설정을 세팅합니다.

{
 "compilerOptions": {
  "allowJs": true
  "checkJs": false
  "outDir": "./dist"
  "rootDir": "./src"
  "strict": false
 }
}

"allowJs": true //타입스크립트 컴파일러를 통해 실행할 자바스크립트 파일을 선택
"checkJs": false //자바스크립트 파일에 대한 타입 체크

타입스크립트 컴파일러를 실행하고 자바스크립트를 확인합니다.

"checkJs": true 타입 체크를 활성화하고 타입 체크를 진행합니다. (node.js 경우에는 @types/node를 설치합니다.)

3. JS 파일을 TS 파일로 변환 JS에서 타입이 안전한 파일인지 확인한 후 하나씩 TS 파일로 변환합니다. (.js → .ts) allowJS를 활성화 했으므로 한번에 모두 이동할 필요 없이 점진적으로 이동할 수 있습니다. 이미 JS 코드에 대한 타입 체크를 실행했으므로 업데이트가 너무 많지 않을 것입니다.

4. 엄격한 타입 체크 타입 체크를 더 엄격하게 하는 몇 가지 옵션이 있습니다.

{
 "compilerOptions": {
 "noImplicitAny": true,
 "strictNullChecks": true,
 "strictFunctionTypes": true,
 "strictBindCallApply": true,
 "strictPropertyInitialization": true,
 "noImplicitThis": true,
 "alwaysStrict": true
}

하나씩 활성화 해 문제를 해결합니다.