如何在 Deno 中提取类型

Tom*_*uer 12 typescript visual-studio-code deno

我正在查看 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") });
  }
}()
Run Code Online (Sandbox Code Playgroud)

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

我需要安装一个@types包或类似的东西吗?importreference一些.d.ts声明文件?在使用serve本示例中的函数以及 Deno 中的任何导入脚本时,如何让 VS Code 提供代码完成建议并显示类型注释?

for*_*d04 15

域名

安装denoland.vscode-deno扩展1。然后在特定项目中启用Deno,例如

<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
}
Run Code Online (Sandbox Code Playgroud)

v2.3.0开始,您还可以使用deno: Init向导2在此处输入图片说明

要集成 TS 工作区版本而不是 VS Code 内置版本,请查看链接的文档

1 这个已经过时了。
2 注意:在一个新的空项目中,向导必须至少存在一个源文件才能正常工作。


更多细节

扩展有什么作用?

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

如何解析.ts模块的类型

通过上述扩展,VS Code 允许.ts导入文件扩展名并将 URL 导入解析到本地磁盘缓存。编译器可以使用这些缓存的类型定义进行检查。最后,获取所有源并重新启动 TS 服务器/重新加载 VS Code:

{
  "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
}
Run Code Online (Sandbox Code Playgroud)

server.ts标准库的一部分,它只是一个更严格维护的远程.ts模块集合,因此它也将被正确键入。

如何解析.js模块的类型

Deno 提供了其他方法来引用.d.ts文件的.js文件。

在导入代码位置指定类型定义:
// @deno-types="./foo.d.ts"
import * as foo from "./foo.js";
Run Code Online (Sandbox Code Playgroud) 在主机代码位置指定类型定义:
/// <reference types="./foo.d.ts" />
export const foo = "foo";
Run Code Online (Sandbox Code Playgroud)

替代方案: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)
  }
}
Run Code Online (Sandbox Code Playgroud) Include-c选项,因此 VS Code 和 Deno CLI 具有相同的编译器设置:
deno run -c ./tsconfig.json main.ts 
Run Code Online (Sandbox Code Playgroud)

如何使用--unstable类型

最简单的选择是在VS Code 中设置"deno.unstable": true( PR )settings.json并重新启动,请参阅tldr参考资料。

手动替代

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
Run Code Online (Sandbox Code Playgroud)

VS Code自动包含 deno.runtime.d.ts一个已存在的tsconfig.json(1)。


重大变化

vscode-deno v1.26.0

扩展必须明确启用通过"deno.enable": true.vscode/settings.json项目(默认是false)。之前,默认值为true.

vscode-deno < 1.25.0

在每种情况下(稳定和不稳定)安装 Deno 类型 - 请参阅"How to use --unstable types".


Kev*_*ian 5

更新: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。