How to pull typings in Deno

Question

I am checking out Deno and have found one of the starter examples very elegant:

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") });
  }
}()

I am using VS Code to author Deno scripts, but I am not sure how I can make the editor aware of typings for the imported functions, such as serve. I think it may be too soon for IDE support with Deno, but in case there is a solution or a workaround, I'd like to know about it.

Do I need to install a @types package or something like that? import or reference some .d.ts declaration files? How do I make VS Code offer code completion suggestions and display type annotations when using the serve function in this example and any imported scripts in Deno in general?

Answer 1

tldr

Install denoland.vscode-deno extension ¹. Then enable Deno in a particular project, like

<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
}

Starting with v2.3.0, you can also use the deno: Init wizard ²:

To integrate a TS workspace version instead of VS Code built-in one, take a look at linked docs.

¹ _{This one is deprecated.}
² _{Note: In a new empty project, at least one source file needs to exist before the wizard works properly.}

---

More details

What does the extension do?

• permits explicit .ts extensions in VS Code
• resolves URL import specifiers like "https://deno.land/std@0.56.0/http/server.ts"
• integrates Deno runtime types (e.g. Deno.writeFile)

How to resolve types for .ts modules

With above extension, VS Code permits .ts file extensions for imports and resolves URL imports to a local disk cache. The compiler can use these cached type definitions to do checks. Last, fetch all sources and restart TS server / reload 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 is part of the Standard Library, which is just a more strictly maintained collection of remote .ts modules, so it also will be typed correctly.

How to resolve types for .js modules

Deno provides additional ways to reference .d.ts files for .js files.

Specify type definition at import code location:

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

Specify type definition at host code location:

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

Alternative: Deno can read a custom X-TypeScript-Types HTTP header from remote imports.

How to use a custom tsconfig.json

A given tsconfig.json file in a project is merged with the Deno default config, e.g.:

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

Include -c option, so VS Code and Deno CLI have the same compiler settings:

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

How to use --unstable types

The easiest option is to set "deno.unstable": true (PR) in settings.json and restart VS Code, see the tldr section.

Manual alternative

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 with an existent tsconfig.json (1).

---

Breaking Changes

vscode-deno v1.26.0

The extension needs to be explicitly enabled by "deno.enable": true in .vscode/settings.json of the project (default is false). Before, the default had been true.

vscode-deno < 1.25.0

Install Deno types in every case (stable and unstable) - see "How to use --unstable types".