vite-plugin-dts

What is vite-plugin-dts?

vite-plugin-dts is a Vite plugin that generates TypeScript declaration files (d.ts) for your project. It helps in ensuring type safety and better developer experience by providing type definitions for your code.

What are vite-plugin-dts's main functionalities?

Generate TypeScript Declarations

This feature allows you to automatically generate TypeScript declaration files for your project. By including the plugin in your Vite configuration, it will generate .d.ts files for your TypeScript code.

import dts from 'vite-plugin-dts';

export default {
  plugins: [dts()]
};

Custom Output Directory

You can specify a custom output directory for the generated declaration files. This is useful if you want to organize your type definitions in a specific folder.

import dts from 'vite-plugin-dts';

export default {
  plugins: [
    dts({
      outputDir: 'types'
    })
  ]
};

Include/Exclude Specific Files

This feature allows you to include or exclude specific files or folders from the declaration generation process. You can use glob patterns to specify the files to include or exclude.

import dts from 'vite-plugin-dts';

export default {
  plugins: [
    dts({
      include: ['src/**/*.ts'],
      exclude: ['src/excluded-folder/**']
    })
  ]
};

Other packages similar to vite-plugin-dts

tsc

The TypeScript compiler (tsc) can be used to generate declaration files. It is a more general tool compared to vite-plugin-dts and can be used in any TypeScript project, not just those using Vite. However, it requires more configuration and does not integrate as seamlessly with Vite.

rollup-plugin-dts

rollup-plugin-dts is a Rollup plugin that generates TypeScript declaration files. It is similar to vite-plugin-dts but is designed for use with Rollup instead of Vite. If you are using Rollup as your bundler, this plugin would be a better fit.

README

vite-plugin-dts

(Do not recommend anymore, please use unplugin-dts instead)

Install

pnpm i -D vite-plugin-dts

Usage

In vite.config.ts:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      formats: ['es'],
      fileName: 'my-lib'
    }
  },
  plugins: [dts()]
})

By default, the generated declaration files are following the source structure.

Fortunately, with the help of API Extractor, the plugin can bundle all types into a single file. You just need to install @microsoft/api-extractor and set bundleTypes: true:

{
  plugins: [dts({ bundleTypes: true })]
}

If you start with official Vite template, you should specify the tsconfigPath:

{
  plugins: [dts({ tsconfigPath: './tsconfig.app.json' })]
}

Example

A real project using this plugin: Vexip UI.

License

MIT License.