🌟 ECMAScript 与 TypeScript 知识大纲对照表

ECMAScript (JavaScript) 和 TypeScript 是现代前端开发，特别是 React 应用开发的基石,下面这个表格汇总了 ECMAScript (JavaScript) 和 TypeScript 的核心语法特性及其在 React 开发中的常见应用场景，帮助你直观地理解它们的异同。

语法特性ECMAScript (JavaScript) 表现TypeScript 表现在 React 中的典型应用场景
变量声明var, let, const同 ES，但可添加类型注解：let count: number = 42; const message: string = "Hello";声明组件状态、Props、普通变量等。const [count, setCount] = useState(0); (TS 中需提供泛型参数)
基础数据类型number, string, boolean, null, undefined, symbol, bigint包含所有 ES 类型，并扩展 any, unknown, void, never, 枚举 (enum)定义组件 Props 和 State 的类型。
函数函数声明、函数表达式、箭头函数、默认参数、剩余参数同 ES，但可为参数和返回值添加类型注解，支持函数重载、泛型函数组件函数、事件处理函数、自定义 Hooks。
面向对象编程构造函数、原型链、ES6 class (constructor, 方法, extends, super)同 ES class，增加 public/private/protected 访问修饰符、抽象类 (abstract class)、接口 (interface)定义 Class 组件、复杂的业务模型、工具类。
模块化ES Module (import/export)语法同 ES，但可对导入导出内容附加类型信息组件、工具函数、类型定义、配置文件等的导入导出。
异步编程Promise, async/await同 ES，Promise 可指定泛型类型 Promise<User>，async 函数返回 Promise<T>数据请求、副作用操作、异步状态更新。
解构赋值对象解构、数组解构同 ES，类型信息会流到解构出的变量上从 props 对象中提取值，从数组或状态中提取元素。const { title, onClick } = props;
数组与方法数组字面量 [], map, filter, reduce, find, includes, flat 等同 ES，数组可定义元素类型：number[], Array<string>，方法调用时有类型提示渲染列表 (map)，状态更新（过滤、合并数组）。
对象与方法对象字面量 {}, 属性简写, 计算属性名, Object.keys(), Object.entries() 等同 ES，可通过接口 (interface) 或类型别名 (type) 定义对象形状定义组件 Props、State、配置对象、从接口返回的 JSON 数据。
泛型无此概念泛型函数、泛型接口、泛型类 <T>，提供了强大的类型抽象能力React 组件泛型 Props、自定义 Hooks 泛型、通用工具函数。const [list, setList] = useState<string[]>([]);
类型别名/接口无此概念interface 定义对象形状或契约，type 定义类型别名，支持联合类型、交叉类型等定义复杂的 Props 类型、API 响应数据类型、组件共享的通用类型。
元组无真正元组，可用数组模拟[string, number] 固定长度和类型的数组useState 的返回值类型就是一个元组 [S, Dispatch<SetStateAction<S>>]。
编译与类型检查无需编译，可直接在浏览器或 Node.js 中运行，无静态类型检查需用 tsc (tsconfig.json) 或 babel 编译为 JS，编译阶段进行严格的类型检查在编译阶段提前发现潜在的类型错误，提高代码健壮性。

💡 学习路径与在 React 中的应用建议

  1. 先掌握 ECMAScript：TypeScript 是 JavaScript 的超集，因此扎实的 ES 基础是学习 TS 的前提。尤其要熟悉 ES6+ 的新特性，如箭头函数、解构赋值、模块化、Promise 和 async/await，这些在现代 React 开发中无处不在。
  2. 理解 TypeScript 的核心：TypeScript 带来的主要价值是静态类型系统。先从为变量、函数参数和返回值添加基础类型注解开始，然后逐步学习接口、泛型等高级类型概念。
  3. 在 React 中实践：
    • 函数组件：使用接口或类型别名来定义组件的 Props。
    • Hooks：
      • useState：可通过泛型参数指定状态类型，如 useState<string>('')。
      • useEffect、useCallback、useMemo：TS 通常能自动推断类型。
      • 自定义 Hook：同样可以使用泛型来创建灵活的可复用逻辑。
    • 事件处理：使用 React 提供的类型，如 React.MouseEvent<HTMLButtonElement>。
  4. 工具与配置：
    • 在 Node 环境中，你需要 ts-node 或编译步骤来运行 TS 代码。
    • 对于 React 项目，通常使用 create-react-app with --template typescript 或配置 Vite + Vue 等构建工具的 TypeScript 插件。
    • 一个良好的 tsconfig.json 是必须的，确保开启了严格模式 ("strict": true)。

🧰 如何选择 ECMAScript 还是 TypeScript

方面ECMAScript (JavaScript)TypeScript
学习曲线相对平缓，易于上手初期需理解类型概念，有一定学习成本
开发效率 (初期/小型项目)高，无需类型定义，直接运行相对较低，需编写类型代码
开发效率 (长期/大型项目)较低，动态类型导致难以维护，需频繁手动调试高，类型提示和检查减少错误，重构更安全
维护性较差，尤其多人协作时优秀，类型即文档，代码更健壮
适用场景小型项目、快速原型、学习初期中大型项目、复杂应用、团队协作、长期维护

建议：对于新开始的、具有一定规模或未来可能增长的 React 项目，强烈推荐使用 TypeScript。它能极大地提升开发体验和代码质量。对于简单的脚本或快速验证想法的原型，可以直接使用 JavaScript。

希望这份对照表和应用建议能帮助你在 Node 和 React 的框架下更好地理解和教授这两种语法！

# ecmascript # typescript # 前端
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局