TypeScript 開發環境搭建

下載下傳 node.js

• 下載下傳位址： https://nodejs.org/en/

• 

安裝 node.js

• 無其他特殊操作，選擇好安裝路徑直接安裝即可
• 安裝完成後，使用

  win+R

  快捷鍵打開 cmd 指令行視窗，并輸入

  node -v

  檢查是否安裝成功

• 

    出現以上版本号，則表示安裝成功

安裝解析 TS 的工具包

• 進入 cmd 指令行視窗

• • 網速好

• • • 輸入：

      npm install -g typescript

• • • • npm：包管理器
      • typescript：就是用來解析 TS 的工具包，提供了 tsc 指令，實作了 TS -> JS

• • 網速不好

• • • 先輸入：

      npm config set registry

      https://registry.npm.taobao.org

      （淘寶鏡像）
    • 檢查：

      npm config get registry

    • 再輸入：

      npm install -g typescript

• • 輸入tsc，如果出現一堆代碼則安裝成功

    

方式一：使用記事本進行編寫

• 建立記事本檔案
• 輸入以下代碼

console.log('Hello TS')      

• 儲存并修改擴充名為 .ts
• 進入指令行，輸入

  tsc 檔案名.ts

• 即可将 ts 檔案轉換為 js 檔案

  

方式二：使用 VScode 進行編寫

• 打開VScode，建立檔案夾
• 打開終端，輸入

  tsc --init

  ，引入 ts 編譯規則配置檔案 tsconfig.json
• 在 tsconfig.json 檔案中修改

  "outDir": "./"

  為

  "outDir": "./dist"

  ，并取消注釋

"outDir": "./"  /*outDir用來指定輸出檔案夾，值為一個檔案夾路徑字元串，輸出的檔案都将放置在這個檔案夾*/      

• 建立檔案，檔案命名為

  hello.ts

console.log('Hello TS')      

• 點選菜單欄 -> 終端 -> 運作任務 -> 選擇目前檔案夾 -> tsc 監視 即可

• • 打開監視可實作實時更新 js 檔案

方式三：使用 WebStorm 進行編寫

• 打開webStorm，建立目錄，建立 ts 檔案

console.log('Hello TS')      

• 點選左下角 Terminal 輸入

  tsc 檔案名.ts