ts与js的关系

JavaScript 和 TypeScript 分别是什么？

• JS (JavaScript)

动态类型语言

let age = 20;
age = "hello";

允许变量在运行时保存不同类型的值。

• TS (TypeScript)

带静态类型检查的语言

let age: number = 20;
age = "hello"; // 报错

编译器会提前发现类型不匹配。

---

JavaScript 由 ECMAScript 标准定义核心语言规范，浏览器和 Node.js 等环境提供额外 API。

TypeScript 则由微软推出，在 JavaScript 的语法基础上增加类型注解、接口、泛型等功能。

这里需要注意：

• 合法的 JavaScript 代码通常也是合法的 TypeScript 代码（但不保证通过所有类型检查）。

• TypeScript 代码不一定能直接作为 JavaScript 运行。

• TypeScript 的类型主要用于开发和编译阶段，通常不会保留在生成的 JavaScript 中。

从ts到js

先写一个简单的ts代码demo.ts

const message: string = "Hello TypeScript!";

const title : HTMLElement | null = document.getElementById("title");

if(title !== null) {
  title.textContent = message;
}

使用命令编译得到js

npx tsc demo.ts --target es2020

󰣇 nirijiang  ~/projs/demos   v26.11.1   04:06  
 cat demo.js
"use strict";
const message = "Hello TypeScript!";
const title = document.getElementById("title");
if (title !== null) {
    title.textContent = message;
}

查看两个文件的差异

󰣇 nirijiang  ~/projs/demos   v26.11.1   04:13  
 diff -u demo.ts demo.js
