``babel plugin-react-css-modules`类型脚本类型检查

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

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

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

Answer 2

因为您在一个模块中(它有一个导出)，所以您使用的是全局作用域之外的一个单独的作用域-所以您只是创建了一个名为Element的接口，该接口独立于全局声明。

我会把这个接口放在一个不带导出/导入(augmentations.d.ts)的单独文件中，并将它添加到您的tsconfig.json中。

Answer 3

最佳选项：

1. 使用带有babel-plugin-react-css-modules插件的babel-loader，后跟'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"
                    }
                  ]
                ]
              }
            },
          ]
        }

排除babelrc作为babel，如果用来编译.js文件，它们不能干扰typescript编译。

• babel-loader首先运行，处理styleName属性，但保持打字原样。

然后运行

• ts加载器，进行类型检查并转换打字脚本。

另一个不太好的选择。

1. 不使用ts-loader来编译.tsx文件。这是可行的，但这意味着你不会得到编译时的类型检查。(这有点违背了使用ts而不是js的意义)