Include external type definitions in compilation output

Question

I am writing a library in TypeScript: @cjol/core. It has a JavaScript dependency dep, which does not have an @types package available. Instead, I have written a custom dep.d.ts file, which makes all the typings work nicely as I develop the library. Everything compiles fine but my dep.d.ts does not appear anywhere in the output.

When I try to include my library in another client project @cjol/client, the client project will not compile. I get an error like this one:

../core/build/index.d.ts:2:24 - error TS7016: Could not find a declaration file for module 'dep'. '/home/cjol/.../dep/index.js' implicitly has an 'any' type.
  Try `npm install @types/dep` if it exists or add a new declaration (.d.ts) file containing `declare module 'dep';`

2 > import { Foo } from "dep";

I am also using Yarn workspaces (@cjol/core and @cjol/client are both packages in the same workspace, under ./core and ./client), but I don't think that's relevant here. I need @cjol/client to output my custom definition file, but I can't figure out how to make it happen!

Edit 1: Again, I'm not sure the details are relevant, but here's what index.d.ts looks like. As mentioned, it's been generated by TypeScript.

import { Stuff } from "a-typescript-library";
import { Foo } from "dep";

export * from "./my-app-types";

declare type APIResponse<T> = {
    /* ... */
};
export declare class API {
    /* ... */
}

Edit 2: Here's what dep.d.ts looks like:

declare module "dep" {
  import Something from "something.js";
  export class DepClass {
     /* loads of stuff */
  }
}

Edit 4: Perhaps another way of thinking about my question. If I have written a custom .d.ts file, how can I distribute it? Do I need to create a whole new package containing the type definition?

I'm not sure how much that will help, but I've added it now. — cjol, Jul 13 '18 at 08:02
Have done, but again - I don't think the details of these files are necessary. The point is that it isn't getting included in the compilation output, and I can't figure out why. — cjol, Jul 13 '18 at 08:18
I have same problem @cjol did you ever find a solution for this? I don't want to have to publish a separate package for one module declaration know this is an old issue. — kevzettler, Feb 09 '21 at 16:29
The closest i've found so far is https://stackoverflow.com/questions/54471450/exposing-external-module-typescript-declarations-to-consuming-modules which seems to be the same problem and suggests using a ```///``` comment. However, i'm not seeing it successfully include the referenced declaration in the output. — kevzettler, Feb 09 '21 at 17:17
Unfortunately not - it was a hobby project that I abandoned for other reasons. Still keen to find an answer if there is one out there! — cjol, Feb 10 '21 at 08:46

score 2 · Accepted Answer · answered Feb 11 '21 at 23:32

Unfortunately, typescript will not copy your custom *.d.ts files into your output. However, there are a couple ways you can get around this.

First, is to manually copy your custom *.d.ts files into your output directory after you have finished running tsc and ensuring the directory structure matches how it was in the src directory.

The other option is to rename the dep.d.ts file into a dep.ts file and include it in the module that needs the type.

File now called dep.ts

declare module "dep" {
  import Something from "something.js";
  export class DepClass {
     /* loads of stuff */
  }
}

Import dep.ts into the module that needs it.

import './types/dep';
import { Foo } from 'dep';

// Rest of your code here

score 0 · Answer 2 · answered Jul 13 '18 at 08:38

Ok I think I know whats going on here as I had this before. I bet you did not create your dep.d.ts in the baseUrl defined location of the project. Any modules declared in the base root will be picked up automatically by TypeScript, anything else needs to be mapped in the tsconfig.json. This property is called path - path-mapping.

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Example tsconfig.json if you add the paths property to this config file with the correct mapping information, it should resolve your issue.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "dep": ["src/typings/dep"] // That location is a example but you need to point that at where your dep.d.ts file is
    }
  }
}

Thanks for looking into this. I've given this a go, but I can't see that it's doing anything differently. If I examine the compilation output, I should be able to find `dep.d.ts` somewhere, shouldn't I? — cjol, Jul 13 '18 at 09:18

Include external type definitions in compilation output

2 Answers2

Linked