1.1 TypeScript 是什么

开启类型安全的 JavaScript 之旅

🎯 学习目标

  • 理解 TypeScript 的定义和核心特性
  • 了解 TypeScript 的优势和应用场景
  • 认识 TypeScript 与 JavaScript 的关系
  • 掌握 TypeScript 的编译原理

📚 TypeScript 定义

TypeScript 是由微软开发的开源编程语言，是 JavaScript 的超集，添加了可选的静态类型和基于类的面向对象编程。

💡
核心定义

TypeScript = JavaScript + 类型系统 + ES6+ 特性 + 编译时检查

⚡ TypeScript 核心特性

🔒

静态类型

编译时类型检查，提前发现错误

🛠️

类型推断

智能推断变量类型，减少冗余代码

📦

ES6+ 支持

编译到目标 ES 版本，兼容性好

📊 JavaScript vs TypeScript

特性 JavaScript TypeScript
类型系统 动态类型 静态类型（可选）
错误检测 运行时 编译时 + 运行时
IDE 支持 基础提示 智能补全、重构
代码维护 大型项目困难 大型项目友好
学习曲线 较低 中等

💻 代码对比

JavaScript

function greet(name) { return 'Hello, ' + name; } // 运行时才发现问题 greet(123); // "Hello, 123" greet(); // "Hello, undefined"

TypeScript

function greet(name: string): string { return 'Hello, ' + name; } // 编译时报错 greet(123); // Error: 类型不匹配 greet(); // Error: 缺少参数 greet('World'); // OK: "Hello, World"

🔧 TypeScript 编译流程

┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ .ts 文件 │ -> │ TypeScript │ -> │ .js 文件 │ │ (源代码) │ │ 编译器 │ │ (目标代码) │ └─────────────┘ └─────────────┘ └─────────────┘ │ ▼ ┌─────────────┐ │ 类型检查 │ │ 语法转换 │ └─────────────┘
✅
编译优势

TypeScript 代码最终编译成纯 JavaScript，可以在任何浏览器、Node.js 环境中运行。编译过程中会进行类型检查，帮助发现潜在错误。

🌐 TypeScript 应用场景

前端开发

  • React / Vue / Angular 项目
  • 大型 SPA 应用
  • 组件库开发

后端开发

  • Node.js 服务端
  • NestJS / Express
  • API 接口开发

📝 本节小结

✅
  • • TypeScript 是 JavaScript 的超集，添加了静态类型系统
  • • 编译时类型检查，提前发现潜在错误
  • • 更好的 IDE 支持和代码提示
  • • 适合中大型项目开发
← 返回首页 下一节：TypeScript 与 JavaScript 的关系 →