Как добавить декларации (типизацию) в билд проекта?

1// пример импорта кнопки
2
3import { Button } from 'my-components-library'

1{
2  "compilerOptions": {
3    /* Visit https://aka.ms/tsconfig to read more about this file */
4
5    /* Language and Environment */
6    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
7    "jsx": "react-jsx",                                  /* Specify what JSX code is generated. */
8    "module": "commonjs",                                /* Specify what module code is generated. */
9     "resolveJsonModule": true,                        /* Enable importing .json files. */
10
11    /* Emit */
12     "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
13     "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
14     "outFile": "./dist/index.d.ts",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
15    /* Interop Constraints */
16    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
17    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
18
19    /* Type Checking */
20    "strict": true,                                      /* Enable all strict type-checking options. */
21    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
22  },
23  "include": [
24    "src/index.tsx"
25  ],
26  "exclude": ["node_modules"]
27}
28

1/// <reference types="react" />
2declare module "components/Button" {
3    import { ButtonHTMLAttributes } from "react";
4    type Props = {
5        isLoading?: boolean;
6        classNameToMerge?: string;
7        theme?: "athome" | "secondary" | "blue";
8    };
9    export type ButtonProps = Props & ButtonHTMLAttributes<HTMLButtonElement>;
10    export const Button: ({ theme, disabled, children, className, classNameToMerge, isLoading, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
11}
12declare module "index" {
13    import { Button } from "components/Button";
14    export { Button };
15}
16

1// we need this function only for changing declare module "index" to declare module "my-lib-components"
2// this way typescript understand for which module declaration in other repos
3
4const fs = require("fs");
5const path = require("path");
6
7const pathToDeclarationFile = path.join(__dirname, "dist", "index.d.ts");
8
9const replaceModuleDeclarationName = () => {
10  fs.readFile(pathToDeclarationFile, "utf8", (err, data) => {
11    if (err) {
12      console.error("Error reading the index.d.ts", err);
13      return;
14    }
15
16    // Replace the "index" to "my-lib-components"
17    const result = data.replace(/declare module "index"/g, 'declare module "my-lib-components"');
18
19    // Write the changes back to the file
20    fs.writeFile(pathToDeclarationFile, result, "utf8", (err) => {
21      if (err) {
22        console.error("Error writing to the file:", err);
23        return;
24      }
25      console.log("Module name successfully replaced.");
26    });
27  });
28};
29
30replaceModuleDeclarationName();
31