JavaScript与TypeScript

TypeScript 和 JavaScript 都是用于构建 Web 应用的编程语言，但它们有着不同的设计目标和特性。

一、JavaScript

1. 定义与特点

动态脚本语言：由 Brendan Eich 在 1995 年创建，最初用于浏览器端的交互逻辑。
弱类型/动态类型：变量类型在运行时确定，无需显式声明。
解释执行：代码直接由浏览器或 Node.js 解释执行。
灵活但松散：允许快速原型开发，但缺乏编译时类型检查。

2. 典型应用场景

前端网页交互（DOM 操作、事件处理）。
后端开发（Node.js）。
移动应用（React Native）和小程序。

二、TypeScript

1. 定义与特点

JavaScript 的超集：由 Microsoft 于 2012 年推出，完全兼容 JavaScript 语法。
静态类型系统：支持显式类型注解，编译时进行类型检查。
面向对象增强：提供类、接口、泛型、装饰器等高级特性。
需编译为 JavaScript：通过 tsc 编译器转换为标准 JS 代码。

2. 核心优势

代码可维护性：类型系统在大型项目中显著减少潜在错误。
开发体验优化：IDE 智能提示（如 VS Code）、重构支持。
渐进式采用：支持逐步为现有 JS 代码添加类型。

三、核心区别

特性	JavaScript	TypeScript
类型系统	动态类型（运行时检查）	静态类型（编译时检查）
开发体验	灵活但易出错	类型安全，工具链支持更完善
代码复杂度	适合小型项目或快速原型	更适合大型项目或团队协作
编译步骤	无需编译，直接运行	必须编译为 JavaScript
学习曲线	入门简单	需掌握类型系统与额外语法
兼容性	原生支持所有浏览器和运行时	需通过编译兼容目标环境

四、示例对比

1. 类型声明

// 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. 接口与类型检查

// TypeScript
interface User {name: string;age: number;
}function greet(user: User) {console.log(`Hello, ${user.name}!`);
}greet({ age: 30 }); // 编译时报错：缺少 `name` 属性