为什么会出现错误:没有重载匹配此调用。在我的Typescript项目中重载3中的1?

时间:2020-01-11 15:55:51

标签: javascript reactjs typescript redux types

我收到以下错误:

(属性)英雄:减速机 没有重载匹配此调用。 重载3之1,'((reducers:ReducersMapObject):Reducer,AnyAction>')出现以下错误。

类型'(状态:字符串|未定义,操作:操作)=>字符串|英雄”不能分配给“减速器”类型。 参数“状态”和“状态”的类型不兼容。 输入“英雄| undefined'不能分配给'string |未定义”。

类型“ Hero”不可分配给类型“ string” .ts(2769) index.ts(7,3):期望的类型来自属性“ hero”,该属性在此处声明为“ ReducersMapObject”类型

它出现在下面用index.ts编写的“英雄”上,其两侧都有3个星号。

reducers / index.ts:

import { combineReducers } from "redux";
import { heroesReducer, heroReducer } from "./reducer";
import { Hero } from "../actions";

export interface StoreState {
  heroes: Hero[];
  hero: Hero;
}

export const reducers = combineReducers<StoreState>({
  heroes: heroesReducer,
  ***hero***: heroReducer
});

reducers / reducers.ts

import { Hero, Action, ActionTypes } from "../actions";

export const heroesReducer = (state: Hero[] = [], action: Action) => {
  switch (action.type) {
    case ActionTypes.fetchAllHeroes:
      return action.payload;

    default:
      return state;
  }
};

export const heroReducer = (state: Hero, action: Action) => {
  switch (action.type) {
    case ActionTypes.fetchSingleHero:
      return action.payload;

    default:
      return state;
  }
};

actions / types.ts

import { FetchAllHeroesAction, FetchSingleHeroAction } from "./heroes";

export enum ActionTypes {
  fetchAllHeroes,
  fetchSingleHero,
  searchHero
}

export type Action = FetchAllHeroesAction | FetchSingleHeroAction;

components / HeroItem:

import React from "react";
import { StoreState } from "../reducers";
import { connect } from "react-redux";
import { Hero, fetchSingleHero } from "../actions";

interface HeroProps {
  id: string;
  hero: Hero;
}

export const _HeroItem: React.FC<HeroProps> = props => {
  console.log(props);

  return <div>{props.hero}hihihihi</div>;
};

const mapStateToProps = (state: StoreState): { hero: Hero } => {
  return { hero: state.hero };
};

export const HeroItem = connect(mapStateToProps, { fetchSingleHero })(
  _HeroItem
);

actions / heroes.ts:

import axios from "axios";
import { Dispatch } from "redux";
import { ActionTypes } from "./types";

export interface Hero {
  id: string;
  name: string;
  powerstats: {
    strength: string;
    speed: string;
    intelligence: string;
    durability: string;
    power: string;
    combat: string;
  };

  biography: {
    fullName: string;
    alterEgos: string;
    aliases: string[];
    placeOfBirth: string;
    publisher: string;
    alignment: string;
  };

  appearance: {
    gender: string;
    race: string;
    height: string[];
    weight: string[];
  };

  work: {
    occupation: string;
    base: string;
  };

  connections: {
    groupAffiliation: string;
    relatives: string;
  };

  image: {
    url: string;
  };
}


export interface FetchSingleHeroAction {
  type: ActionTypes.fetchSingleHero;
  payload: Hero;
}

export interface HeroId {
  id: string;
}

export const fetchSingleHero = (heroId: HeroId) => {
  const url = `https://superheroapi.com/api/2987607971258652/${heroId}`;

  return async (dispatch: Dispatch) => {
    const res = await axios.get(corsProxy + url);
    console.log(res.data);
    dispatch<FetchSingleHeroAction>({
      type: ActionTypes.fetchSingleHero,
      payload: res.data
    });
  };
};

昨晚我让它可以执行“ FetchAllHeroes”操作,但是通过删除属性检查打字稿组件的一部分来做到这一点,我认为这不是最好的方法。如果有人对如何解决它有任何想法或想要任何其他信息来帮助它,将不胜感激。我是Typescript的新手。

谢谢!

0 个答案:

没有答案