---
# System prepended metadata

title: 1. TypeScript
tags: [TypeScript Essentials, 지호]

---

# 1. TypeScript

###### tags: `지호`, `TypeScript Essentials`

<br/>

## 1. TypeScript란 무엇인가


### 특징 
- 타입을 추가해서 자바스크립트를 확장
- 자바스크립트를 이해함으로써, **코드를 실제로 실행하기 전에** 에러를 잡아줌
- 전통적인 컴파일 언어(c++, java..)와 다르게, 인터프리터 언어인 순수 자바스크립트로 transpile하는 언어

### Typescript Compiler
![그림10](https://user-images.githubusercontent.com/24283401/159443868-0a11764d-1292-4854-8691-bd08065375d1.png)

<br/>

## 2. Typescript 설치 및 사용


 ### 자바스크립트 실행 환경
 - node.js
     - 크롬 브라우저의 V8 엔진을 이용하여 자바스크립트를 해석하고 API 제공
     - 서버사이드 용
     - LTS 버전 설치
     - 노드 버전 관리: nvm, n
 
 - browser
     - 대표적인 자바스크립트 런타임 환경
     - DOM 제어 가능

### 타입스크립트 컴파일러
- 글로벌로 타입스크립트 설치
```shell=
npm i typescript -g # 타입스크립트 설치
node_modules/.bin/tsc # 타입스크립트 실행 폴더
tsc source.ts # 타입스크립트 컴파일러를 실행하여, 해당 파일을 자바스크립트로 변환한 파일이 생성됨
tsc --init # 프로젝트에 타입스크립트 설정 파일인 tsconfig.json 파일 생성
tsc -w # 파일이 수정됐을 때마다 새로 컴파일이 됨 (watch 모드)
```

- 프로젝트에 타입스크립트 설치
```shell=
npm uninstall typescript -g # 글로벌로 설치된 타입스크립트 제거
npm init -y # npm 프로젝트 초기화
npm i typescript # 프로젝트에 타입스크립트 설치 -> node_modules/typescript
npm i typescript -D # 런타임에 필요하지 않기 때문에 devDependency로 추가
npx tsc --init # node_modules/typescript/.bin/tsc 를 이용하여 프로젝트에 tsconfig.json 파일 생성
npx tsc -w # 위와 동일
npm run build # package.json에 script에 "build" : "tsc" 로 수정하면 이 명령어를 사용하여 tsc 실행이 가능하다.
npm run build:watch # 이 명령어도 사용 가능
```

<br/>

## 3. Type Annotation
타입을 지정해준다.
```typescript=
let a: number;
```