한 입 크기로 잘라먹는 타입스크립트 복습용 정리(1) 개론, 시작하기

 

 

 

● 타입스크립트 (TypeScript) 란?

 

  유연하고 자유로워 버그 발생가능성이 높은 자바스크립트를 더 안전하게 사용할 수 있도록 "타입 관련 기능들을 추가한" 언어 (자바스크립트 확장판!)

 

  타입스크립트는 "점진적 타입 시스템 (Gragual Type System)"이라는 독특한 타입 시스템을 갖추고 있다. 점진적으로 타입이 정의된 변수들에 대해서는 타입을 미리 결정하고, 타입이 정의되지 않은 변수들에 대해서는 초깃값을 기준으로 타입을 추론한다. 

 

(참고) 타입 시스템 비교

 

(참고) 타입스크립트 동작 원리

 

 

 

---

 

 

 

0. Node.js 패키지 초기화

 

npm init

 

 

1. @types/node 설치

 

npm i @types/node

 

@types/node : Node.js 내장 기능들(내장 함수, 클래스 등)의 타입 정보를 가지고 있는 패키지. 설치하지 않으면 컴파일 과정에서 오류가 발생할 수 있음.

 

 

2. 타입스크립트 컴파일러 설치

 

npm install typescript

// 처음 설치할 땐 -g 옵션을 이용하여 전역으로 설치
// 해당 프로젝트만이 아닌 PC에 설치하는 느낌
// npm i -g typescript

 

// 잘 설치되었는지 확인하려면,
// 버전 확인 명령어를 사용해보면 됨.

tsc -v

 

 

3. 실행하기

 

1) 컴파일(ts → js 생성) 후,

// 예시 : 루트 아래 src 폴더의 index.ts 파일

tsc src/index.ts

 

2) node를 이용해 실행

 

 

>> ts-node로 실행하기

 

: 명령어 한번으로 타입스크립트 코드를 바로 실행시켜주는 도구

 

// 설치(글로벌)
npm i -g ts-node

// 버전 확인
ts-node -v

// 사용 예시
// tsc 대신 ts-node 사용
ts-node src/index.ts

 

 

 

---

 

 

 

- 타입스크립트 컴파일러 옵션 설정하기

 

// 기본 설정 파일(tsconfig.json) 생성

tsc --init

 

 

◎ include 옵션

 

: tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려주는 옵션. 이 옵션을 사용하면 많은 파일을 일일이 입력하지 않아도 된다.

 

// 예시 

{
  "include": ["src"]
}


// tsc 명령어만 입력해도, src 폴더 아래의 모든 타입스크립트 파일이 동시에 컴파일된다.

 

 

◎ target 옵션

 

: 컴파일 결과 생성되는 자바스크립트 코드의 버전을 설정하는 옵션.

 

// 예시

{
  "compilerOptions": {
    "target": "ESNext"
  }
}

// 최신 버전의 자바스크립트 코드로 컴파일된다.
// (참고) compilerOptions 안에 넣는 건 상세 옵션이라고 생각하면 된다.

 

 

◎ module 옵션

 

모듈 시스템?

: 리액트에서 쓰는 export, import 이런 거(ES 모듈 시스템이라고 하며, 이 외에도 CJS 모듈 시스템이라는 것도 있다.)

 

// 예시

{
  "compilerOptions": {
    "module": "ESNext"
  }
}

// ES 모듈시스템을 사용하는 자바스크립트 코드로 컴파일된다.

 

 

◎ outDir

 

: 컴파일 결과로 생성될 자바스크립트 코드의 위치를 결정하는 옵션

 

// 예시

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

// 컴파일 결과 파일이 dist 폴더에 생성된다.

 

 

◎ strict

 

: 타입을 엄격하게 검사할지 말지에 대한 옵션

 

// 예시

{
  "compilerOptions": {
    "strict": true
  }
}

// true: 엄격 모드 켬
// false: 엄격 모드 끔

 

 

◎ ModuleDetection 옵션

 

: 각각의 파일을 어떤 모듈로 감지할 것인가를 결정하는 옵션

(타입스크립트는 기본적으로 모든 파일을 전역 파일(모듈)로 취급한다. 때문에 다른 파일이어도 export와 같은 키워드가 없으면 같은 이름의 변수를 사용할 수 없다. 모듈 시스템 키워드를 자동으로 추가해주는 옵션이 바로 ModuleDetection 옵션인 것이다.)

 

// 예시

{
  "compilerOptions": {
	"moduleDetection": "force"
  }
}

//  moduleDection 옵션을 force로 설정할 경우,
// 자동으로 모든 타입스크립트 파일이 로컬 모듈(독립 모듈)로 취급된다.

 

※ 잠깐, 설정 변경이 반영되지 않을 때는? 

    control + shift + p 를 눌러 restart 검색 후, TS 서버 다시 시작

 

 

◎ ts-node 옵션

 

  이렇게 ModuleDetection 옵션을 활성화하면 ts-node 실행 시 오류가 발생하게 되는데, 그 이유는 ts-node가 기본적으로 CommonJS 모듈 시스템을 사용하기 때문이다. 이럴 땐 아래와 같은 옵션을 추가해 주면 된다. 

 

{
  "ts-node": {
    "esm": true
  }
}

 

 

 

컴파일 옵션 설정 파일(tsconfig.json) 예시

 

 

 

 

 

[출처] https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/dashboard

한 입 크기로 잘라먹는 타입스크립트 - 인프런 | 강의