TypeScript 和 JavaScript 有什么区别？

知识点图片

TypeScript (TS) 和 JavaScript (JS) 是现代 Web 开发中最常用的两种语言。简单来说，TypeScript 是 JavaScript 的超集（Superset）。这意味着所有合法的 JavaScript 代码都是合法的 TypeScript 代码，但 TypeScript 增加了额外的功能，主要是静态类型系统。

以下是两者的核心区别：

1. 类型系统 (核心区别)

JavaScript (动态类型): 变量的类型是在运行时确定的。你可以将一个数字赋值给变量，随后又将字符串赋值给同一个变量。这灵活但容易出错。
TypeScript (静态类型): 变量的类型是在编译时确定的。如果你定义了一个变量是数字，试图给它赋值字符串时，编辑器会报错（代码甚至无法通过编译）。

2. 运行机制

JavaScript: 可以直接在浏览器或 Node.js 环境中运行。
TypeScript: 不能直接在浏览器或 Node.js 中运行。它必须先通过“编译”（Transpilation）过程转换成 JavaScript，然后才能运行。

3. 错误检测

JavaScript: 错误通常在运行时才会被发现（比如用户点击按钮后页面崩溃）。
TypeScript: 错误在编写代码时或编译时就会被发现。这极大地减少了线上 Bug 的数量。

4. 新特性与语法

JavaScript: 遵循 ECMAScript 标准，虽然现在也有类（Class），但相对宽松。
TypeScript: 提供了更多面向对象编程（OOP）的高级特性，例如：
- 接口 (Interfaces)
- 泛型 (Generics)
- 枚举 (Enums)
- 访问修饰符 (public, private, protected)
- 命名空间 (Namespaces)

5. 开发体验 (IDE 支持)

JavaScript: 提供基本的自动补全，但在处理复杂对象或大型项目时，提示往往不够准确。
TypeScript: 提供极佳的智能提示（IntelliSense）。因为编辑器知道每个变量的类型，所以它可以准确地告诉你该对象有哪些属性和方法，重构代码也更安全、更轻松。

代码对比示例

场景：一个简单的加法函数

JavaScript:

javascript

function add(a, b) {
  return a + b;
}

// JS 不会报错，但结果可能不是你想要的
// 结果是字符串 "510"，而不是数字 15
console.log(add(5, "10"));

TypeScript:

typescript

function add(a: number, b: number): number {
  return a + b;
}

// TS 在你写下这行代码时就会报错：
// Argument of type 'string' is not assignable to parameter of type 'number'.
console.log(add(5, "10"));

总结对比表

特性	JavaScript	TypeScript
类型系统	动态类型 (Weakly Typed)	静态类型 (Strongly Typed)
文件扩展名	`.js`	`.ts`
运行环境	浏览器 / Node.js 直接运行	需编译成 JS 后运行
报错时机	运行时 (Runtime)	编译时 (Compile time)
学习曲线	较低，灵活易上手	较高，需要理解类型概念
适合项目	小型项目、脚本、快速原型	大型项目、团队协作、企业级应用
生态系统	庞大，原生支持	庞大，兼容所有 JS 库 (通过类型定义文件 `.d.ts`)

该如何选择？

选择 JavaScript 如果：
- 项目非常小（简单的网页交互）。
- 你需要快速构建原型，不在乎后期维护。
- 团队成员对强类型语言不熟悉，且学习成本受限。
选择 TypeScript 如果：
- 项目规模较大，代码量多。
- 多人团队协作（类型即文档，方便别人看懂你的代码）。
- 你希望代码更健壮，减少低级 Bug（如 undefined is not a function）。
- 你使用 React, Vue 3, Angular 等现代框架（它们对 TS 支持极好）。

目前业界趋势： TypeScript 已经成为中大型前端和 Node.js 后端项目的标准配置。

播面