AICODING / DEMO
下载 Markdown 原文 ↗运行示例 ↗

什么是 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）

📚 学习资源

🔗 相关链接

本页目录 ↑