Generate TypeScript Declaration Files for JavaScript Files
H. Kamran
Posted on May 9, 2022
I've been moving a few utilities that I use in multiple projects to npm libraries. But I needed an easy, reliable way to generate TypeScript declarations, since I primarily use TypeScript.
Open your project and ensure you have a
package.json
-
Install the
typescript
library as a development dependency
- With
pnpm
:pnpm i -D typescript
- With
npm
:npm i -D typescript
- With
yarn
:yarn add typescript -D
- With
-
Add JSDoc tags to your functions, variables, classes, etc.
For example, here's a snippet from one of my utilities:
/** * Apply classes that result in a true condition * @param {string[]} classes * @returns A list of classes * * @example * classNames("block truncate", selected ? "font-medium" : "font-normal") */ export const classNames = (...classes) => { return classes.filter(Boolean).join(" "); };
-
Add the
prepare
script (or whichever one you want to use) to thescripts
object inpackage.json
For example, mine looks like this:
"scripts": { "prepare": "tsc --declaration --emitDeclarationOnly --allowJs index.js" },
This command runs
tsc
, the TypeScript compiler, and tells it to only generate.d.ts
files (declaration files). Be sure to replaceindex.js
with your JavaScript files.The
prepare
script runs before a npm package is packed (typically withnpm publish
ornpm pack
, or the equivalents with other package managers). -
Run your npm script
- With
pnpm
:pnpm prepare
orpnpm run prepare
- With
npm
:npm run prepare
- With
yarn
:yarn run prepare
- With
Using the classNames
function above, the TypeScript compiler generated the following declaration:
export function classNames(...classes: string[]): string;
If you have any questions, send a tweet my way. I hope that this guide comes in handy for you, thanks for reading!
Posted on May 9, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
January 29, 2024
August 18, 2022