DTS#

This chapter introduces what TypeScript Declaration Files (DTS) are and how to generate DTS files in Rslib.

What is DTS#

TypeScript Declaration Files (DTS) provide type information for JavaScript code. DTS files typically have a .d.ts extension. They allow the TypeScript compiler to understand the type structure of JavaScript code, enabling features like:

1. Type Checking: Provide type information for JavaScript code, helping developers catch potential type errors at compile time.
2. Code Completion: Enhance code editor features like autocomplete and code navigation.
3. Documentation Generation: Generate documentation for JavaScript code, providing better developer experience.
4. IDE Support: Improve the developer experience in IDEs like Visual Studio Code, WebStorm, and others.
5. Library Consumption: Make it easier for other developers to use and understand your library.

What are Bundle DTS and Bundleless DTS#

Bundle DTS#

Bundle DTS involves bundling multiple TypeScript declaration files into a single declaration file.

• Pros:

  • Simplified Management: Simplifies the management and referencing of type files.
  • Easy Distribution: Reduces the number of files users need to handle when using the library.

• Cons:

  • Complex Generation: Generating and maintaining a single bundle file can become complex in large projects.
  • Debugging Challenges: Debugging type issues may not be as intuitive as with separate files.

Bundleless DTS#

Bundleless DTS involves generating a separate declaration file for each module in the library, just like tsc does.

• Pros:

  • Modular: Each module has its own type definitions, making maintenance and debugging easier.
  • Flexibility: Suitable for large projects, avoiding the complexity of a single file.

• Cons:

  • Multiple Files: Users may need to handle multiple declaration files when using the library.
  • Complex Management: May require additional configuration to correctly reference all files.

How to Generate DTS in Rslib#

Rslib defaults to generating bundleless DTS, which using TypeScript Compiler API and bundle DTS is also supported by API Extractor.

If you want to generate bundleless DTS, you can:

• Set dts: true or dts: { bundle: false } in the Rslib configuration file.

If you want to generate bundle DTS, you can:

1. Install @microsoft/api-extractor as a development dependency, which is the underlying tool used for bundling DTS files.

npm add @microsoft/api-extractor -D

2. Set dts: { bundle: true } in the Rslib configuration file.