包裹打字稿模块扩充

Question

我正在尝试通过 Parceljs 发布一个使用 typescript module augmentation 的库，但它似乎没有捆绑这些模块增强。我无法在项目中使用导入 Parcel 生成的库的属性。

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
  "devDependencies": {
    "parcel": "latest"
  }
}

我尝试使用 Parcel 和 Typescript 增强的示例。

import { Components, createTheme, PaletteOptions } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface Palette {
    ternary: Palette['primary'];
    quaternary: Palette['primary'];
    gridColor: string;
    logoColor: string;
  }
  interface PaletteOptions {
    ternary?: PaletteOptions['primary'];
    quaternary?: PaletteOptions['primary'];
    gridColor?: string;
    logoColor?: string;
  }
}

export const defaultTheme = createTheme();

来自使用 Parcel 构建的库的导出的 defaultTheme 不会附带我在此处定义的其他属性。我希望它们可用。

Answer 1

很遗憾，这里好像是a bug in parcel。

更新 (2021-11)：此 PR to fix this bug 已被接受。该修复程序在 version 2.0.0-nightly.296 及更高版本 (link) 中可用，并且还应在 2.0.1 之后的 @parcel/transformer-typescript-types 的下一版本中提供。如果您使用的是 2.0.1 或更早版本，请继续阅读以了解解决方法。

您可以使用tsc 为您的项目生成.d.ts 文件来解决此问题。以下是你的做法：

1. 确保您的package.json 配置为告诉parcel 输出与根源文件同名的文件（例如，如果根源文件是/src/index.ts，请确保您的@987654335 中有"main": "dist/index.js" @)
2. 添加tsconfig.json，内容如下：

   {
     "compilerOptions": {
       "rootDir": "./src",
       "declaration": true,
       "emitDeclarationOnly": true,
       "outFile": "./dist/index.js",
     }
   }
   

3. 在构建步骤中添加一个命令，删除 parcel 生成的 .d.ts 文件，并使用 tsc 创建一个新文件。例如。 parcel build 变为 parcel build && rimraf dist/index.d.ts && tsc

我知道这不漂亮，但希望它能解除对你的阻止。

这里是a repo where you can see an example of both the bug and the workaround。