带有 webpack 打字问题的 React 和 typescript [英] React and typescript with webpack typing issue

问题描述

我正在尝试使用 TypeScript 创建一个 asyncComponent 高阶组件，但不能完全正确地获取类型.

I'm trying to create an asyncComponent higher order component with TypeScript, but can't quite get the types right.

本质上，这在带有 webpack 的 JS 中有效...

Essentially, this works in JS with webpack...

const Auth = asyncComponent(() =>
  require.ensure([], require => require("../auth/index").default, "auth_async"),
);

我的 asyncComponent 是一个高阶函数，它执行以下操作...

My asyncComponent is a higher order function that does the following...

import * as React from "react";
import { Component } from 'react';

export interface IAsyncComponentProps {}

export interface IAsyncComponentState {
  Component: typeof Component
}

interface IGetComponent {
  (): Promise<typeof Component>;
}

export default function asyncComponent (getComponent: IGetComponent) {
  let ComponentCache: typeof Component = null;

  return class AsyncComponent extends Component<IAsyncComponentProps, IAsyncComponentState> {
    state: {
      Component: typeof Component,
    };

    constructor(props: IAsyncComponentProps) {
      super(props);
      this.state = { Component: ComponentCache };
    }

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then((Component) => {
          ComponentCache = Component;

          this.setState({ Component });
        });
      }
    }
    render() {
      const { Component } = this.state;

      if (Component) {
        return <Component {...this.props} />;
      }
      return null;
    }
  };
}

但是，我在编译时遇到错误...

But, I get an error when compiling it...

src/components/asyncComponent/index.tsx(40,27): error TS2322: Type '{ children?: ReactNode; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<P, S>> & Readonly<{ children?: ReactNode...'.
  Type '{ children?: ReactNode; }' is not assignable to type 'Readonly<P>'.
src/index.ts(3,7): error TS1141: String literal expected.
11:06:50 AM - Compilation complete. Watching for file changes.

有什么想法吗?

推荐答案

我会尽力解释哪里出了问题，以及它是如何在最新版本的 typescript 中解决的.

I will try my best to explain what went wrong and how it got solved in the latest release of typescript.

原因:

行为改变的原因是在2.3中，类似于包含新鲜度标志的对象字面量表达式，JSXAttributes也是类型检查(这意味着不允许过多的属性)

The reason for change in behavior is that in 2.3, Similar to object literal expression which contains freshness flag, JSXAttributes are type-check too(this means that excess properties are not allowed)

建议的解决方案: - 请参阅参考链接

1. 只包含明确的属性 -> 不允许有多余的属性
2. 包含传播属性(即使有显式属性)-> 1.检查类型可分配性(允许访问属性) 2. 对于每个显式属性检查属性名称是否与目标匹配名字.

这个问题显然在 2.3.3 最新稳定版本和 2.4.0 dev 中得到解决.

This issue is being apparently solved in 2.3.3 latest stable version and 2.4.0 dev as well.

使用 npm install typescript@next 用于 nightly build 即 2.4.0 dev 或将 typescript 版本更新到最新的 stable(2.3.3)

Use npm install typescript@next for the nightly build that is 2.4.0 dev or update the typescript version to latest stable(2.3.3)

参考:问题跟踪器

这篇关于带有 webpack 打字问题的 React 和 typescript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！