iT邦幫忙

2024 iThome 鐵人賽

DAY 25
0
Modern Web

重新認識 FrontEnd系列 第 25

Day25:TypeScript 安裝

  • 分享至 

  • xImage
  •  

今天我們來聊聊如何安裝 TypeScript 吧,不過在裝 TypeScript 之前,我們得先安裝 NodeJS

什麼是 NodeJS

在最一開始的時候 JavaScript 只能在瀏覽器上運行,然而在 2008 年 Google Chrome 推出後,其瀏覽器使用一個名為 V8 的引擎來運行 JavaScript,並且在 2009 年啟動 Node.js 項目,NodeJS 可以透過 V8 引擎來在瀏覽器之外運行 JavaScript,讓熟悉 JavaScript 的開發者可以跨領域到伺服器端的運作,更甚者可以透過 Electron 來進行桌面端應用的開發

如何安裝 NodeJS

由於 Node.js 的推進速度非常快,因此很常會有單一環境多版本切換的需求,目前是推薦先安裝好 Nvm 這個 NodeJS 版本工具,再透過 Nvm 來安裝需要的 Node.js 版本會比較省麻煩呦

透過 NodeJS 安裝 TypeScript

當我們安裝好 Node.js 後,即可使用 npm 工具來安裝套件了,其中 TypeScript 也被支援進去 npm 的套件內

npm install -g typescript

透過 -g 指令安裝好 typescript 後就可以透過 typescript 的指令編譯 .ts 檔案

tsc ./src/index.ts

又或者是透過 tsconfig 來管理整份專案的 typescript 設定,最後再一起編譯

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist", // 指定編譯完後檔案放哪裡
    "rootDir": "./src", // 指定搜尋以哪邊開始的檔案
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

回到專案根目錄

tsc

這樣就會將檔案編譯完成囉

可以不用 NodeJS 開發 TypeScript 嗎

當然可以,TypeScript 最一開始為 Microsoft 開發德程式語言,並沒有完全與 NodeJS 做綁定,可以前往 TypeScript 官方 GitHub 去下載 typescript 最新文件 typescript.js,並且將其引用至個人專案,透過 ts.transpileModule() 來轉譯讓瀏覽器看得懂


上一篇
Day24:為何需要 TypeScript
下一篇
Day26:TypeScript 型別
系列文
重新認識 FrontEnd30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言