Javascript 将React组件转换为Typescript？

我试图将React+Redux组件的示例复制到typescript：

我的函数遇到了一个死胡同：

导出默认连接（MapStateTrops、mapDispatchToProps）（项目列表）

我得到一个关于它如何不可映射到ItemList的错误

我认为解决这个问题的一种方法是将类声明更改为：

class ItemList extends React.Component<{proper component map}, {proper state map}> {

class ItemList扩展了React.Component{

但是，如果我这样做是因为道具现在已经被映射了，我不能简单地将ItemList作为包含，并且现在希望提供参数

另一种选择可能是：（道具一样）。fetchData（）但是这感觉不对

---

有办法解决这个问题吗？我在typescript中的React+Redux错误吗？

创建完所有内容后，将其与

connect

一起导出

interface PassedProps {
  productId: number;
}

interface StateToProps {
  addedProductIds: number[];
  quantityById: { [key: string]: number };
  quantity: number;
}

interface DispatchToProps {
  addToCart: (productId: number) => void;
  removeFromCart: (productId: number) => void;
}

// Needs to be added to src/store:GlobalStore interface with the correct prop name created from the name of the reducer
export interface CartState {
  addedProductIds: number[];
  quantityById: { [key: string]: number };
}

const mapStateToProps = (globalState: GlobalState): StateToProps => {
  const state: CartState = globalState.cart;

  return {
    addedProductIds: state.addedProductIds,
    quantityById: state.quantityById,
    quantity: Object.keys(state.quantityById).reduce( (sum: number, key: string) => state.quantityById[key] + sum, 0)
  };
};


const mapDispatchToProps = (dispatch: Dispatch<any>): DispatchToProps => {
  return {
    addToCart: (productId: number) => dispatch({ type: 'ADD_TO_CART', productId } as AddToCartAction),
    removeFromCart: (productId: number) => dispatch({ type: 'REMOVE_FROM_CART', productId } as RemoveFromCartAction),
  };
}

export type Props = PassedProps & StateToProps & DispatchToProps;

class CartButton extends Component<Props, CartState> {
  render() {
    const { quantity } = this.props;

    return (
      <View>
        <Text>
          { this.props.addedProductIds.length } type item is in the cart, totals to { quantity } item.
        </Text>
        <View>
          <Button
            onPress={this.onPressAdd.bind(this)}
            title="Add to Cart"
            color="#841584"
          />

          <Button
            onPress={this.onPressRemove.bind(this)}
            title="Removefrom Cart"
            color="#841584"
          />
        </View>
      </View>
    );
  }

  onPressAdd() {
    this.props.addToCart(this.props.productId);
  }

  onPressRemove() {
    this.props.removeFromCart(this.props.productId);
  }
}

export default connect<StateToProps, DispatchToProps, PassedProps>(mapStateToProps, mapDispatchToProps)(CartButton);

接口传递道具{
productId：编号；
}
接口状态rops{
AddedProductId:编号[]；
quantityById:{[key:string]：number}；
数量：数量；
}
接口DispatchToProps{
addToCart:（productId:number）=>无效；
removeFromCart:（productId:number）=>作废；
}
//需要使用从减速器名称创建的正确道具名称添加到src/store:GlobalStore接口
导出接口状态{
AddedProductId:编号[]；
quantityById:{[key:string]：number}；
}
常量MapStateTops=（全局状态：全局状态）：StateTops=>{
常量状态：CartState=globalState.cart；
返回{
AddedProductId:state.AddedProductId，
quantityById:state.quantityById，
数量：Object.keys（state.quantityById）.reduce（（和：数，键：字符串）=>state.quantityById[key]+sum，0）
};
};
const mapDispatchToProps=（调度：调度）：DispatchToProps=>{
返回{
addToCart：（productId:number）=>分派（{type:'ADD_TO_CART'，productId}作为AddToCartAction），
removeFromCart：（productId:number）=>dispatch（{type:'REMOVE_FROM_CART'，productId}作为RemoveFromCartAction），
};
}
导出类型Props=PassedProps&StateToProps&DispatchToProps；
类CartButton扩展组件{
render（）{
const{quantity}=this.props；
返回(
{this.props.addedProductIds.length}类型的项目在购物车中，总计为{quantity}项目。
);
}
onPressAdd（）{
this.props.addToCart（this.props.productId）；
}
onPressRemove（）{
this.props.removeFromCart（this.props.productId）；
}
}
导出默认连接（MapStateTrops、mapDispatchToProps）（CartButton）；

然后，您可以使用它指定要传递的所需道具（PassedProps接口）：

从“../components/CartButton”导入CartButton；
// ....
render（）{
返回（）
} 

为什么提供组件所需的参数是一个问题？因为这样我就不能只使用和必须提供参数，而在javascript示例中我不必这样做。我尝试调整这个示例，但仍然没有成功，组件仍然需要更多的参数，而不仅仅是productIdmy god，我刚刚意识到visual studio示例导出在末尾添加“as typeof”，如下所示：导出默认连接（mapStateToProps，mapDispatchToProps）（CartButton）根据你的例子，去掉这个按钮可以修复一切。我不知道我为此遭受了多大的痛苦，我不确定“as-typeof”位的作用是什么，或者它实现了什么，但是去掉它可以修复问题，所以你的例子是有效的。

import CartButton from '../components/CartButton';

// ....
  render() {
    return(<CartButton productId={5} />)
  }