如何在 Deno 中提取类型

Question

我正在查看 Deno，发现其中一个入门示例非常优雅：

import { serve } from "https://deno.land/x/std@v0.2.10/http/server.ts";
const s = serve("0.0.0.0:8000");

void async function main() {
  for await (const req of s) {
     req.respond({ body: new TextEncoder().encode("Hello World\n") });
  }
}()

我正在使用 VS Code 编写 Deno 脚本，但我不确定如何让编辑器知道导入函数的类型，例如 serve。我认为 Deno 支持 IDE 可能为时过早，但如果有解决方案或变通方法，我想知道。

我需要安装@types 软件包或类似的东西吗？ import 或 reference 一些 .d.ts 声明文件？在此示例中使用 serve 函数以及一般在 Deno 中导入的任何脚本时，如何让 VS Code 提供代码补全建议和显示类型注释？

Answer 1

tldr

安装denoland.vscode-deno 扩展¹。然后enableDeno 在特定项目中，比如

<proj-root>/.vscode/settings.json:

{
  "deno.enable": true, // enables extension
  "deno.lint": true, // inline deno lint diagnostics, requires `deno.unstable`
  "deno.unstable": true // also provides unstable type declarations in VS Code
}

从v2.3.0开始，也可以使用deno: Init向导²：

要集成 TS 工作区版本而不是 VS Code 内置版本，请查看linked docs。

¹_{This one 已弃用。}
²_{注意：在新的空项目中，至少有一个来源文件需要存在，向导才能正常工作。}

---

更多详情

扩展有什么作用？

• 在 VS Code 中允许显式的 .ts 扩展
• 解析 URL 导入说明符，例如 "https://deno.land/std@0.56.0/http/server.ts"
• 集成 Deno 运行时类型（例如 Deno.writeFile）

如何解析.ts 模块的类型

使用上述扩展名，VS Code 允许 .ts 文件扩展名用于导入并将 URL 导入解析为 local disk cache。编译器可以使用这些缓存的类型定义进行检查。最后，获取所有源并重新启动 TS 服务器/重新加载 VS Code：

deno cache https://deno.land/std/http/server.ts # fetch and compile from URL 
# or main project file
deno cache <your main file>.ts # fetches all its dependencies

server.ts 是Standard Library 的一部分，它只是一个更严格维护的远程.ts 模块集合，因此它也将被正确输入。

如何解析.js 模块的类型

Deno 提供 additional ways 以引用 .d.ts 文件以获取 .js 文件。

在导入代码位置指定类型定义：

// @deno-types="./foo.d.ts"
import * as foo from "./foo.js";

在主机代码位置指定类型定义：

/// <reference types="./foo.d.ts" />
export const foo = "foo";

替代方案：Deno 可以从远程导入中读取自定义的 X-TypeScript-Types HTTP 标头。

如何使用自定义tsconfig.json

项目中给定的tsconfig.json 文件与 Deno 默认配置合并，例如：

{
  "compilerOptions": {
    // set a custom, deviant value
    "noImplicitAny": false // deno default is true
    // (this is just an example - use strong types, whenever possible)
  }
}

包括 -c 选项，因此 VS Code 和 Deno CLI 具有相同的编译器设置：

deno run -c ./tsconfig.json main.ts 

如何使用--unstable类型

最简单的选择是在settings.json 中设置"deno.unstable": true (PR) 并重新启动VS Code，参见tldr 部分。

手动替代

cd <your-project>
deno types --unstable > deno.runtime.d.ts
touch tsconfig.json # (1); jsconfig.json for JS projects also possible

VS Code automatically includes deno.runtime.d.ts 与现有的tsconfig.json (1)。

---

重大变化

vscode-denov1.26.0

扩展名需要在项目的.vscode/settings.json中"deno.enable": true为explicitly enabled（默认为false）。之前，默认值为true。

vscode-deno

在每种情况下（稳定和不稳定）都安装 Deno 类型 - 请参阅 "How to use --unstable types"。

Answer 2

更新：vscode-deno 运行良好。

以下是当前的解决方案：

1. 将https://github.com/kitsonk/deno_ls_plugin 添加到您的工作区。编辑您的tsconfig.json 并将http 和https 导入的路径替换为远程依赖项的本地缓存位置（通常在$HOME/.deno/deps/http 和$HOME/.deno/deps/https 下）
2. 创建一个typings/ 文件夹。运行deno --types > typings/deno.d.ts。 Deno 会为核心 API 输出一个类型定义文件。
3. 现在问题变成了 VS Code 在导入时不知道如何获取远程依赖项。为了解决这个问题，一旦你添加了一个新的远程import，运行deno --prefetch your_file.ts 来拉下所有的依赖。为了使事情更简单，我建议将所有远程依赖项保存在单个文件 deps.ts 中（并在此文件上运行 --prefetch）并重新导出内容，以便项目中的其他文件可以使用 deps。