TypeScript vs JavaScript 对比
TypeScript 和 JavaScript 是前端开发中两个最重要的语言，理解它们之间的区别对于现代 Web 开发至关重要。
JavaScript 是 Web 的原生脚本语言，而 TypeScript 是 JavaScript 的超集，添加了类型系统和其他高级特性。
核心区别
| 特性 | JavaScript | TypeScript |
|---|---|---|
| 类型系统 | 动态类型 | 静态类型（可选） |
| 编译 | 解释执行 | 编译为 JavaScript |
| 开发时类型检查 | 无 | 有 |
| IDE 支持 | 基础 | 强大的智能提示 |
| 代码重构 | 困难 | 安全简单 |
类型系统对比
JavaScript 是动态类型语言，变量类型在运行时确定：
JavaScript 动态类型
// JavaScript - 变量类型可以随时改变
var message = "Hello";
message = 123; // 合法，不会报错
message = true; // 仍然合法
// 运行前不知道变量类型
function greet(name) {
return "Hello, " + name;
}
var message = "Hello";
message = 123; // 合法，不会报错
message = true; // 仍然合法
// 运行前不知道变量类型
function greet(name) {
return "Hello, " + name;
}
TypeScript 是静态类型语言，在编译时检查类型：
TypeScript 静态类型
// TypeScript - 声明时指定类型
var message: string = "Hello";
// message = 123; // 编译错误：Type 'number' is not assignable to type 'string'
// 函数参数和返回值类型明确
function greet(name: string): string {
return "Hello, " + name;
}
// 类型错误会在编译时发现
greet(123); // 编译错误：Argument of type 'number' is not assignable to parameter of type 'string'
var message: string = "Hello";
// message = 123; // 编译错误：Type 'number' is not assignable to type 'string'
// 函数参数和返回值类型明确
function greet(name: string): string {
return "Hello, " + name;
}
// 类型错误会在编译时发现
greet(123); // 编译错误：Argument of type 'number' is not assignable to parameter of type 'string'
编译过程
TypeScript 需要编译为 JavaScript 才能在浏览器中运行：
TypeScript 源码
// app.ts - TypeScript 源码
interface User {
name: string;
age: number;
}
function createUser(name: string, age: number): User {
return { name, age };
}
var user = createUser("Alice", 25);
console.log(user);
interface User {
name: string;
age: number;
}
function createUser(name: string, age: number): User {
return { name, age };
}
var user = createUser("Alice", 25);
console.log(user);
编译后的 JavaScript：
编译后的 JavaScript
// app.js - 编译后的 JavaScript
function createUser(name, age) {
return { name: name, age: age };
}
var user = createUser("Alice", 25);
console.log(user);
function createUser(name, age) {
return { name: name, age: age };
}
var user = createUser("Alice", 25);
console.log(user);
类型推断
TypeScript 具有强大的类型推断能力，即使不显式声明类型：
类型推断
// TypeScript 自动推断类型
var num = 10; // 推断为 number
var str = "hello"; // 推断为 string
var isActive = true; // 推断为 boolean
// 函数返回值类型也会推断
function add(a, b) {
return a + b; // 推断返回值为 number
}
var result = add(1, 2); // result 类型为 number
var num = 10; // 推断为 number
var str = "hello"; // 推断为 string
var isActive = true; // 推断为 boolean
// 函数返回值类型也会推断
function add(a, b) {
return a + b; // 推断返回值为 number
}
var result = add(1, 2); // result 类型为 number
开发体验对比
智能提示
TypeScript 为 IDE 提供丰富的类型信息，实现智能提示：
// 在 TypeScript 中，IDE 知道 user 对象有 name 和 age 属性 user. // 自动提示 .name 和 .age // JavaScript 中 IDE 无法确定类型，提示有限 user. // 可能没有有用的提示
重构支持
TypeScript 使得代码重构更安全：
- 重命名变量/函数时，所有引用自动更新
- 修改函数签名时，调用处会显示错误
- 提取代码时，类型自动保持
选择 TypeScript 的理由
为什么选择 TypeScript：
- 编译时错误检测，提前发现 bug
- 更好的代码可读性和可维护性
- 强大的 IDE 智能提示
- 安全的重构
- 现代前端框架的标配（React、Vue、Angular）
TypeScript 是 JavaScript 的超集，它在保持 JavaScript 灵活性的同时，增加了类型系统来提高代码质量。对于大型项目，TypeScript 的优势更加明显。