新消息:Node.js 终于内置 TypeScript 支持

令人兴奋的消息!Node.js 终于迎来了原生的 TypeScript 支持!

是的,现在你可以在 Node.js 中直接使用 TypeScript 类型了。

看来我可以把 typescriptts-node 扔进垃圾桶了。

❌ 在此之前:

Node.js 只支持 JavaScript 文件。

像下面这样的代码根本无法运行:

30a38d0e52cea6e0b74667b317080176.png

尝试运行时,你会得到一个令人不悦的错误提示:

196e04b63bdf318161a3de60443a1197.png

我们以前的最佳选择是安装 TypeScript 并使用 tsc 进行编译。

32c5c313f6c4b8c00378002b76bbc1e1.png

数百万开发者认为这已经是一个不错的选择:

ecafc9207d2b68400a5ba56da2c647c3.png

但这很麻烦——每次都要安装相同的旧包,并反复输入相同的命令。

额外的编译步骤、处理 TypeScript 配置等问题都很令人沮丧,特别是当我们只是想做一些测试时。

正因如此,ts-node 出现了,试图解决这些问题——但它仍然不够完美。

我们可以直接运行 TypeScript 文件了:

44fb1ff1acdddcdec052119583b1ac74.png

甚至可以像使用 node 命令一样随时启动交互式会话:

b21433eb54953de87b5eca501ce42154.png

每个人都很喜欢它:

2e114da1a0d40d4c65d47aefa565b6a0.png

但它仍然是一个额外的依赖项,而且我们仍然需要安装 TypeScript。

我们还必须注意一些更细微的复杂性,比如如何使用 ts-node 处理 ES 模块时的 --esm 标志。

✅ 现在:

随着 Node.js 的全新升级,这一切都改变了:

  • 原生内置 TypeScript 支持。

  • 无需依赖任何额外的包。

  • 无需中间文件和模块配置。

347c2899beee0e774018b2ab91121249.png

现在,像 Prettier、Next.js 和 Webpack 这样的我们喜爱的 JS 工具可以拥有更安全和更具智能提示的配置文件。

好吧,几乎没有人会把 Webpack 列入他们最喜爱的工具列表,但不管怎样……

看看已经有类似的 Pull Request 来支持 Prettier 的 prettier.config.ts 了——这要归功于这一新发展,他们将迈出更大的步伐。

背后的工作原理是什么?

对 TypeScript 的支持将是渐进的,所以目前它只支持类型——你还不能使用像枚举这样的更典型的 TypeScript 特性(不过谁现在还用枚举呢)。

它使用 @swc/wasm-typescript 工具在内部去除 TypeScript 文件中的所有类型。

所以这段代码:

b3f922f04fef9b1a9247a9ee571dd312.png

会被转换成这样:

b7a16451e8a468fb5eef212b1aeee2f4.png

如何在 Node.js 中开始使用 TypeScript

正如我之前提到的,这是一个早期的开始,所以它仍然是实验性的,目前你需要使用 --experimental-strip-types 标志:

node --experimental-strip-types index.ts

这将在即将发布的版本中得到支持。

最后的想法

内置 TypeScript 是一个重大的举措,使得 Node.js 成为 JavaScript 开发者更加愉快的平台。我肯定会使用这个功能。

尽管支持还不如 Bun 或 Deno 那样无缝,但它对整个 JavaScript 生态系统产生了深远的影响,因为 Node 仍然是目前最受欢迎的 JS 后端框架。

最后:

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以使用 TypedArray 类型来模拟 Node.js 中的 Buffer 类型,TypedArray 是一个内置的类型数组,在 TypeScript 中可以直接使用。同时,需要使用一些浏览器特定的 API 来实现 TypedArray 与 Buffer 类型之间的互转。 以下是一个示例代码,展示如何使用 TypedArray 实现一个类似于 Node.js 中 Buffer 的类型: ```typescript class Buffer { private bytes: Uint8Array; constructor(sizeOrArray: number | Uint8Array) { if (typeof sizeOrArray === 'number') { this.bytes = new Uint8Array(sizeOrArray); } else { this.bytes = sizeOrArray; } } static from(value: string, encoding: string = 'utf-8'): Buffer { const encoder = new TextEncoder(); const bytes = encoder.encode(value); return new Buffer(bytes); } toString(encoding: string = 'utf-8'): string { const decoder = new TextDecoder(encoding); return decoder.decode(this.bytes); } static isBuffer(obj: any): obj is Buffer { return obj instanceof Buffer; } slice(start?: number, end?: number): Buffer { return new Buffer(this.bytes.subarray(start, end)); } // 其他方法... // 将 TypedArray 转换为 Buffer static fromTypedArray(typedArray: TypedArray): Buffer { return new Buffer(new Uint8Array(typedArray.buffer, typedArray.byteOffset, typedArray.byteLength)); } // 将 Buffer 转换为 TypedArray toTypedArray(): TypedArray { return new Uint8Array(this.bytes.buffer, this.bytes.byteOffset, this.bytes.byteLength); } } ``` 需要注意的是,由于不同浏览器对 TypedArray 的支持程度不同,一些 API 的实现和行为可能会有所不同,需要根据具体情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@大迁世界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值