جاوااسکریپت - چگونه میتوانم نوعها را به یک ساخت کتابخانه Vite اضافه کنم؟

من مستندات vite را برای استفاده از حالت کتابخانه دنبال کردم و توانستم یک کتابخانه مؤلفه عملی تولید کنم.
من پروژه را با پیشتنظیم vue-ts ایجاد کردم و در کامپوننت خود props را با نوعهای آنها تعریف کردهام و از برخی اینترفیسها استفاده کردهام. اما وقتی کتابخانه را ایجاد میکنم، هیچ نوعی شامل نمیشود.

چگونه میتوانم نوعها را برای نسخه نهایی اضافه کنم، یا به صورت خودکار از کامپوننتها استنتاج شود یا به صورت دستی با فایلهای تعریف؟

اطلاعات بیشتر در اینجا اطلاعات بیشتری در مورد فایلهای من آمده است:
tsconfig.json

{
  "name": "@mneelansh/test-lib",
  "private": false,
  "version": "0.0.2",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "emitDeclarationOnly": true, // testing
  "declaration": true, // testing
  "main": "./dist/lib.umd.js",
  "module": "./dist/lib.es.js",
  "types": "./dist/main.d.ts",
  "exports": {
    ".": {
      "import": "./dist/lib.es.js",
      "require": "./dist/lib.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
    "@types/node": "^17.0.25",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.5",
    "vue-tsc": "^0.34.7"
  }
}

من ویژگیهای emitDeclarationOnly و declaration را اضافه کردم اما فایدهای نداشت.

فایل vite.config.ts من:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const path = require("path");

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "Button",
      fileName: (format) => `lib.${format}.js`,
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
  plugins: [vue()],
});

پاسخ شماره ۱

شما میتوانید از vite-plugin-dts استفاده کنید

import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [
    dts({
      insertTypesEntry: true,
    }),
  ],

پاسخ شماره ۲

معمولاً در پروژههای vite و typescript شما نیاز دارید قبل از ساخت، بررسی نوع را اضافه کنید، زیرا vite بهصورت خودکار این کار را انجام نمیدهد. اینجا من همچنین از vite-plugin-dts همانطور که در پست Julien Kode آمده استفاده میکنم، و برای بررسی نوع از rollup-plugin-typescript2 استفاده میکنم.

در نهایت vite.config.js من:

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue2';
import dts from 'vite-plugin-dts';
import rollupTs from 'rollup-plugin-typescript2';

export default defineConfig({
    plugins: [
        Vue(),
        dts({ insertTypesEntry: true }),
        // only for type checking
        {
            ...rollupTs({
                check: true,
                tsconfig: './tsconfig.json',
                tsconfigOverride: {
                    noEmits: true,
                },
            }),
            // run before build
            enforce: 'pre',
        },
    ],
    build: {
        sourcemap: true,
        lib: {
            entry: './src/index.ts',
            fileName: 'index',
        },
        rollupOptions: {
            // make sure to externalize deps that shouldn't be bundled
            // into your library
            external: [
                'vue',
                'vue-class-component',
                'vue-property-decorator',
                'vuex',
                'vuex-class',
            ],
            output: {
                // Provide global variables to use in the UMD build
                // for externalized deps
                globals: {
                    vue: 'Vue',
                },
            },
        },
    },
});