Jox•9mo ago

How do I get a d.ts file to be used?

I'm extending a type from hono by adding that code in a hono.d.ts file in my src folder.

declare module "hono" {
  interface ContextVariableMap {
    someNewProperty: string;
  }
}

declare module "hono" {
  interface ContextVariableMap {
    someNewProperty: string;
  }
}

But TypeScript still doesn't know about the new property so obviously I'm doing something wrong. What steps am I missing or what am I missunderstanding when it comes to extending a type for a third party library? Does the module name have to match something in the import maps of deno.json? Any help would be much appreciated.

4 Replies

Deno AI Helper•9mo ago

Based on the documentation, there are several ways to provide types when importing a module in Deno. If you have a JavaScript module and you have created a .d.ts file for it, you can instruct Deno to use that file when type checking instead of the JavaScript file using the @deno-types compiler hint. This needs to be a single line double slash comment, which impacts the next import or re-export statement. Here's an example:

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

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

In this case, when type checking coolLib and your usage of it in the file, the coolLib.d.ts types will be used instead of looking at the JavaScript file. If you are in control of the source code of the module, or you are in control of how the file is hosted on a web server, there are two ways to inform Deno of the types for a given module, without requiring the importer to do anything special. 1. Using the triple-slash reference directive: Deno supports using the triple-slash reference types directive, which adopts the reference comment used by TypeScript in TypeScript files to include other files and applies it only to JavaScript files. Here's an example:

/// <reference types="./coolLib.d.ts" />

/// <reference types="./coolLib.d.ts" />

2. Using X-TypeScript-Types header: Deno supports a header for remote modules that instructs Deno where to locate the types for a given module. For example, a response for https://example.com/coolLib.js might look something like this:

HTTP/1.1 200 OK
Content-Type: application/javascript; charset=UTF-8
Content-Length: 648
X-TypeScript-Types: ./coolLib.d.ts

HTTP/1.1 200 OK
Content-Type: application/javascript; charset=UTF-8
Content-Length: 648
X-TypeScript-Types: ./coolLib.d.ts

When seeing this header, Deno would attempt to retrieve https://example.com/coolLib.d.ts and use that when type checking the original module. In your case, you

Deno AI Helper•9mo ago

might want to use the @deno-types compiler hint or the triple-slash reference directive to point to your hono.d.ts file. The module name in the declare module statement should match the string you use when importing the module in your code. The import maps in deno.json are used to map import URLs to other URLs or file paths, so they might not be directly related to

Jox•9mo ago

I'm not sure the suggestions are helpful to my scenario. Considering that in my deno.json I'm importing "hono/": "https://deno.land/x/hono@v3.10.0/", and the interface I want to extend lives in https://deno.land/x/hono@v3.10.0/context.ts, I'm not sure 1) what the name in declare module should be? 2) if a reference directive is needed?

Doctor 🤖•9mo ago

Can't you just put this code in your main.ts file?