00. 타입스크립트 시작하기

인프런 이재승 님 타입스크립트 시작하기 강의를 듣고 여러 레퍼런스를 참고하여 정리한 노트입니다.

1. 타입스크립트란?

자바스크립트의 기능은 모두 지원하면서 정적 타입을 지원하는 자바스크립트의 수퍼셋(superset).

• 자바스크립트
  • 동적 타입 언어
  • 변수의 type이 런타임에 결정
• 타입스크립트
  • 정적 타입 언어
  • 변수의 type이 컴파일타임에 결정

동적 타입 언어와 정적 다입 언어는 어떻게 다른가?

• 정적 타입 언어
  • 진입 장벽 높음(타입 종류나 지정 등 처음부터 배울 양이 많아 일반적으로 높음)
  • 코드의 양이 많을 때 생산성 높음
  • 타입 오류가 컴파일 때 발견
  • 예시: Java, C++, ...
• 동적 타입 언어
  • 진입 장벽 낮음
  • 코드의 양이 적을 때 생산성 높음
  • 타입 오류가 런 타임 때 발견 -> 사용자에게 버그가 노출될 가능성이 높아짐
  • 예시: Python, PHP, JS, ...

그외 특징

타입스크립트는 마이크로소프트가 개발하고 있고 자바스크립트가 지원하는 기능들은 빠르게 추가된다.

다른 JS 정적 타입 언어들보다 큰 생태계를 갖고 있고

마이크로소프트가 개발한 VS CODE와 궁합이 잘 맞는다.

타입 정의 파일

웬만큼 유명한 라이브러리는 타입스크립트의 타입 정의 파일이 존재한다.

라이브러리에 내장되어 있거나, DefintedlyTyped 라는 깃헙 저장소에 포함되어 있다.

DefintedlyTyped에 추가된 패키지는 @types/name 처럼 앞에 @types가 붙는다.

npm i @types/name 

위와 같이 입력하면 name라는 타입 정의 파일이 설치된다.

참고

• 런타임, 컴파일 타임: https://spaghetti-code.tistory.com/35
• 타입정의파일: https://ohgym.tistory.com/54

2. 타입스크립트를 사용하는 이유: 높은 생산성

컴파일 타임에서 에러 발생 -> 에러 조기 식별 및 조치 가능

const mike = { friends: ['june', 'james']};
const totalFriends = mike.friendsList.length;

위와 같은 자바스크립트 코드가 있다고 해보자.

위 코드는 friendsList라는 잘못된 프로퍼티를 가져오고 있기 때문에

TypeError: Cannot read property 'lenngth' of undefined

라는 에러가 런타임 시에 발생한다.

문제는 이걸 컴파일 타임이 아니라 런타임 떄 나온다는 것이다.

개발 단계에서 미리 발견하고 조치하는 게 아니라 사용자에게 에러가 노출이 될 확률이 높기 때문이다.

하지만 위와 똑같은 코드를 타입스크립트로 작성하면

IDE(VS CODE)가 에러를 감지하고 바로 개발자에게 알려주며, 컴파일 당시 에러가 발생하여

개발자가 자신의 실수를 고칠 수 있게 한다.

컴파일 타임에서 타입이 지정됨

const total = product.

자바스크립트에서는 런타임 이전엔 product의 타입을 알지 못하기 때문에 product가 객체인지 배열인지 알 수 없다.

interface Product {}

let product: Product = {} as Product;

const totalParts = product.parts.length;

하지만 타입스크립트는 미리 타입을 지정하기 때문에 product의 타입이 무엇인지, 또 그 안에 포함된 속성이 무엇인지도 알 수 있다.

또 리팩토링 시 속성의 이름을 바꾸고자 한다면,

자바스크립트 같은 경우 해당 속성을 찾아바꾸기(command + f) 등의 기능을 이용하지만 이 방법은 실수할 여지가 많다.

타입스크립트는 interface등 미리 정의된 속성만 바꿔주면 IDE가 알아서 바꿔준다.

또 타입 스크립트에서 코드는 타입들로 묶여 있기 때문에 파일들을 오가며 탐색하기도 쉽다.

3. 타입스크립트 설치부터 컴파일까지

타입스크립트 설치 및 셋업

일단 node.js 공식홈페이지를 통해 node.js 를 설치한다.

