How to generate .d.ts files when using multiple targets

[captbaritone]

For my library I'm generating multiple targets based on different entrypoints. I'd like to include type information for each target in my published package. Is it possible to have Parcel generate .d.ts files for each target/bundle?

[devongovett]

The way types are generated is via a named pipeline called "types" which is automatically inferred from the types field in package.json. You can define a named pipeline for your own targets as well and use the same configuration. So if you have a target named "frontend-types", create a pipeline with the same name.

In a .parcelrc:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "frontend-types:*.{ts,tsx}": ["@parcel/transformer-typescript-types"]
  }
}

Note that you'll need a separate target for the types from the source code for this to work, just like you would have separate "main" and "types" targets in simple library projects.

Note: I am answering this on mobile and have not tested it. 🙂

[captbaritone]

Thanks for the quick reply. This works. One thing that took me a second to figure out was that I needed to give the target a filename (by creating a top level key in my package.json) that ended with .d.ts.

[Zertz]

The comments here put me on the right track but I had a poke around quite a bit to get it right. Here's a full example:

.parcelrc

{
    "extends": "@parcel/config-default",
    "bundler": "@parcel/bundler-library",
    "transformers": {
        "main-types:*.{ts,tsx}": [
            "@parcel/transformer-typescript-types"
        ]
    }
}

package.json

{
    "main": "dist/main.js",
    "main-types": "dist/main.d.ts",
    "css": "dist/main.css",
    "targets": {
        "main": {
            "source": "src/main.tsx"
        },
        "main-types": {
            "source": "src/main.tsx"
        },
        "css": {
            "source": "src/main.css"
        }
    }
}