※ 設計模式與程式架構(一)

※ 何謂Typescript？

Typescript是Microsoft開發出來的一種JavaScript的擴展程式語言。

※ 為什麼選擇 TypeScript？

1. 靜態型別：
2. • 在執行程式碼之前就能避免許多錯誤。
   • 幫助開發人員更快發現型別使用上的問題。
   • 有效提升開發應用程式的效率。
2. 輕鬆轉換到 JavaScript：
3. • TypeScript 和 JavaScript 具有相同的基礎。
   • 可以在任何開發階段將 TypeScript 轉換為 JavaScript。
   • 可以在 TypeScript 專案中自由呼叫 JavaScript 的函式庫。
3. 可靠性：
4. • TypeScript 的程式碼比 JavaScript 更可靠且結構化。
   • 在開發大型專案時，能夠輕鬆地維護、除錯和重構程式碼。
4. 明確性：
5. • TypeScript 比 JavaScript 更加明確、易讀。
   • 在大型專案中，能更好理解程式碼的上下文。
   • 能快速弄懂專案的結構和不同元件的互動方式。
   • 變數、函數、返回值等都可以明確定義型別。
5. 擴充語法：
6. • 支援 interface、implement、extends、enum 等語法。
   • 對於OOP的支援更加完善。
6. VS Code 自動型別檢查：
7. • 提供自動型別檢查功能，使程式碼更加穩健。
7. 完整支援 JavaScript 語法：
8. • 對於學過 JavaScript 的使用者來說，相對友善。
   • 可以無縫使用現有的 JavaScript 技能和知識。

※ Typescript環境建置：

使用工具：

• VS Code。
• ts-node：在Node.Js環境下執行TypeScript。

環境需求：

1. Node.Js環境。
2. 具有node指令。
3. 具有npm或yarn。

安裝步驟：

• 環境建置ts-node執行環境。

npm install -g ts-node //全域安裝ts-node

• 建立資料夾，並用【CD】進入資料夾。

mkdir專案名稱​；【CD】專案名稱

• 使用npm建立Node專案。

npm init​ //初始化Node專案，enter到底後產生package json。

• 安裝ts-node相關套件。

1. 在專案中安裝 TypeScript。

npm install -D ​TypeScript //-D表示把套件裝在開發過程的選項。

2. 安裝 tslib可以減少編譯後的 JavaScript 檔案大小。安裝@types/node可以獲得型別檢查和自動完成功能。

npm install -D tslib @types/node

3. 初始化 tsconfig.json有兩個方式：

• 適合希望快速設置，簡化配置過程的開發者。

npm install -D @tsconfig/node14 //請依照個人的版本

• 記得手動增加tsconfig.json檔案，內容要自己增加。

{
  "extends": "@tsconfig/node14/tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist", // 編譯後文件放在 dist 目錄
    "rootDir": "./src", // 源碼的根目錄放在 src 目錄
    "strict": true, //啟用所有嚴格類型檢查選項。
    "esModuleInterop": true, //啟用 ES 模塊互操作性。
    "skipLibCheck": true, //跳過型別檢查所有的聲明文件。
    "forceConsistentCasingInFileNames": true, //強制文件名大小寫一致。
    "module": "commonjs", //  Node.js 預設使用的模塊系統。
    "noImplicitAny": true, // 強制明確指定類型。
    "preserveConstEnums": true, // 保留 const enum 定義。
    "sourceMap": true // 生成對應的 .map 文件，以便於進行調試。
  },
  "include": [
    "src/**/*" //指定要編譯的文件或目錄。
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts" // 指定不需要編譯的文件或目錄。
  ]
}

• 適合對配置有特定需求，需要手動調整生成的配置文件來滿足具體需求。

npx tsc --init

• 會自動生成tsconfig.json檔案，但內容要自己修改。

{
  "compilerOptions": {
    "target": "es2020",                    // 更新目標 ECMAScript 版本
    "module": "commonjs",
    "outDir": "./dist",                    // 指定輸出目錄
    "rootDir": "./src",                    // 指定輸入文件的根目錄
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

• 測試執行設定結果

ts-node -e 'console.log("Hello, World")'
//輸出Hello, World

設置環境變數（Windows版）：

1. 安裝 cross-env：

npm install --save-dev cross-env

2. 更新 package.json：

"start": "set NODE_OPTIONS=--trace-deprecation --abort-on-uncaught-exception && ts-node ./src/index.ts"