typescript - `babel-plugin-react-css-modules` Typescript 类型检查

Question

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

我曾尝试Element在“.d.ts”文件中声明一个来进行声明合并，但我一定是做错了什么。

interface Element {
    styleName: string;
}

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

更新：

.d.ts 不工作

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-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，它们不得干扰 typescript 编译。

• babel-loader 首先运行，处理 styleName 属性，但保留 typescript 原样。

• ts-loader 然后运行，类型检查和转译打字稿。

Alternative 不太好的选择。

2. 不要使用 ts-loader 编译 .ts[x] 文件。这可行，但意味着您不会进行编译时类型检查。（哪种方式违背了在 js 上使用 ts 的意义）