Typescript 공부하기 1일차 (2022.09.21)

1. Typescript란?

1) 정의

타입스크립트(TypeScript)는 자바스크립트의 [1]슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다. 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다.

( 출처: https://ko.wikipedia.org/wiki/타입스크립트 )

 

2) 특징

- 컴파일 언어, 정적 타입 언어
자바스크립트는 동적 타입의 [2]인터프리터 언어로 런타임에서 오류를 발견할 수 있습니다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환된다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다.

- 자바스크립트 슈퍼셋(Superset)
타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다.

- 객체 지향 프로그래밍 지원
타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

( 출처: https://www.samsungsds.com/kr/insights/typescript.html )

 

 

 

2. Typescript를 써야하는 이유

1) 클린코드와 디버깅

자바스크립트의 런타임 단계에서 발생하는 타입 에러는 타입스크립트를 이용한다면 컴파일 단계에서 미리 확인하고 고칠 수 있다. 실제로 [3]한 연구에 따르면 모든 자바스크립트 버그의 15%가 사전에 타입스크립트로 감지할 수 있다고 한다.

 

2) 점진적 전환 가능

기존의 자바스크립트 프로젝트를 타입스크립트로 전환하는데 부담이 있다면 추가 기능이나 특정 기능에만 타입스크립트를 도입함으로써 프로젝트를 점진적으로 전환할 수 있다. 

// 완전히 다른 언어가 아닌 JS에서 JS의 슈퍼셋인 TS로 전환하는 것이니 부담이 적은 것은 당연한 것으로 보임

 

3) 강력한 생태계
타입스크립트는 그리 오래되지 않은 언어임에도 불구하고 2022년 9월 PYPL 프로그래밍 언어 순위 8위의 큰 인기를 바탕으로 강력한 생태계를 가지고 있습니다. 대부분의 라이브러리들이 타입스크립트를 지원하며 마이크로소프트의 비주얼 스튜디오 코드(VSCode)를 비롯해 각종 에디터가 타입스크립트 관련 기능과 플러그인을 지원합니다.

// 타입스크립트랑 VSCode 모두 MS이니 어찌보면 당연한 것

<Fig. 1> 2022년 9월 PYPL 프로그래밍 언어 순위 (PYPL, 2022, The error model of this experiment.)

( 출처: https://www.samsungsds.com/kr/insights/typescript.html )

 

 

 

3. Typescript로 전환하는 방법

1) 비주얼 스튜디오 코드(VSCode)로 자바스크립트 페어링
비주얼 스튜디오 코드에는 편집기 또는 특정 작업 영역(프로젝트)에 대해 자바스크립트에서 타입스크립트 검사를 활성화 할 수 있는 설정이 포함되어 있다. .vscode/setting.json에 다음 코드를 추가할 수 있다.

{
 "Javascript.implicitProjectConfig.checkJs": true
}

 

이제 타입이 안전하지 않은 줄에는 에디터에서 해당 코드를 에러로 표시한다. 이러한 에러 메시지는 에디터에만 표시되며 코드에는 영향을 주지 않는다.
@ts-ignore - 해당 줄
@ts-nocheck - 전체
해당 코드를 추가하여 타입 체크를 선택적으로 비활성화 할 수도 있다.

2) 자바스크립트용 타입스크립트 컴파일러 사용
타입스크립트 컴파일러를 설치하고 스크립트를 실행하거나 설정한다. 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) allowJS를 활성화 했으므로 한번에 모두 이동할 필요 없이 점진적으로 이동할 수 있다. 이미 자바스크립트 코드에 대한 타입 체크를 실행했으므로 업데이트가 너무 많지 않을 것이다.

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

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

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

( 출처: https://www.samsungsds.com/kr/insights/typescript.html )

 

 

 

 

 

[1] 슈퍼셋: 컴퓨터 과학에서 슈퍼셋이란 특정한 언어의 모든 기능을 포함하면서, 다른 기능까지 포함하도록 향상 또는 확장된 것을 의미한다.

[2] 인터프리터: 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다.

[3] 한 연구: 해당 연구 출처 https://earlbarr.com/publications/typestudy.pdf