Adding custom typescript 3 definitions into your local project

Sometimes the @types package for an npm module you're using isn't up to scratch for some reason. Maybe you're waiting for a pull request to be merged, or you simply don't like the one that's up there. I was trying to figure out what the easy way of adding module definitions into your local project is.

Lots of examples out there on the internet have you use the declare module "xxx" syntax, but this doesn't allow you to reference relative files, so you can't just copy-paste from many @types packages.

After a bit of trial and error, I found this github issue which succinctly describes how to do exactly what I was after: https://github.com/Microsoft/TypeScript/issues/20421

  1. npm remove @types/module-name
  2. Create typings/module-name/index.d.ts
  3. Populate the type defintion file with what you want, no need for a module wrapper
  4. Configure the baseUrl and paths options in compilerOptions to add typings/* as a second lookup location.
  5. Success!

Shortly after writing this I stumbled across a blog post titled Maintaining overridden type definitions for a dependency with TypeScript which covers the same topic, I'm linking to it here in the hope that this helps improve the search result rankings for either of us.