ai-coding-demo

什么是 TypeScript？

📖 概述

TypeScript 是微软开发的开源编程语言，是 JavaScript 的超集，添加了静态类型系统。它编译为纯 JavaScript，可以在任何浏览器或 Node.js 上运行。TypeScript 提供了最新的 ECMAScript 特性，并添加了可选的静态类型检查。

🌟 核心特性

1. 静态类型检查

编译时检查类型错误
提前发现潜在问题
提高代码质量和可维护性

2. 强类型系统

基础类型：number, string, boolean, array, tuple, enum
高级类型：interface, type, union, intersection
泛型支持

3. 面向对象特性

类（Classes）
接口（Interfaces）
继承（Inheritance）
抽象类（Abstract Classes）

4. 模块系统

ES6 模块语法
命名空间
动态导入

5. 最新 ECMAScript 支持

支持最新 JavaScript 特性
自动转换旧版本语法

💻 基本语法

1. 类型声明

// 基础类型
let count: number = 42
let name: string = "TypeScript"
let isActive: boolean = true

// 数组
let numbers: number[] = [1, 2, 3]
let names: Array<string> = ["Alice", "Bob"]

// 元组
let user: [string, number] = ["Alice", 25]

// 枚举
enum Color {
  Red = "red",
  Green = "green",
  Blue = "blue"
}

2. 接口（Interface）

interface User {
  id: number
  name: string
  email?: string  // 可选属性
  readonly age: number  // 只读属性
}

function createUser(user: User): User {
  return user
}

3. 类

class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  greet(): string {
    return `Hello, I'm ${this.name}`
  }
}

class Employee extends Person {
  employeeId: number

  constructor(name: string, age: number, id: number) {
    super(name, age)
    this.employeeId = id
  }

  greet(): string {
    return `${super.greet()}, ID: ${this.employeeId}`
  }
}

4. 泛型

function identity<T>(arg: T): T {
  return arg
}

// 使用泛型
let stringResult = identity<string>("hello")
let numberResult = identity<number>(42)

// 泛型约束
interface Lengthwise {
  length: number
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length)
  return arg
}

5. 联合类型与交叉类型

// 联合类型
let id: number | string = "abc123"

// 交叉类型
interface Person {
  name: string
}

interface Employee {
  employeeId: number
}

type PersonEmployee = Person & Employee

🏗️ 项目配置

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

🚀 开发流程

1. 安装 TypeScript

npm install -g typescript
# 或
npm install --save-dev typescript

2. 编译代码

# 编译所有 .ts 文件
tsc

# 编译单个文件
tsc index.ts

# 监视模式（自动编译）
tsc --watch

3. 在项目中使用

# 初始化 TypeScript 项目
tsc --init

# 安装类型定义
npm install @types/node @types/react

📦 常用工具

ts-node：直接运行 TypeScript
ts-loader：Webpack 的 TypeScript 加载器
@typescript-eslint/eslint-plugin：ESLint 规则
prettier：代码格式化
typedoc：文档生成

✅ 优缺点

优点

✅ 静态类型检查，提前发现错误
✅ 增强 IDE 支持（智能提示、重构）
✅ 提高代码可读性和可维护性
✅ 良好的重构支持
✅ 大型项目的最佳选择
✅ 与现代框架完美集成（React, Vue, Angular）

缺点

❌ 需要编译步骤
❌ 学习曲线较陡峭
❌ 开发初期可能降低速度
❌ 某些类型系统复杂难懂

🎯 适用场景

大型复杂项目
需要长期维护的应用
团队协作开发
对代码质量要求高的项目
使用现代框架（React, Vue, Angular）

📚 学习资源

🔗 相关链接

在线预览：TypeScript Demo
GitHub：microsoft/TypeScript
在线 Playground：TypeScript Play
DefinitelyTyped：类型定义库

This site is open source. Improve this page.