Question

我正在使用babel-plugin-react-css-modules。它将styleName属性添加到HTML元素。 Typescript无法识别此属性。我很确定我需要扩展某些内容，但是我尝试过的任何方法都没有用。

我试图在'.d.ts'文件中声明一个Element来进行声明合并，但是我一定做错了。

interface Element {
    styleName: string;
}

export const Wrapper: React.FC<IWrapperProps> = ({ children, style }) => (
  <div styleName="wrapper" style={style}>
    {children}
  </div>
);

更新：

.d.ts not working

Answer 1

由于您位于模块中（具有导出功能），因此您正在使用与全局范围不同的范围-因此，您只是在创建名为Element的接口，该接口与全局声明分开

我将界面放置在没有导出/导入（augmentations.d.ts）的单独文件中，并将其添加到您的tsconfig.json。

Answer 2

将@types/react-css-modules添加到package.json中，styleName将被识别：

npm install @types/react-css-modules --save-dev

Answer 3

最佳选择：

将 babel-loader 与 babel-plugin-react-css-modules 插件一起使用，然后是“ts-loader”（注意加载器以相反的顺序运行）

webpack 配置看起来像这样：

{
          test: /\.tsx?/,
          exclude: '/node_modules/',
          use: [
            { loader: 'ts-loader' },
            {
              loader: 'babel-loader',
              options: {
                babelrc: false,
                "plugins": [
                  ["@babel/plugin-syntax-typescript",
                {
                  isTSX: true
                }],
                  "@babel/plugin-syntax-jsx",
                  [
                    "babel-plugin-react-css-modules",
                    {
                      "handleMissingStyleName": "throw"
                    }
                  ]
                ]
              }
            },
          ]
        }

如果用于编译 .js 文件，将 babelrc 排除为 babel，它们不得干扰打字稿编译。

babel-loader 首先运行，处理 styleName props 但保留 typescript 原样。
然后运行 ts-loader，检查类型并转译打字稿。

替代不太好的选择。

不要使用 ts-loader 编译 .ts[x] 文件。这有效，但意味着您不会进行编译时类型检查。（哪一种打败了在 js 上使用 ts 的意义）

`babel-plugin-react-css-modules`打字稿类型检查

3 个答案: