TypeScript只是JavaScript的额外步骤?|现在不不这么认为了!🤔

1,645 阅读4分钟

前言

在还没学习TS之前,我对其的看法就是无非就是比JS多了一个静态类型,也没什么吧,不用特意去学TS。但当我正式去学习之后,我改变的我的想法!

TypeheroTypescriptGIF.gif

TypeScript到底是什么?

TypeScript 本质上是 JavaScript 的超集,添加了可选的静态类型。它编译为纯 JavaScript,这意味着浏览器和 Node.js 运行的是 JavaScript 输出,而不是 TypeScript 本身。

这样的框架导致了一个有趣的现象: image.png 在运行TS时会生成一个js文件,这些类型仅在编译时被完全删除了,仅在开发阶段存在。

// This TypeScript code
function add(a: number, b: number): number {
  return a + b;
}

// Becomes this JavaScript
function add(a, b) {
  return a + b;
}

为什么TS被认为是js的额外步骤?

证:

  • 1.编译步骤:TypeScript 需要构建过程,这增加了开发工作流程的复杂性
  • 2.类型定义:对于没有内置类型的第三方库,需要安装单独的@types/*
  • 3.配置开销:管理tsconfig.json100 多个选项
  • 4.学习曲线:理解高级类型概念,如泛型、条件类型和实用类型
  • 5.类型维护:随着代码的发展保持类型更新

还有就是在运行时实现,TS没有任何运行时优势,所以类型检查都发生在开发和编译阶段,而不是代码实际运行阶段。

类型错觉

TypeScript 创造了所谓的“类型错觉”——一种完全安全的感觉,但实际上却有无数的逃生舱:

// All of these break the type system
const danger1 = JSON.parse(someString) as SafeType;
const danger2 = someValue as any as SafeType;
const danger3: SafeType = Object.assign({}, someObject);

维护负担

TypeScript 代码库通常包含比同等 JavaScript 实现更多的代码行。这是因为:

  • 类型定义
  • 接口和类型声明
  • 泛型类型参数
  • 类型断言和保护

必须与实际功能一起维护、理解和调试这些附加代码。

开发人员体验权衡

TypeScript 提供了不可否认的开发人员体验优势:

  • 更好的自动完成功能
  • 内联文档
  • 早期错误检测
  • 更安全的重构

但这些好处是以复杂性、冗长性和开发开销为代价的。这种权衡值得吗?

“类型即文档”的迷思

支持者经常声称 TypeScript 是一种自文档化的代码。虽然类型确实提供了一些关于预期数据结构的信息,但它们往往无法捕捉:

  • 业务规则和不变量
  • 性能特征
  • 副作用
  • 错误条件
  • 使用模式

无论是否使用 TypeScript,适当的文档和测试仍然是必要的。

当“额外步骤”带来实际价值时

尽管受到批评,TypeScript 的额外步骤确实在特定情况下增加了显著的价值:

  1. 大型代码库:随着项目规模的扩大,类型信息变得越来越有价值
  2. 团队环境:类型在应用程序的不同部分之间创建契约
  3. 复杂的领域模型:使用类型建模复杂的业务规则可以防止逻辑错误
  4. 公共 API:类型为消费者提供清晰的接口

替代方法

对于那些不相信 TypeScript 的人来说,一些替代方案可以通过更少的“额外步骤”提供部分好处:

  • JSDoc 注释:利用 VS Code 的 JavaScript 类型推断,将类型信息添加为注释
  • PropTypes:React 组件的运行时类型检查
  • 运行时验证库:Zod、Joi 或 Yup 用于在运行时验证数据
  • 测试驱动开发:全面的测试可以发现 TypeScript 解决的许多问题。

结论

“TypeScript 只是增加了一些步骤的 JavaScript”这种说法在技术上是准确的,但却过于简化。真正的问题不在于 TypeScript 是否增加了步骤——它确实增加了——而是这些步骤在你的特定场景下是否提供了足够的价值来证明其成本是合理的。

TypeScript 不会使不可能的事情成为可能;它使困难的事情变得更容易,但代价是使简单的事情变得稍微复杂一些。

你的体验如何?你觉得 TypeScript 的额外步骤值得吗?还是更喜欢纯 JavaScript 的简洁?或许当你没有参与到一个足够大的项目时,你不会体会到TS的魅力!

TypescriptHeartGIF.gif