35

I've got an npm package with badly written, out of date typings. I've written my own typings and now I'm wondering if I can somehow exclude the original typings from the npm package. It's not a simple extension of interfaces, the originals are basically garbage at this point.

Using the exclude list in tsconfig.json does not work for this purpose of course, since it still loads files from node_modules even if you exclude that folder.

3
  • 1
    You can try to use paths in tsconfig.json to override typings for any module as described in this answer
    – artem
    Jan 13, 2017 at 8:10
  • 2
    That's the correct answer. I didn't find that question using google, because I tried all sorts of wordings, but apparently not that one. Jan 13, 2017 at 13:43
  • 1
    Feel free to add it as an answer and I'll accept it Jan 13, 2017 at 13:43

3 Answers 3

29

Create node_modules folder under your src, then put typings of module(s) you want to overwrite inside:

├── node_modules
│   └── ...
│
└── src
    ├── index.ts
    ├── ... your codes ...
    │
    └── node_modules
        └── <module-to-be-overwritten>
            └── index.d.ts

No need to modify compilerOptions in tsconfig.json.

Read How TypeScript resolves modules section in https://www.typescriptlang.org/docs/handbook/module-resolution.html.

1
  • 2
    This doesn't work for every case -- for example, mst-decorators@2.1.1 (that exact version) -- but works for most. I prefer the paths approach more though, as it works for every case, and doesn't require creating fake/override directories. (I'd rather add one line to tsconfig.json than create two new folders and a file that are mere stubs -- to each their own, though)
    – Venryx
    Nov 15, 2019 at 8:54
27

You can get the desired behavior with the paths option in the tsConfig It could look something like this:

{
    "compilerOptions": {
       ...
        "paths": {
            "*": [
                "src/*",
                "declarations/*"
            ]
        }
    },
    ...
}

With this config typescript looks for modules in src (there should be all the app source) and also in declarations, in the declarations folder I usually place my extra needed declarations.

To override the typings of a node module there are two options:

  1. place a folder named like the module inside the declarations folder, containing a file called index.d.ts for the typings

  2. place a declaration file, named like the module, inside the declarations folder

As a working example you can take a look at this repo https://github.com/kaoDev/react-ts-sample

An important hint by Bernhard Koenig:

The order of the paths matters. I had to put the path with my overrides before the path with the original type definitions so my overrides get picked up first. – Bernhard Koenig

3
  • Not working for nats-hemera npm module, could you check? Apr 26, 2018 at 13:55
  • 4
    The order of the paths matters. I had to put the path with my overrides before the path with the original type definitions so my overrides get picked up first. Jun 16, 2018 at 23:28
  • 1
    Careful with two things, with paths overriding: 1) The right-hand "target" for the path redirect is relative to the baseUrl. If set wrong, it may silently fail (or work for some but not others depending on the way the d.ts file was referenced). 2) Even if set correctly, some cases require that you add an empty declare module "my-module"; declaration somewhere in your project *.d.ts files. Example requiring both fixes above: mst-decorators@2.1.1 (that exact version)
    – Venryx
    Nov 15, 2019 at 8:52
0

I would recommend using patch-package (https://www.npmjs.com/package/patch-package) for this.

Here's the technical procedure:

  1. Delete the index.d.ts file located in node_modules/{library}/index.d.ts.
  2. Install patch-package by running npm i patch-package.
  3. In your package.json file, add the following script under the "scripts" section:
"scripts": {
  "postinstall": "patch-package"
}
  1. Run the following command to create a patch for the package you want to modify:
npx patch-package package-name

This approach allows you to make specific modifications to a package's code and maintain those changes using patch-package.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.