JavaScript 的主要問題
你習慣寫物件導向的 code 嗎？像是 C#, Kotlin,Java, C++ ..等。 只要一種物件導向的程式語言熟悉，要上手其他的語言其實都很容易，因為物件導向的核心概念，不外乎封裝、繼承、多型、抽象。
然而當你想要寫點網頁前端時，看到 JavaScript 這種解釋性的動態類型編程語言應該很崩潰。
光是隨便一個 function，傳進來的參數到底是什麼型別就要猜好久了，造成 debug 不易，特別是大型專案更是難以維護。
TypeScirpt 可以解決上述問題，並且還可以 compile 做靜態檢查，更可以讓我們以熟悉的方式(物件導向)去寫 code，幫我們省下很多很多的除錯時間。
TypeScirpt
TypeScript 是一種由 Microsoft 開發的 開放原始碼程式語言，它是 JavaScript 的超集，主要特點是為 JavaScript 增加了 靜態型別檢查 和一些開發工具支援。TypeScript 的設計目標是幫助開發者在大型或複雜的項目中提升代碼的可靠性和可維護性。
特點如下：
- 靜態類型檢查：在編譯期間發現錯誤，降低運行時錯誤的可能性。
- 強型別：允許開發者明確定義每個變數的類型，提升代碼的可讀性與可靠性。
- 額外功能：支持接口（
interface）、泛型（generics）、列舉（enum）等現代化語法。 - 兼容性強：TypeScript 最終會編譯為純 JavaScript，因此可以無縫應用於任何支持 JavaScript 的地方。
以下示範在 Docker 中建立環境 + 開發 TypeScirpt
主要檔案
Dockerfile -> 主要用來建立 NodeJs 環境和安裝 TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 使用官方的 Node.js Docker 映像
FROM node:hydrogen-alpine3.20
# 設定工作目錄
WORKDIR /app
# 複製 package.json 和 package-lock.json (如果有)
COPY package*.json ./
# 安裝依賴
RUN npm install
# 安裝全域的 TypeScript 編譯器
RUN npm install -g typescript
# 複製所有文件到工作目錄
COPY . .
# 開放端口（假設使用的是 8080 端口）
EXPOSE 8080
index.ts -> TypeScript code，用來 compile 並轉成 js 給 html 引用
1
2
3
let firstName: string = "Dylan";
console.log(firstName);
window.alert(firstName);
tsconfig.json -> 告訴 typescript 的 compiler 哪些 code 要轉成 js，且放置在何處。
1
2
3
4
5
6
7
8
9
10
11
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"rootDir": "src",
"outDir": "public/dist",
"strict": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
package.son -> 宣告相依的模組及 npm 要 run 的 script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"name": "typescript-docker-example",
"version": "1.0.0",
"main": "server.js",
"scripts": {
"start": "node server.js",
"build": "tsc",
"dev": "tsc --watch"
},
"devDependencies": {
"@types/node": "^22.9.4",
"typescript": "^5.0.0"
},
"dependencies": {
"express": "^4.21.1"
}
}
index.html -> 引用我們 build 好的 js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<script src="/dist/index.js"></script>
</body>
</html>
執行結果
npm run build 之前，我們的檔案結構如下
docker container 建立完成後，使用 npm run build 去將 ts 轉成 js
npm run build 之後，產生對應的 js 檔
網頁載入後的結果
故意將 index.ts 內容複製到 index2.ts, 結果在 build 的階段就會出現錯誤，因為變數被重複宣告。
雖然 javascript 和 python 這類的動態語言，對沒學過程式的人來說，很容易上手，因為不用管什麼宣告變數的型態問題。但一旦專案越來越大的時候，還是會喜歡靜態語言，提前可以在 complier 看到錯誤，減少 debug 的時間。