--- demo.ts	2026-10-17 04:01:55.990720038 -0400
+++ demo.js	2026-10-17 04:02:02.150241276 -0400
@@ -1,7 +1,6 @@
-const message: string = "Hello TypeScript!";
-
-const title : HTMLElement | null = document.getElementById("title");
-
-if(title !== null) {
-  title.textContent = message;
+"use strict";
+const message = "Hello TypeScript!";
+const title = document.getElementById("title");
+if (title !== null) {
+    title.textContent = message;
 }

创建html网页

󰣇 nirijiang  ~/projs/demos   v26.11.1   04:13  
 cat index.html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TS 实验</title>
</head>
<body>
    <h1 id="title">原始内容</h1>

    <script src="./demo.js"></script>
</body>
</html>

注意加载的js,浏览器只认js

---

打开http服务器,监听8000端口

原本页面显示的是"原始内容",但在js的作用下显示修改后的内容

---

我们也可以用curl命令获取不加渲染的响应

󰣇 nirijiang  ~/projs/demos   v26.11.1   04:22  
 curl -i http://localhost:8000/
HTTP/1.0 200 OK
Server: SimpleHTTP/0.6 Python/3.14.8
Date: Sat, 17 Oct 2026 08:26:18 GMT
Content-type: text/html
Content-Length: 206
Last-Modified: Sat, 17 Oct 2026 08:12:49 GMT

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TS 实验</title>
</head>
<body>
    <h1 id="title">原始内容</h1>

    <script src="./demo.js"></script>
</body>
</html>

󰣇 nirijiang  ~/projs/demos   v26.11.1   04:26  
 curl -i http://localhost:8000/demo.js
HTTP/1.0 200 OK
Server: SimpleHTTP/0.6 Python/3.14.8
Date: Sat, 17 Oct 2026 08:26:39 GMT
Content-type: text/javascript
Content-Length: 156
Last-Modified: Sat, 17 Oct 2026 08:02:02 GMT

"use strict";
const message = "Hello TypeScript!";
const title = document.getElementById("title");
if (title !== null) {
    title.textContent = message;
}

如果修改js中的内容

󰣇 nirijiang  ~/projs/demos   v26.11.1   04:29  
 sed -i 's/Hello TypeScript!/Hello World!/' demo.js

󰣇 nirijiang  ~/projs/demos   v26.11.1   04:32  
 cat demo.js
"use strict";
const message = "Hello World!";
const title = document.getElementById("title");
if (title !== null) {
    title.textContent = message;
}

那么浏览器渲染出来的内容也将改变

---

浏览器实际经历了这样的过程：

1. 向本地 HTTP 服务器请求 HTML。

2. HTML 解析器构建 DOM。

3. 解析到 script，请求并执行 main.js。

4. JavaScript 找到 id=“title” 的元素。

5. 修改它的 textContent。

6. 浏览器更新渲染结果。

这里要区分：TypeScript 编译是在浏览器加载之前完成的，而 DOM 修改是在浏览器中执行 JavaScript 时发生的。

---

实现可交互网页

󰣇 nirijiang  ~/projs/demos   v26.11.1   05:12  
 cat index.html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浏览器实验</title>
    <style>
        #modal {
            display: none;
            border: 1px solid gray;
            padding: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>我的网站</h1>

    <button id="open">打开弹窗</button>

    <div id="modal">
        <p>这是一个弹窗！</p>
        <button id="close">关闭</button>
    </div>

    <script src="main.js"></script>
</body>
</html>

󰣇 nirijiang  ~/projs/demos   v26.11.1   05:12  
 cat main.js        
const openBtn = document.getElementById("open");
const closeBtn = document.getElementById("close");
const modal = document.getElementById("modal");

openBtn.addEventListener("click", () => {
    modal.style.display = "block";
});

closeBtn.addEventListener("click", () => {
    modal.style.display = "none";
});

---

chromium用什么语言写的

Chromium 主要使用 C++ 编写，但它并不是完全由 C++ 实现的，而是一个多语言项目。

C++
浏览器核心、Blink 渲染引擎、V8 JavaScript 引擎、网络与进程管理

Rust
部分安全敏感组件及底层功能

JavaScript / TypeScript

开发者工具、浏览器内部网页和部分界面

HTML / CSS

浏览器内部页面及界面

Java / Kotlin

Android 平台相关代码

Objective-C / Swift

macOS、iOS 平台相关代码

Python

构建脚本、测试和自动化工具

Chromium 的核心架构

Chromium 浏览器
│
├── Browser Process（C++）
│   ├── 标签页管理
│   ├── 网络请求
│   └── 进程管理
│
├── Blink 渲染引擎（C++）
│   ├── HTML 解析
│   ├── DOM 树
│   ├── CSS 样式计算
│   └── 布局与渲染
│
└── V8 JavaScript 引擎（C++）
    ├── JavaScript 解析
    ├── Ignition 字节码解释器
    ├── Sparkplug / Maglev / TurboFan
    └── 垃圾回收

---

JavaScript 与 TypeScript 的发展及底层原理

一、浏览器与前端技术的关系

我们可以发现，网页最终呈现的画面，本质上是浏览器这个程序运行的结果。

HTML、CSS 和 JavaScript 最初都是围绕 Web 发展起来的技术：

• HTML：描述网页的结构与内容。
• CSS：描述网页的样式与布局。
• JavaScript：实现网页的动态逻辑与交互行为。
• 浏览器：负责解析 HTML、计算 CSS 样式、执行 JavaScript，并最终将网页渲染到屏幕上。

需要注意的是，HTML 是标记语言，CSS 是样式表语言，而 JavaScript 是编程语言。

这些技术并不依赖某一个特定浏览器，而是遵循相应的 Web 标准，可以由 Chromium、Firefox 等不同浏览器实现。

二、JavaScript 引擎的出现与发展

JavaScript 最初诞生于 1995 年，主要用于浏览器中的网页交互。

早期浏览器就已经内置了 JavaScript 引擎，因此，JavaScript 引擎并不是后来才出现的。

2008 年，Google 推出了 V8 JavaScript 引擎。V8 主要由 C++ 编写，通过解释执行、即时编译（JIT）等技术提高 JavaScript 的执行性能。

所谓 JavaScript 引擎，本质上就是实现 JavaScript 语言执行机制的软件。

它负责解析 JavaScript 源代码、生成内部表示、执行程序、管理内存等工作。

JavaScript 是一门语言，而 V8 是这门语言的一种实现。除了 V8，还有 Firefox 使用的 SpiderMonkey 和 Safari 使用的 JavaScriptCore。

由于 V8 可以被嵌入浏览器之外的程序，JavaScript 的执行不再必须依赖完整的浏览器。

但这里需要区分两个概念：

• JavaScript 引擎：解决 JavaScript 代码如何执行的问题。
• 运行环境（Runtime）：在引擎的基础上，为 JavaScript 提供文件系统、网络、进程等额外能力。

因此，V8 的出现并不是 JavaScript 能够跨平台运行的唯一原因。JavaScript 的跨平台能力来自标准化的语言规范，以及不同操作系统和 CPU 架构上的引擎实现。

三、Node.js 的出现：JavaScript 走出浏览器

2009 年，Ryan Dahl 创建了 Node.js。

Node.js 将 V8 引擎与操作系统相关的功能结合起来，使 JavaScript 能够在浏览器之外运行，并用于服务器开发。

Node.js 本身不是 JavaScript 引擎，而是一个 JavaScript 运行环境。

它主要由 JavaScript、C++ 和 C 等语言实现，并集成了 V8、libuv 等组件。

其中：

• V8 负责执行 JavaScript。
• Node.js 提供文件系统、网络、进程等 API。
• libuv 等底层组件帮助实现事件循环、异步 I/O 和跨平台操作。
• 操作系统通过系统调用提供实际的文件、网络和进程管理能力。

例如，当 JavaScript 调用 Node.js 的文件操作 API 时，Node.js 会通过底层原生代码使用操作系统提供的文件系统接口。

因此，JavaScript 并不是直接获得了操作硬件或操作系统的能力，而是通过 Node.js 提供的 API 间接使用这些能力。

这使得 JavaScript 不再局限于网页交互，还可以开发 HTTP 服务器、命令行工具、自动化程序等。

四、JavaScript 为什么逐渐成为通用编程语言？

JavaScript 应用领域的扩大，并不只是因为引擎性能越来越强，还因为运行环境、开发工具和生态系统不断完善。

它的发展形成了一个相互促进的过程：

1. 浏览器的普及，使 JavaScript 积累了大量开发者。
2. V8 等引擎的发展，提高了 JavaScript 的执行性能。
3. Node.js 等运行环境的出现，扩展了 JavaScript 可以使用的系统能力。
4. React、Electron、React Native 等工具和框架，使 JavaScript 能够用于复杂网页、桌面应用和移动应用开发。
5. 应用领域扩大，吸引了更多开发者，推动社区、工具链和开源生态持续发展。

因此，JavaScript 的广泛应用并不完全取决于语言本身，而是语言规范、执行引擎、运行环境、框架和开发者生态共同作用的结果。

一门编程语言能够应用于哪些领域，不仅取决于语言自身的设计，还取决于它的实现方式，以及运行环境向它开放了哪些能力。

五、TypeScript 的出现：为 JavaScript 增加静态类型系统

随着 JavaScript 被广泛应用于大型软件项目，其动态类型机制带来的维护问题逐渐受到重视。

JavaScript 并不是没有类型，而是一门动态类型语言。它的值具有类型，运行时也会进行类型检查，但语言本身没有内置 TypeScript 式的静态类型系统。

这意味着某些类型错误只有在程序运行时才会暴露，增加了大型项目开发、维护和重构的难度。

2012 年，微软推出了 TypeScript。

TypeScript 是 JavaScript 的超集，在兼容 JavaScript 主要语言特性的基础上，引入了：

• 静态类型检查
• 类型注解与类型推断
• 接口（Interface）
• 泛型（Generics）
• 联合类型等高级类型机制

TypeScript 编译器可以在程序运行之前发现许多类型不匹配问题，从而提高代码的可维护性。

但 TypeScript 不能保证程序的业务逻辑正确，也不能消除所有运行时错误。

通常情况下，TypeScript 代码需要经过编译，移除类型信息并转换为 JavaScript，然后再交给浏览器或 Node.js 等运行环境执行。

因此，TypeScript 并不是 JavaScript 的替代品，而是在 JavaScript 生态基础上发展出的、具有静态类型系统的语言。

六、最终理解：语言、引擎、运行环境与操作系统

从底层角度来看，我们需要区分四个不同的概念。

1. 编程语言（Language）

定义程序的语法、语义和行为规则，例如 JavaScript、C++、Python。

2. 语言引擎（Engine）

实现语言的解析与执行机制，例如 V8、SpiderMonkey。

3. 运行环境（Runtime）

组织语言引擎，并提供程序运行所需要的额外 API 和基础设施，例如 Node.js。

4. 操作系统（Operating System）

管理计算机的硬件和系统资源，并通过系统调用向用户程序提供文件、网络、进程等能力，例如 Linux。

以 Node.js 为例，整体关系可以简化为：

JavaScript 源代码 → Node.js 运行环境 → V8 执行 JavaScript → Node.js 原生组件调用系统接口 → Linux 内核 → 硬件资源

需要强调的是，普通 JavaScript 运算由 V8 执行，并不需要每一步都经过操作系统。只有在进行文件、网络等操作时，才会通过相关运行时组件使用操作系统提供的能力。

七、总结

JavaScript 从一门主要服务于浏览器的脚本语言，逐渐发展为应用广泛的通用编程语言，其根本原因并不是语言语法发生了颠覆性变化，而是围绕它建立的执行引擎、运行环境、开发框架和生态系统不断成熟。

V8 等引擎解决了 JavaScript 的高效执行问题；Node.js 等运行环境扩展了 JavaScript 使用操作系统能力的范围；TypeScript 则通过静态类型系统改善了大型项目的开发体验。

编程语言定义程序能够表达什么，引擎负责实现语言的执行机制，运行环境决定程序可以方便地使用哪些外部能力，而操作系统提供底层资源与服务。

理解这几个层次之间的关系，比单纯记住某种语言能够开发哪些应用更加重要。

---