패키지 다운로드를 위해 package.json 파일이 설치.

npm init -y

타입스크립트 설치

npm i typescript

타입스크립트 설정 파일 설치 -> tsconfig.json 이라는 파일 생성

npx tsc --init

여기서 npx 라는 명령어는 node_modules 밑에 .bin이라는 폴더 밑 특정 바이너리(여기선 tsc)를 실행해준다.

tsconfig.json 파일을 살펴보자

target이라는 속성은 컴파일 타겟이다.

{
  "compilerOptions":{
    "target": "es5", // es5로 컴파일하겠다는 뜻이다.
    "module": "commonjs", // 모듈 방식. 다른 방식도 있다.
    "strict": true, // 별다른 이유가 없다면 true로 한다. 타입스크립트의 장점인 정적 타입화를 잘 할 수 있기 때문. 단 JS -> TS로 마이그레이션 하는 경우, strict는 false로 해두고 세부 strict옵션들을 하나하나 true로 바꿔 가는 것도 방법이 될 수 있다.
  }
}

타입스크립트 컴파일

ts 파일을 컴파일할 때는 아래 명령어를 입력한다.

npx tsc

그럼 ts 파일에 해당하는 js 파일이 하나 생성된다.

const v1 = 123;
const v2 = () => console.log('123');

위와 같은 ts 파일을 컴파일 하면

"use strict";
var v1 = 123;
var v2 = function () { return console.log('123'); };

위와 같이 변경되는데, 이건 tsconfig.json 에서 target이 es5로 설정되어 있기 때문이다. es6로 변경후 다시 컴파일하면

"use strict";
const v1 = 123;
const v2 = () => console.log('123');

위와 같이 es6 문법들이 사용되어 적용된다.

또한

const v1: number | string = 123;
const v2 = () => console.log('123');

위와 같이 타입 정의를 해도

"use strict";
const v1 = 123;
const v2 = () => console.log('123');

위와 같이 컴파일 결과는 달라지지 않는데, 이는 타입 정보는 컴파일 타임에만 사용되고 결과코드에는 제거된다.

lodash 설치

npm i lodash
npm i @types/lodash 

lodash만 설치했을 때는 타입 정의 파일이 lodash 내부에 없어서 IDE가 타입을 읽어오지 못한다.

이때 DefinitelyTyped에 등록이 된 라이브러리라면 @types/name으로 타입 정보를 받아올 수 있다.

npm i @types/lodash

이걸로 lodash의 타입 정보를 받아오면 VS CODE가 lodash의 타입정보를 읽어올 수 있게 된다.

참고

• commonjs: https://velog.io/@leobit/CommonJS
• lodash: https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-lodash-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90

4. 타입스크립트 실행 방법 및 몇 가지 팁

타입스크립트 실행법: 1. npx tsc

컴파일 -> js 파일 생성 -> node.js로 실행

2.ts 파일 생성

npx tsc 

node 2.js

타입스크립트 실행법: 2. VSC 익스텐션

VSC 익스텐션을 이용하는 방법이 있다.

1. VSC 익스텐선 code runner 인스톨
2. npm 파키지 ts-node 다운

npm i ts-node

VSC 설정에서 executorMap 검색 후

Code-runner: Executor Map
Set the executor of each language.

옵션 선택 후
setting.json 파일에 아래 옵션 입력

{
  "code-runner.executorMap": {
    "typescript": "node_modules/.bin/ts-node"
  }
}

이후 실행하고 싶은 타입스크립트 파일로 이동해서 control + option + n 을 클릭하면 실행된다.

타입스크립트 실행법: 3. 타입스크립트의 플레이그라운드

타입스크립트의 플레이그라운드 사이트를 이용하는 것이다.

https://www.typescriptlang.org/play

위 주소로 접속

몇몇 단축키

Auto import -> import하고자 하는 변수 혹은 함수를 입력하고 command + .

또한 한 파일 안에 const로 선언된 동일한 이름의 변수가 있으면 에러가 발생한다.

이때 export {} 를 어느 한 파일 위에 적어주면

타입스크립트는 해당 파일을 모듈로 인식하여 변수의 스코프가 해당 파일로만 제한되게 된다. 따라서 에러가 발생하지 않게 된다.