一、TypeScript 簡介

TypeScript 是由微軟開發的開源編程語言，是 JavaScript 的超集，添加了靜態類型、接口、枚舉、類等特性，使開發大型應用更安全、可維護、可擴展。最終會被編譯為標準的 JavaScript 代碼在瀏覽器或 Node.js 中運行。

---

二、安裝前提條件

• 已安裝 Node.js（推薦使用 LTS 版本）

node -v
npm -v

如未安裝，請訪問 https://nodejs.org/ 下載并安裝。

---

三、安裝 TypeScript

3.1 全局安裝（適合命令行使用）

npm install -g typescript

驗證安裝是否成功：

tsc -v

3.2 項目中安裝（推薦）

在項目中執行：

npm install typescript --save-dev

---

四、編寫第一個 TypeScript 程序

4.1 新建文件

創建 hello.ts 文件：

let message: string = "Hello, TypeScript!";
console.log(message);

4.2 編譯為 JavaScript

tsc hello.ts

生成 hello.js：

var message = "Hello, TypeScript!";
console.log(message);

運行：

node hello.js

---

五、初始化 tsconfig.json

使用配置文件管理項目編譯設置：

tsc --init

生成 tsconfig.json 文件，可配置目標版本、模塊系統、路徑別名等。

---

六、TypeScript 特性示例

6.1 類型注解

let num: number = 123;
let str: string = "abc";
let isReady: boolean = true;

6.2 接口（Interface）

interface Person {name: string;age: number;
}let user: Person = {name: "小奇",age: 30
};

6.3 類（Class）

class Animal {name: string;constructor(name: string) {this.name = name;}speak() {console.log(this.name + " 發出聲音");}
}

6.4 枚舉（Enum）

enum Color { Red, Green, Blue }
let c: Color = Color.Green;

---

七、在 Web 項目中使用 TypeScript

7.1 安裝依賴

npm install typescript --save-dev

7.2 配置構建工具（如 Webpack 或 Vite）

• 使用 ts-loader 或 esbuild
• 配置 tsconfig.json
• 配合 React 可用 .tsx 文件

---

八、常見問題

Q1: 編譯失敗或找不到命令？

• 檢查是否正確安裝 TypeScript
• 使用 npx tsc 可避免找不到全局命令

Q2: tsconfig 配置無效？

• 確保使用 tsc 時位于項目根目錄
• 或指定配置路徑：tsc -p ./config/tsconfig.json

---

九、推薦工具和資源

編輯器插件

• VS Code：推薦使用，內置 TypeScript 支持
• 插件：TSLint、Prettier、Path Intellisense

學習資源

• TypeScript 官網
• TypeScript 中文文檔
• 菜鳥教程 TypeScript

---

本文由“小奇Java面試”原創發布，轉載請注明出處。

可以搜索【小奇JAVA面試】第一時間閱讀，回復【資料】獲取福利，回復【項目】獲取項目源碼，回復【簡歷模板】獲取簡歷模板，回復【學習路線圖】獲取學習路線圖。