# Day15 【牙起來】 環境安裝 第一支程式 - Typescript

因為寫**Angular**總是逃離不了程式語言
接下來要介紹**Angular框架**的最大主角 -- `Typescript`

## 什麼是TypeScript

`Javascript` 雖然好寫（說不好寫怕得罪一些人）
但當開發的專案大到一定規模時，**弱型別**是一件讓人頭疼的事情
後面的人接手、維護起來相當不容易

所以後來出現了有型別的 **型別控、型別魔人** --`Typescript`
誕生於2012年，是一個相對嶄新的程式語言，由**微軟**爸爸進行開發及維護

簡而言之，`Typescript` 是一個**有型別、需要編譯步驟**的 `Javascript`

* `Javascript` 是直譯式語言，弱型別
* `Typescript` 是編譯式語言，所以**需要Compile**，強型別

**編譯**這行為，是讓`.ts`檔案產出一個語意完全相同的`.js`檔

另外，因為`Javascript` 也有分版本 ex: `ES5`、`ES6(ES2015)`...
而`Typescript`還可以**指定產出成哪一個版本**的JS語法

> 就像我寫**文言文**，口譯人員將之翻譯（編譯）成**白話文**說出來
> 然後我還能指定，要口譯人員翻譯成夾雜民國70年代、或是80年代流行梗的**白話文**

## 開始一個Typescript專案

建立一個新資料夾，在裡面新增 `main.ts` 檔案


因為待會要用到 `tsc` 指令
來將`.ts`檔案由`Typescript`編譯成`Javascript`


現在還沒有 `tsc` 指令，所以要先執行以下安裝

## 安裝Typescript

安裝方式分成 全域Global、專案內Local

### 全域 Global

> npm install -g typescript

### 專案內 Local

> npm install typescript

進入此專案路徑底下，就會使用到 `node_modules`

這是Local的安裝
會新增
* `package.json`
* `package-lock.json`
* `node_modules` 包，底下能看的到`typescript`的套件檔案

安裝完後便能使用 `tsc` 指令了

## 第一支 Typescript 程式

寫上我們之前使用過的語法

let a = 10;
console.log(a);


每次修改完畢之後，都要下這行指令，讓`.ts`編譯成`.js`檔案

> tsc main.ts

這會產生出一個`main.js`檔案


點開來看，已經被轉成`Javascript`的語法


### 執行js檔案

編譯好成Javascript之後
運行時，透過`node`指令來執行`.js`檔案

> node main.js


---

## tsconfig.json設定

> tsc --init

會產生一個 `tsconfig.json` 的檔案
裡面 `compilerOptions` 底下有各項參數可調整

### 不同版本的JS

其中 `target` 可替換成任意版本的`Javascript`


### 吃tsconfig設定

此時直接下 `tsc` 會依照專案內的 `tsconfig.json` 設定來進行編譯
（`tsc`後面不能帶任何檔案名稱）

> tsc

而 `tsc main.ts` 指定編譯的檔案名稱的話
就會直接編譯，**不會吃到 `tsconfig.json` 設定**

> tsc main.ts

> 看到這裡，恭喜你已經完成12%的Typescript

---

## § Webstorm IDE 專區 §

### 編譯Typescript

除了用 `tsc` 指令進行編譯之外
還可以在 Webstorm IDE 按右鍵，直接點選 **Compile Typescript**


### 更改、儲存時自動編譯

在設定中搜尋 `Recompile on changes` 並勾選


就會在更改`.ts`檔案之後，即時編譯一次