typescript - 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

init

    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

add 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;    };

update 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"  },