🌟 TypeScript入門

TypeScript 是 JavaScript 的超集，由微軟開發并維護，通過靜態類型檢查和現代語言特性，讓大型應用開發變得更加可靠和高效。

// 一個簡單的 TypeScript 示例
interface User {name: string;age: number;greet(): string;
}class Developer implements User {constructor(public name: string, public age: number) {}greet() {return `Hello, I'm ${this.name} and I code! 👨?💻`;}
}const dev = new Developer("Alice", 28);
console.log(dev.greet());

🧩 為什么選擇 TypeScript？

特性	JavaScript	TypeScript
類型系統	動態類型	靜態類型
編譯時錯誤檢查	?	?
IDE 智能提示	有限	強大
面向對象特性	基本	完整
適用項目規模	中小型	中大型

🎯 TypeScript 核心特性

1. 🔍 類型系統（靜態類型檢查）

let isDone: boolean = false;  // 布爾值
let decimal: number = 6;      // 數字
let color: string = "blue";   // 字符串
let list: number[] = [1, 2, 3]; // 數組// 元組
let tuple: [string, number] = ["hello", 10];// 枚舉
enum Color { Red = 1, Green, Blue }
let c: Color = Color.Green;

2. 🏗? 接口與類型別名

// 接口
interface Point {x: number;y: number;z?: number; // 可選屬性readonly id: string; // 只讀屬性
}// 類型別名
type UserID = string | number;// 實現接口
class MyPoint implements Point {constructor(public x: number, public y: number, readonly id: string) {}
}

3. 🧬 泛型編程

function identity<T>(arg: T): T {return arg;
}// 使用
let output = identity<string>("myString");
let output2 = identity(42); // 類型推斷

4. 🎭 高級類型

// 聯合類型
type ID = string | number;// 交叉類型
type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;// 類型守衛
function isString(test: any): test is string {return typeof test === "string";
}

🛠? TypeScript 開發工具鏈

1. 開發環境配置

# 初始化項目
npm init -y# 安裝 TypeScript
npm install typescript --save-dev# 初始化 tsconfig.json
npx tsc --init

2. 推薦 VSCode 插件

• TypeScript Vue Plugin (Vue 支持)
• ESLint (代碼檢查)
• Prettier (代碼格式化)
• Jest Runner (測試運行)

3. 編譯與運行

// tsconfig.json 示例
{"compilerOptions": {"target": "ES2020","module": "commonjs","strict": true,"esModuleInterop": true,"outDir": "./dist"},"include": ["src/**/*"]
}

🌈 TypeScript 5.0+ 新特性

1. 🔥 裝飾器（標準）

@sealed
class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}@loggreet() {return "Hello, " + this.greeting;}
}

2. 🚀 滿足 ES 模塊規范

// 支持頂級 await
const data = await fetchData();
console.log(data);

3. 🧠 更智能的類型推斷

// 自動推斷數組類型
const mixed = ["text", 42, true]; // (string | number | boolean)[]

📊 TypeScript 生態系統

框架/庫	TS 支持度	特點
React	? 優秀	完整類型定義
Vue 3	? 原生	組合式 API 完美支持
Angular	? 內置	完全基于 TypeScript
Node.js	? 良好	@types/node 提供類型定義
Express	? 良好	需要安裝 @types/express

🚧 常見問題與解決方案

1. 類型斷言

// 方式一：尖括號語法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;// 方式二：as 語法
let strLength2: number = (someValue as string).length;

2. 處理第三方庫

// 沒有類型定義的庫
declare module "some-untyped-library";// 使用 @types
npm install --save-dev @types/lodash

3. 類型擴展

// 擴展全局類型
declare global {interface Window {myCustomProp: string;}
}

🎓 學習資源推薦

1. 官方文檔 - 最權威的參考資料
2. TypeScript Deep Dive - 深入理解 TS
3. TypeScript 入門教程 - 中文優質教程
4. TypeScript 4.0 新特性 - 官方博客