之所以放在這麼多天後才來講架設環境這個題目，是因為我覺得比起架設環境，不如直接來用用看TypeScript，對這個工具會有更快更直接的了解，但，該來的還是躲不掉，架設環境一向是比開發還來得麻煩的一件事，我們總不可能都在playground上使用TypeScript吧（畢竟還是要幫客戶做專案），那我們就來動手吧。

首先

先新建一個資料夾吧，我選擇在桌面上創立一個typescript-test的資料夾
你可以使用終端機，確定自己已經在desktop（或想要的路徑上）後，輸入mkdir typescript-test

接著，我們再來初始化一個專案（產生package.json）吧！
這邊我選擇使用yarn，你習慣的話也能用npm，在這邊的指令都差不多：

yarn init -y

-y就是看你要不要對所有他所問的問題默認為"是"，他會問你的問題是：

• 你這個專案的名稱要叫什麼？（默認為資料夾名稱）
• 第一版的版號要叫什麼？（默認為1.0.0）
• 對這個專案的敘述？（默認為空）
• 進入點為何？（就是用來開啟這個專案的檔案是什麼，默認叫做index.js
• 這個專案的repository（好像翻譯叫倉儲？就是我們習慣放在GitHub上的repo）連結？
• 作者是誰？
• 有沒有MIT授權條款？
• 是否要將此專案設為私人？

當上述問題全部都答完後，你會看到

success Saved package.json
Done in 幾秒

接著就會看到package.json已成功的創立，如果你剛剛有加上-y，那麼我們的package.json的內容會長這樣：

{
  "name": "typescript-test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

好，接下來就讓我們來安裝TypeScript吧！因為TypeScript只有在開發時會用到，所以我們理所當然的會用-D這個flag來安裝他，讓他只存在於devDependencies。

yarn add typescript -D

注意這邊，我在實作這步時，常常會忘記改成大寫，變成-d，這樣就會將TypeScript安裝到dependencies了。dependencies跟devDependencies的差別就在，dependencies內的套件會使用於production環境，而devDependencies則只使用於開發環境，所以不要裝錯地方了。
（除了寫-D，也可以寫成--dev。）

做完這步，就能看到我們的package.json多出了這幾行：

  "devDependencies": {
    "typescript": "^4.8.4"
    //由於我們剛剛沒有限定typescript的版本，所以會以最新的為主
    //你執行同樣指令時若不是4.8.4也不用太在意
  }

我們也順便安裝晚點會用到的套件：tsc-watch，一樣用-D的方式將它安裝。
這套件是為了方便我們等等不用一直輸入指令執行編譯，而能讓我們按下儲存就執行TypeScript的編譯。

接下來，我們還需要有個typescript的設定檔，名字會叫做tsconfig.json，至於該怎麼產出來？你可以在根目錄直接新創一個tsconfig.json，然後自己輸入想要用的設定。或者透過終端機輸入npx tsc --init，這樣就能自動幫你產出一個設定檔了。如果你是透過指令產出設定檔，請一定要點進去看看，裡面非常精彩。內部有個compilerOptions（編譯器選項），裡面有超多選項，預設下都先幫你關起來，只打開其中幾個讓你使用，像是要編譯的版本為何（預設是es2016）、module要用什麼（預設是commonjs）...等等的，你也可以試著刪除看看那些value：

{
    "compilerOptions":{
        "target":""
        //當你將預設的es2016給刪除，並將游標停留在雙引號中間時
        //編輯器會提示你有哪些版本可以使用！
    }
}

而這邊我們先簡單創建以下內容就好：

{
  "compilerOptions": {
    "target": "ES2020",
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

意思就是，我們在編譯時要將程式碼編譯成es2020的語法、我們要從src資料夾去處理.ts檔、並將編譯後的結果輸出到dist資料夾（distribution的意思）。

那我們就快點建立一個src資料夾吧，創立後，在裡面建立一個index.ts，表示這是一個TypeScript檔案。並在index.ts裡面輸入以下code：

function sayHi(name: string): string {
  return "Hi, " + name
}

console.log(sayHi("John"))

我們有了合格的TypeScript程式碼後，便能試試看編譯會變怎樣了！

（不管你有沒有創建dist資料夾），在終端機輸入npx tsc，便會自動將src裡面的ts檔編譯、放進dist資料夾（資料夾不存在就會自動幫你創立）。

此時dist資料夾內就會看到一個index.js檔案，注意，是js檔唷！代表已經編譯好了，內容會長這樣：

function sayHi(name) {
    return "Hi, " + name;
}
console.log(sayHi("John"));

嘿沒錯，就是看起來平凡無奇JavaScript程式碼！我們終於完成了！
但如果每次都要輸入一次npx tsc有點累，我們就用剛剛安裝過的tsc-watch套件來幫助我們吧。
在終端機輸入npx tsc -watch，就能讓我們每次按下儲存時，自動幫我們編譯一次，省去不少麻煩！

輸入後，你會看到下列文字出現在終端機中

[下午9:09:44] Starting compilation in watch mode...

[下午9:09:45] Found 0 errors. Watching for file changes.

代表他正監控著你資料夾內有沒有檔案被變動了，有變動就幫你編譯一次！
於是我們這樣就順利架設了一個能跑TypeScript程式碼的環境了！

明天再來看看設定檔內有什麼能動、什麼該動的吧，我們先前有提過一個屬性了，你可以往前翻一下，看能不能找到那個東西是什麼。