Create-react-app + react-app-rewired + typescript + antd

Question

我正在尝试启动项目并遇到问题.有没有人有成功的Create-react-app + react-app-rewired + typescript + antd一起工作？我已经尝试了所有教程/自定义脚本/加载器的东西,没有运气.我认为https://github.com/SZzzzz/react-scripts-ts-antd将是我所有问题的答案,但是得到了这个编译错误:

(28,81): Type '{ className: string; style: { transition: string | boolean; msTransform: string; WebkitTransform:...' does not satisfy the constraint 'HTMLAttributes<HTMLElement>'. Types of property 'style' are incompatible. Type '{ transition: string | boolean; msTransform: string; WebkitTransform: string; transform: string; }' is not assignable to type 'CSSProperties | undefined'. Type '{ transition: string | boolean; msTransform: string; WebkitTransform: string; transform: string; }' is not assignable to type 'CSSProperties'. Types of property 'transition' are incompatible. Type 'string | boolean' is not assignable to type 'string | undefined'. Type 'true' is not assignable to type 'string | undefined'.

Answer 1

在里面

    create-react-app my-app --scripts-version=react-scripts-ts
    cd my-app
    yarn add antd 
    yarn add react-app-rewired ts-import-plugin --dev

加 config-overrides.js

    const {
        getLoader,
        injectBabelPlugin
    } = require("react-app-rewired");
    const tsImportPluginFactory = require('ts-import-plugin')

    module.exports = function override(config, env) {
        // do stuff with the webpack config...
        const tsLoader = getLoader(
            config.module.rules,
            rule =>
            rule.loader &&
            typeof rule.loader === 'string' &&
            rule.loader.includes('ts-loader')
        );

        tsLoader.options = {
            getCustomTransformers: () => ({
                before: [
                    tsImportPluginFactory([{
                        libraryDirectory: 'es',
                        libraryName: 'antd',
                        style: 'css',
                    }]),
                ]
            })
        };

        return config;
    };

更新 package.json

  "scripts": {
    "start": "react-app-rewired start --scripts-version react-scripts-ts",
    "build": "react-app-rewired build --scripts-version react-scripts-ts",
    "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
    "eject": "react-scripts-ts eject"
  },