[TypeScript] 타입스크립트란? 기초 원리와 설치 방법

TypeScript 기초

• TypeScript란?
  • 누가 TypeScript를 만들었을까?
  • TypeScript와 JavaScript의 차이점
  • TypeScript의 장점
  • TypeScript의 작동 원리
• TypeScript 설치 및 환경 구축
  • tsconfig.json 세팅
• TypeScript 코드를 JavaScript 코드로 컴파일 하는 방법

---

TypeScript란?

타입스크립트는 타입 정의가 추가된 자바스크립트이다.

물론 Javascript도 number, string 등 타입이 있지만, 타입을 고정해 둘 수가 없다.
심지어, number로 선언한 변수에 string 타입의 값도 할당할 수 있다.
이는 미리 파악하기 힘든 런타임 에러를 발생시킬 가능성이 높다.

예를 들어,
사용자가 숫자를 입력할 거라고 생각하고 코드를 작성 했는데,
문자열이 입력된다면 브라우저는 시뻘건 에러 코드를 내뿜어줄 것이다.

그래서 타입스크립트는 코딩 단계에서 미리 타입을 정해두고, 관련된 에러를 사전에 예방할 수 있도록 도와준다.

누가 TypeScript를 만들었을까?

TypeScript는 C#을 만든 Anders Hejlsberg가 만들었다: 참고 링크

TypeScript와 JavaScript의 차이점

• TS
  • Strongly Typed Language
    • 데이터의 타입을 정해두고 사용해야 한다.
  • Static Typing
    • 컴파일 단계에서 타입이 체크된다.
    • 일단 변수에 값이 초기화되어 타입이 정해지면, 다른 타입의 값을 할당할 수 없다.
• JS
  • Loosely(Weakly) Typed Language
    • 데이터의 타입을 정의하지 않고 사용한다.
  • Dynamic Typing
    • 런타임 단계에서 타입이 체크된다.
    • 변수에 값이 초기화된 이후에도 실행중에 다른 타입의 값이 할당될 수 있다.

TypeScript의 장점

• Self-Documenting: 변수 및 함수의 인자/반환 값의 타입을 체크하며 코딩할 수 있다.
• 개발 단계에서 타입 관련 에러를 쉽게 잡을 수 있다.
• 최신 ECMAScript와 호환된다.
• 팀 단위의 업무나 큰 프로젝트에서 적합하다.

TypeScript의 작동 원리

TypeScript는 브라우저나 Node.js 환경에서 실행되는 코드가 아니다.
TypeScript를 바로 실행할 수 있는 런타임 환경은 현재 기준으론 Deno뿐이다.
(참고로 Deno 또한 Node.js를 만든 Ryan Dahl이 만들었다.)

브라우저나 Node.js는 오직 JavaScript만 실행할 수 있다.

즉, TypeScript 코드는 개발을 위해서만 사용하는 코딩용 Language이다.
따라서 TypeScript로 작성된 코드는 Javascript로 컴파일해야만 브라우저나 Node.js 환경에서 실행시킬 수 있다.

1. TypeScript의 타입 정의와 관련된 장점을 활용하며 TypeScript로 코드를 작성한다.
2. typescript npm pacakge를 설치한다.
3. typescript npm pacakge의 tsc 명령어를 이용해 TypeScript 코드를 JavaScript 코드로 컴파일한다.
4. Javascript로 컴파인된 코드를 브라우저나 Node.js 환경에서 실행시킨다.

---

TypeScript 설치 및 환경 구축

1. Node.js 를 설치한다. (아래의 3가지 방법 중 하나를 선택)
   • 방법1: Node.js Web Site에 접속하여 다운로드 받아 설치한다.
   • 방법2: n 을 이용해 설치하면, Node.js 의 버전을 업그레이드 하는데 용이하다.
   • 방법3: nvm 을 이용해 설치하면, 여러 버전의 Node.js를 설치하고 스위칭하며 사용할 수 있다.
2. typescript npm pacakge를 전역 설치한다.
   • 터미널에서 npm install typescript -g 명령어를 실행한다. (-g는 전역설치를 위해 추가하는 옵션이다.)
   • -g 옵션을 제거하고 로컬로 설치한다면, 매번 컴파일 시마다 명령어 앞에 npx 를 붙여주면 된다.

• c.f 터미널에서 npm init -y 명령어를 실행해 package.json 파일을 만들면 패키지 및 프로젝트 관리에 좋다.

tsconfig.json 세팅

1. tsconfig.json(타입스크립트 설정 파일) 을 루트 경로에 생성한다.
   • 터미널에서 tsc --init 명령어를 실행하면 자동으로 파일 생성 및 디폴트 값으로 세팅해준다.
   • touch tscofig.json 등의 명령어를 통해 직접 파일을 생성해도 되긴 한다.
2. tsconfig.json 파일에 주요 설정값을 세팅한다.
   • tsc --init을 통해 tsconfig.json파일을 생성했다면 각 옵션에 대한 설명이 주석으로 잘 달려있다. 더 자세한 내용은 공식문서 참고
   • 주요 설정 값은 아래와 같다.

{
  "compilerOptions": {
    "target": "es5", // es5 | es6, ...
    "module": "commonjs", // commonjs | es6, ...
    "rootDir:": "src", // 루트 경로
    "outDir": "build/js" // 컴파일된 JS코드가 저장되는 경로
    // ...
  },
  "include": ["src/**/*.ts"], // 컴파일해야할 TS코드가 저장되는 경로들
  "exclude": ["node_modules"] // 컴파일에서 제외해야할 경로들
}

---

TypeScript 코드를 JavaScript 코드로 컴파일 하는 방법

1. tsconfig.json 파일의 include 에 설정한 경로로 이동한다.
2. 해당 경로에서 xx.ts 등의 TypeScript 파일을 만들고 코드를 작성한다.
3. tsc 명령어로 해당 컴파일을 진행한다.
   • 모든 ts 파일 일괄 컴파일
     • tsc : include 경로에 있는 모든 ts 파일을 js코드로 컴파일 한다.
     • tsx -w: -w 옵션을 붙이면, ts 파일에 변경이 발생할 때마다 자동으로 js 코드로 재컴파일 한다.(단 파일 삭제는 반영 안되니 주의)
     • npx tsc : 만약 typescript 패키지를 전역(-g)이 아닌 로컬로 설치했다면, npx를 앞에 붙여서 실행하면 된다.
   • 특정 파일만 컴파일 하는 방법
     • tsc xx.ts : xx.ts 파일만 xx.js로 컴파일한다.
     • tsc xx.ts yy.js : xx.ts 파일을 yy.js 이름으로 컴파일한다.
     • tsc xx.ts -w : xx.ts 파일에 변경사항이 있을 때마다 자동으로 컴파일한다.

c.f let 으로 선언한 변수가 var 로 컴파일 될 수 있는데 이는 tsconfig.json에서 target 설정값이 es5 이하로 설정되어 있어서 그렇다. target 설정값을 es2016 등으로 바꾸면 let으로 컴파일 되지만 호환성 이슈가 있을 수 있으니 주의.