时间戳

首页 > 解决方案 > 包裹打字稿模块扩充

reactjs - 包裹打字稿模块扩充

问题描述

我正在尝试发布一个使用带有 Parceljs 的 typescript模块扩充的库，但它似乎没有捆绑这些模块扩充。我无法在项目中使用导入 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 不会附带我在此处定义的其他属性。我希望它们可用。

标签： reactjstypescriptparceljs

解决方案

不幸的是，这看起来像是parcel 中的一个错误。

更新（2021-11）：这个修复这个错误的 PR已被接受。该修复程序在version 2.0.0-nightly.296及更高版本中可用（链接），并且也应该在@parcel/transformer-typescript-typesafter的下一个版本中发布2.0.1。如果您使用的是版本2.0.1或更早版本，请继续阅读以了解解决方法。

您可以通过使用为您的项目tsc生成文件来解决此问题。.d.ts以下是你将如何做到这一点：

  1. 确保您package.json已配置为告诉 parcel 输出与根源文件同名的文件（例如，如果根源文件是，请/src/index.ts确保您"main": "dist/index.js"在package.json
  2. 添加tsconfig.json具有以下内容的a： 
    {
  "compilerOptions": {
    "rootDir": "./src",
    "declaration": true,
    "emitDeclarationOnly": true,
    "outFile": "./dist/index.js",
  }
}
  3. 在您的构建步骤中添加一个命令，该命令删除.d.ts由 parcel 生成的文件，并使用tsc. 例如parcel build变成parcel build && rimraf dist/index.d.ts && tsc

我知道这并不漂亮，但希望它会解除对您的阻止。

这是一个 repo，您​​可以在其中看到错误和解决方法的示例。

推荐阅读