TypeScript is gaining popularity in the JavaScript ecosystem. Package authors may choose TypeScript over JavaScript to automatically create type definitions. These type definitions will then be exported with the package and be available when importing the package in another project.

This tutorial shows you how to export the transpiled TypeScript code in your Node.js package when publishing them in registries like NPM.

TypeScript Series Overview

Step 1: Folder Structure in a Sample “Queue” Package

Imagine a queue package providing your package’s folder structure. You may have a src directory containing the TypeScript files. You also need a package.json file outlining the package details and dependencies.

Sample Package Folder Structure

dist  
  index.js // transpiled from index.ts
  queue.js // transpiled from queue.ts
src/  
  index.ts
  queue.ts
package.json  
README.md  
tsconfig.json  

The sample folder structure of your queue package assumes you’re using a dist folder for the transpilation output. The dist folder contains the JavaScript files with the actual code and type definitions side by side.

Step 2: Export Transpiled Code

When releasing your package, you can point the main and types properties in your package.json to your dist folder.

The npm CLI and Node.js will then know where to find the entry points for imports of your code and type definitions. You may also set the files property to the dist directory.

package.json

{
  "name": "your-package",
  "description": "…",
  "version": "1.0.0",

  "main": "dist",
  "types": "dist",
  "files": [
    "dist"
  ],
}

If you’re also writing your tests in TypeScript, the final JavaScript locates in the dist/src folder. In such cases, you must point the main and types properties to dist/src instead of dist.

The files property tells the package manager (typically the npm or yarn CLI) to include only the listed directories and files in the released package. Well, the final package will also include some metafiles, like the package.json or README.md.

You can create a local release package before publishing it to the registry to see what your release package looks like.

That’s it! Point the main and types properties in your package.json to TypeScript’s output directory and the platform knows where to find your files!

---

Mentioned Resources

• Create a local NPM release package tutorial on Future Studio