Question

我从vs2017附带的React + Redux模板开始。我正在做的就是尝试实例化一个“连接”的组件包装器。我的理解是，如果连接工作，当包装的组件被实例化时，结果类型不应该期望通过props进入任何东西（因为到内部的道具映射）。然而基于下面的错误，似乎它抱怨我没有通过道具传递“count”，但是当我映射时，count应该来自redux商店。

错误TS2322（TS）类型“{}”不能分配给类型'IntrinsicAttributes＆amp; IntrinsicClassAttributes＆amp; Readonly＆lt; {children？：ReactNode; }＆GT; ＆安培; [R ...'。类型“{}”不能分配给“Readonly”类型。类型“{}”中缺少属性“count”。 WebApplication1（tsconfig项目）C：\ Users \ ben \ Documents \ Visual Studio 2017 \ Projects \ WebApplication1 \ WebApplication1 \ ClientApp \ components \ FetchData.tsx 29 Active

州定义：

export interface CounterState {
 count: number;
}

连接被叫：

export default connect(
(state: ApplicationState) => state.counter, CounterStore.actionCreators)(Counter) as typeof Counter;

我认为该模板似乎是将包装的连接组件类型转换为原始组件的形状，但我不确定。

在此实例化：

import Counter from '../components/Counter'
....
public render() {
    return <div>
        <Counter />
        <h1>Weather forecast</h1>

我认为我可以实例化一个连接包装的容器组件而不传递所需的道具，因为它们应该来自redux商店吗？

更新：我已在此处上传了可重现的测试用例：https://drive.google.com/file/d/0B_eEp0KGxixWN0tQTE1ac2FQYnc/view?usp=sharing

只需使用VS2017 15.3.5打开解决方案，在恢复node_modules之后，您可以运行解决方案来查看错误，也可以打开文件ClientApp / Components / FetchData.tsx，错误将是显示在错误列表中。

Answer 1

as typeof Counter确实是问题所在。通过键入已连接的组件作为Counter，您可以指定它仍然需要count道具，而不是typeof道具。如果您放弃routes.tsx，则types/react-router中会出现错误，您可以通过安装最新component（4.0.15）来解决此错误，该错误不需要Route在RouteComponentProps中再次拥有@types/react-redux。您可能还想使用最新的SELECT *, DATE_DIFF(DATE(bkg_clientintime), DATE(bkg_clientouttime)) AS no_days FROM roombooking，以获得更准确的连接组件类型。

React + Redux + Typescript：尝试实例化连接包装组件时出错：类型{}不能分配给

1 个答案: