跳到主要内容

TypeScript 教程

欢迎学习 TypeScript！本教程将带你从零基础开始，逐步掌握 TypeScript 的核心知识和技能。

什么是 TypeScript？​

TypeScript 是由微软开发的开源编程语言，是 JavaScript 的超集。它在 JavaScript 的基础上添加了静态类型检查和其他特性。

TypeScript vs JavaScript​

特性JavaScriptTypeScript
类型系统动态类型静态类型
类型检查运行时编译时
错误发现运行时发现编写时发现
IDE 支持有限强大的智能提示
学习曲线较低需要学习类型概念

TypeScript 的优势​

  1. 静态类型检查：在编译时发现潜在错误，而不是运行时
  2. 更好的 IDE 支持：代码补全、重构、导航等功能更强大
  3. 增强代码可读性：类型注解作为文档，更容易理解代码意图
  4. 大型项目支持：适合团队协作和大型项目开发
  5. 渐进式采用：可以逐步将 JavaScript 项目迁移到 TypeScript

TypeScript 能做什么？​

静态类型检查​

// JavaScript - 运行时才发现错误
function add(a, b) {
    return a + b;
}
add(1, "2"); // "12" - 意外的字符串拼接

// TypeScript - 编译时就能发现错误
function add(a: number, b: number): number {
    return a + b;
}
add(1, "2"); // 错误：参数 "2" 不能赋值给类型 "number"

解释：TypeScript 在编译阶段就能发现类型错误，而不是等到运行时才暴露问题。

智能提示​

interface User {
    name: string;
    age: number;
    email: string;
}

function greet(user: User) {
    // IDE 会自动提示 user 的所有属性
    console.log(`Hello, ${user.name}!`);
    // user.  // 自动补全：name, age, email
}

解释：有了类型信息，IDE 可以提供更准确的代码补全和提示。

接口和类型别名​

// 定义对象的形状
interface Product {
    id: number;
    name: string;
    price: number;
    inStock?: boolean; // 可选属性
}

// 使用类型
const product: Product = {
    id: 1,
    name: "TypeScript 入门",
    price: 99.9
};

TypeScript 编译流程​

TypeScript 源码 (.ts)
        ↓
    TypeScript 编译器 (tsc)
        ↓
JavaScript 代码 (.js)
        ↓
    JavaScript 运行时（浏览器/Node.js）

解释：TypeScript 代码需要先编译成 JavaScript，然后才能在浏览器或 Node.js 中运行。编译过程会移除所有类型注解。

学习路线​

基础阶段​

进阶阶段​

工程化​

参考资料​

学习建议​

  1. 有 JavaScript 基础：TypeScript 是 JavaScript 的超集，建议先掌握 JavaScript
  2. 动手实践：每学一个知识点，都要动手编写代码
  3. 利用 IDE：使用 VS Code 等支持 TypeScript 的编辑器
  4. 循序渐进：从简单类型开始，逐步学习高级特性
  5. 阅读错误：TypeScript 的错误信息很详细，学会阅读和理解

参考资源​

准备好开始学习了吗？点击下一章开始你的 TypeScript 学习之旅！