I am checking out Deno and have found one of the starter examples very elegant:
import { serve } from "https://deno.land/x/[email protected]/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?
At a high level, Deno converts TypeScript (as well as TSX and JSX) into JavaScript. It does this via a combination of the TypeScript compiler, which we build into Deno, and a Rust library called swc.
Deno is a simple, modern and secure runtime for JavaScript, TypeScript, and WebAssembly that uses V8 and is built in Rust. Provides web platform functionality and adopts web platform standards. Secure by default.
d. ts file is usually placed adjacent to the . ts file, it is providing the typings for. Although the ts compilers just match the files with the module names, by themselves even without placing them adjacent.
*. d. ts is the type definition files that allow to use existing JavaScript code in TypeScript. For example, we have a simple JavaScript function that calculates the sum of two numbers: // math.js.
Install denoland.vscode-deno
extension 1. 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 2:
To integrate a TS workspace version instead of VS Code built-in one, take a look at linked docs.
1This one is deprecated.
2Note: In a new empty project, at least one source file needs to exist before the wizard works properly.
.ts
extensions in VS Code"https://deno.land/[email protected]/http/server.ts"
Deno.writeFile
).ts
modulesWith 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.
.js
modulesDeno provides additional ways to reference .d.ts
files for .js
files.
// @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.
tsconfig.json
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
--unstable
typesThe easiest option is to set "deno.unstable": true
(PR) in settings.json
and restart VS Code, see the tldr
section.
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).
vscode-deno
v1.26.0The 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.0Install Deno types in every case (stable and unstable) - see "How to use --unstable types"
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With