[筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (3)

Posted onAuthorANDY LIEN

章節連結

斷斷續續碰了一些 TypeScript 的內容，但在實務上始終缺乏一個概念式的整理，導致沒辦法隨心所欲的規劃使用。這回找上 Hiskio 上的「布魯斯的 TypeScript 入門教學」課程，看能不能有所進步。此篇會筆記下如何整合到 webpack 環境中。
typescript

課程相關資訊

[連結]：https://hiskio.com/courses/628/lectures/33124

本篇範圍：Chapter 2

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。

內容

1. 在原先的 Webpack + JS 專案中，先加入 typescript 和 ts-loader ( npm i typescript ts-loader –D )
2. 你需要有一個 tsconfig.json，並更改 webpack 的 entry 入口檔案為 .ts 和專案 index.js -> index.ts
3. webpack 裡面要加入 ts-loader
4. ts-loader 可以完全取代 babel-loader 的功能，所以可以移除
5. webpack 的設定檔中要加入 resolve 副檔名表，這樣一來 webpack 才會去編譯
6. tsconfig.json 中加入 “sourceMap”: true，並改寫 webpack 的 sourceMap 設定值為 inline-source-map，你就利用瀏覽器的開發工具即時跳到發生錯誤的地方
7. tsconfig.json 避免使用 commonJs，因為這樣會沒有辦法進行 tree-shaking
8. babel 編譯若最後沒有用到，你可以將其移除

系列文章

  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (9)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (8)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (7)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (6)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (5)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (4)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (26)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (25)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (24)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (23)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (22)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (21)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (20)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (2)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (19)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (18)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (17)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (16)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (15)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (14)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (13)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (12)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (11)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (10)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (1)
    • 按讚加入粉絲團

    延伸閱讀