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

标签 typescript create-react-app antd

我正在尝试启动一个项目,但遇到了麻烦。有没有人成功地让 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'.

最佳答案

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

关于typescript - Create-react-app + react-app-rewired + typescript + antd,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49698564/

相关文章:

html - 用于测试 React 应用程序的 jest/enzyme 不提供页面标题,如何获取标题?

reactjs - 启动时创建-react-app "Failed to compile"

javascript - 为什么数字验证规则在 antd 中不起作用

javascript - JSDoc + IDE 与 TypeScript

reactjs - 通过 ESLint 版本在 vscode 上启动 React 应用程序失败

javascript - 有没有一种方法可以提供类似于 Rust 枚举的多态类型区分?

javascript - 如何在antd中获取FormItem更改时的字段值

javascript - Ant Design 如何创建动态字段组

javascript - 自定义 session next js next-auth

javascript - Bootstrap 模式在 React typescript 应用程序中不起作用,但在 fiddle 上工作