JavaScript 与 Java、TypeScript 有什么区别？

很多初学者常因名字或应用场景而将 JavaScript、Java 和 TypeScript 混为一谈。核心结论是：JavaScript 是现代 Web 的原生动态脚本语言；Java 是一门独立成熟的面向对象静态强类型编程语言，运行于独立的虚拟机（JVM）上，与 JavaScript 除了名称部分重合外几乎没有亲缘关系；TypeScript 则是由微软开发的 JavaScript 超集，在开发阶段为 JavaScript 补充了静态类型检查，并在最终编译时完全转换为纯 JavaScript 执行。本文将从语言渊源、执行机制、类型系统与选型标准四个维度进行系统解析。

图 1：Java 独立生态与 JavaScript / TypeScript 超集包含关系全景图

一、JavaScript 与 Java：名字相近背后的本质断代

编程领域最经典的比喻之一是：“Java 与 JavaScript 的关系，就像雷锋与雷峰塔、热狗与狗一样，基本没有实质关联。”

1995年，网景公司（Netscape）原本打算为浏览器开发一款轻量级脚本语言（最初名为 Mocha，后改为 LiveScript）。恰逢当时 Sun 公司的 Java 语言在业界声名大噪，网景为了借势营销，才临时与 Sun 达成协议更名为 JavaScript。除了一些基础语法（如 if/else、for 循环、花括号语法结构）受到当时 C/Java 风潮影响外，两者的底层架构截然不同：

• 运行环境与载体不同：Java 运行在 Java 虚拟机（JVM）上，源码先通过 javac 编译为 .class 字节码文件，再由不同操作系统的 JVM 解释或即时编译运行。JavaScript 则设计为解释执行的脚本语言，由宿主环境（浏览器内核如 Google V8、Apple JavaScriptCore，或 Node.js/Deno 运行环境）直接读取文本源码并执行。
• 类型系统不同：Java 是静态类型、强类型语言，所有变量在声明时必须显式指定或推导出固定的类型，编译期间进行严格类型检查。JavaScript 是动态类型、弱类型语言，变量类型随赋值在运行时动态决定，且允许隐式类型转换。
• 面向对象机制不同：Java 属于传统的基于类（Class-based）的继承体系；JavaScript 的底层对象模型则是基于原型（Prototype-based）。尽管现代 ES6 引入了 class 关键字，其本质仍然是基于原型的语法糖。

二、JavaScript 与 TypeScript：从动态脚本到工程化超集

JavaScript 最初设计时仅用于编写几百行以内的网页互动脚本，随着前端应用的规模膨胀至几十万行代码，JavaScript 动态弱类型的缺陷暴露无遗：变量拼写错误、对象属性不存在、参数传递类型不一致等问题，往往只能在代码实际运行甚至上线后才被暴露。

微软在 2012 年推出了 TypeScript。TypeScript 被严格定义为 JavaScript 的语法超集（Superset）。这意味着：

1. 向下兼容：任何合法的 JavaScript 代码片段，将其后缀直接改为 .ts，它仍然是合法的 TypeScript 代码。
2. 静态类型注解：TypeScript 允许开发者为变量、函数参数、对象形状添加明确的类型声明（如 number、string、interface、泛型等）。
3. 只在开发态存在：浏览器和标准的 Node.js 引擎无法直接运行 TypeScript。TypeScript 必须经过编译（通常使用 tsc 或 Vite/Babel 等打包工具）将所有类型注解“剥离”，最终输出纯正的 JavaScript 供运行环境执行。

图 2：TypeScript 经由类型擦除与静态检查输出 JavaScript 的工作流程

三、代码视角直观对比：类型约束与运行机制

为了具体展示三者的编码感受，我们以一个简单的“计算订单折扣总额”需求为例，对比三种语言在写法和错误处理上的差异。

1. JavaScript 实现与潜在隐患

// JavaScript: 没有类型提示，运行时容易隐式转换
function calculateTotal(price, discount) {
  return price * (1 - discount);
}

// 正常调用
console.log(calculateTotal(100, 0.1)); // 90

// 潜在调用陷阱：传入了非预期类型，JS不会报错，直接返回 NaN 或荒谬计算
console.log(calculateTotal("100元", 0.1)); // NaN
console.log(calculateTotal(100, "免费"));  // NaN

在 JavaScript 中，函数无法强制约束调用方传入正确的数字，若要保证系统健壮性，必须在代码内部写大量的 typeof price === 'number' 防御性判断。

2. TypeScript 静态约束

// TypeScript: 在开发阶段强制参数与返回值类型
interface OrderDiscount {
  price: number;
  discount: number;
}

function calculateTotal(order: OrderDiscount): number {
  return order.price * (1 - order.discount);
}

// 正确调用
calculateTotal({ price: 100, discount: 0.1 });

// 错误调用：在编辑器保存时就会标红，编译直接中断，无法生成错误产物
// calculateTotal({ price: "100元", discount: 0.1 }); 
// Error: Type 'string' is not assignable to type 'number'.

3. Java 面向对象与强类型

// Java: 强类型、面向对象、强制声明在类内部
public class OrderCalculator {
    public static double calculateTotal(double price, double discount) {
        if (discount < 0 || discount > 1) {
            throw new IllegalArgumentException("折扣率必须在 0 到 1 之间");
        }
        return price * (1 - discount);
    }

    public static void main(String[] args) {
        double result = calculateTotal(100.0, 0.1);
        System.out.println("结算金额: " + result);
        
        // 编译期报错：类型不匹配，无法生成 .class 文件
        // calculateTotal("100元", 0.1);
    }
}

图 3：三种语言在研发全流程中的错误阻断点对比

四、核心属性横向对比表

为了便于速查与归纳，下表梳理了三门语言在生态定位、类型模型、编译目标及典型场景上的核心差异：

五、工程实践与技术选型建议

面对实际项目开发，开发者应如何在这三者中做选择？可以遵循以下决策路径：

图 4：现代工程架构中的技术栈选型判断路径