TypeScript 시작하기

타입 스크립트

타입 스크립트란 무엇인가

 

공식 홈페이지 설명

Typed JavaScript at any Scale

TypeScript extends JavaScript by adding types.
우리가 사용하는 자바스크립트에 타입을 추가하여 확장시킨 언어
By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.
코드를 실행하기 전에 에러를 잡고 고치는데에 들어가는 시간을 줄여준다.
Any browser, any OS, anywhere JavaScript runs. Entirely Open Source.
어떤 브라우저나 어떤 OS, 어떤 javascript에서도 실행 가능하다.

TypeScript == Language

= Typed Superset of JavaScript
= compiles to plain JavaScript
컴파일이라는 과정을 통해서 순수한 JS로 탈바꿈 가능. (진짜 실행환경(런타임)에서 이해할 수 있는 자바스크립트)

• 타입스크립트는 'Programming Language' 이다.
• 타입스크립트는 'Compiled Language' 이다.
  • 전통적인 Compiled Language와는 다른점이 많다.
  • 그래서 'Transpile'이라는 용어를 사용하기도 한다.
• 자바스크립트는 'Interpreted Language' 이다.

구분	Compiled	Interpreted
컴파일 필요	O	X
컴파일러 필요	O	X
컴파일하는 시점 컴파일 타임	O	X
실행하는 것	컴파일 된 결과물	코드 자체
실행 시점	X	런타임

컴파일 타임에 에러를 감지하는 것.

타입스크립트 에디터에서 작성한 파일을 컴파일하면 Node.js파일로 변환.

타입 스크립트 실행환경 설치

1. 자바 스크립트 실행환경 설치

node.js
Chrome's V8 JavaScript Engine을 사용하여 자바스크립트를 해석하고 OS레벨에서의 API를 제공하는 서버사이드용 자바스크립트 런타임
환경

• https://nodejs.org
  • v14.16.0 LTS (안정화 버전)
  • v15.12.0 Current (최신 버전)
• node.js version manager
  • nvm
    • https://github.com/creationix/nvm
    • https://github.com/coreybutler/nvm-windows
  • n
    • https://github.com/tj/n

browser
HTML을 동적으로 만들기 위해 브라우저에서 자바스크립트를 해석하고, DOM을 제어할 수 있도록 하는 자바스크립트 런타임 환경

• 크롬 등.
  
  

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

npm / Visual Studio plugin

• npm (node.js를 설치하면 따라오는 프로그램. 외부 라이브러리를 설치할 때 도와주는 관리형 프로그램.)
  • 설치 명령문: npm i typescript -g
  • 설치 디렉터리: node_modules/.bin/tsc
  • 실행문: tsc source.ts
• Visual Studio plugin 설치
  • Visual Studio 2017 / 2015 Update 3 이후로는 디폴트로 설치돼 있음
  • 그게 아니라면 설치.

보통 웹 개발 시에는 Visual Studio Code를 사용하므로 npm을 사용한 방식을 권장한다.

간단한 컴파일러 사용 예제

• 타입스크립트 컴파일러를 글로벌로 설치 후,
  • cli 명령어로 파일 컴파일
  • 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일
  • 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일(watch 모드)

    npm i typescript -g  // 글로벌로 설치하면 다른 프로젝트에도 영향이 미침.
    

  // 1. cli 명령어로 파일 컴파일// 2. 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일// 3. watch 모드
• tsc -w // 파일이 수정될 때마다 지속적으로 컴파일 실행.
  ```
• // 폴더 생성 후 내부에 test1.ts 파일 생성. 해당 경로에 다음 코드 입력.
  tsc --init // 컴파일 디폴트 설정파일(tsconfig.json) 생성.
  tsc // tsconfig.json 설정에 맞춰 해당 폴더를 컴파일
• tsc test.ts // 컴파일. test.js 파일 생성.
• 프로젝트에 타입스크립트 컴파일러를 설치 후,
  • .bin 안의 명령어로 파일 컴파일
  • npm 스크립트로 파일 컴파일
  • 프로젝트에 있는 타입스크립트 설정에 맞춰, npm 스크립트로 컴파일
  • 프로젝트에 있는 타입스크립트 설정에 맞춰, npm 스크립트로 컴파일(watch 모드)

    npm uninstall typescript -g // 글로벌로 설치된 타입스크립트 삭제
    

  // tsc-project 폴더 재생성 후 내부로 이동
  // tsc-project 폴더를 npm project(node project) library dependencies에 등록함.// .bin 안의 명령어로 파일 컴파일npx tsc // test.js 생성.
  npx tsc -w // watch 모드.

• // package.json의 scripts 부분에 "build" : "tsc" 를 추가하면
  npm run build // 이 명령어로 tsc 실행이 가능하다.
  // "build:watch" : tsc -w 를 하면
  npm run build:watch // 이 명령어로 watch 모드를 사용할 수 있다.
• // 위 명령어를 실행하면 node_modules 폴더 안에 .bin 폴더와 typescript 폴더가 생김.
  // .bin 내부에 tsc 명령어 존재. 그 명령어는 typescript/bin/tsc를 가리킴
  node_modules/typescript/bin/tsc
  node_modules/.bin/tsc
  // 위 두가지 방법으로 tsc 실행 가능.
  // 명령어가 너무 기므로 npx로 축약해서 사용할 수 있는 명령어가 생김.
  npx tsc
  // 실행하기 위해선 config 파일이 필요하다.
  npx tsc --init // tsconfig.json 파일 생성
• npm init -y
  npm i typescript // 타입스크립트 설치.

VS Code 설치 및 설정

Visual Studio Code

• TypeScript Compiler
  • VS Code에 typescript 컴파일러가 내장되어 있다.
  • 내장된 컴파일러 버전은 VS Code가 업데이트 되면서 올라간다.
    • 따라서 컴파일러 버전과 VS Code의 버전은 상관관계가 있다.
  • 내장된 컴파일러를 선택할 수 있고, 직접 설치한 컴파일러를 선택할 수 있다.
    
    

초기설정

npm init -y

npm i typescript -D

First Type Annotation

타입스크립트에서는 변수에 할당된 초기값에 의해 변수의 타입이 지정된다.

let a = "Mark";

a = 39; // a는 이미 String 형으로 지정되어 39라는 Number형식을 저장하지 못한다.

let a: string; // type annotation
a = "Mark";     // O
a = 39;         // X

let b: number;
b = "Mark";     // X
b = 39;         // O

function hello(c: number){

}
hello(39)       // O
hello("Mark")   // X