At the moment I try to develop my first react & redux and typescript example, but I'm stuck at the declaration of an action. The typescript compiler still throws the same error over and over.
Maybe I missunderstood something of the concept.
The code is based on this tutorial.
Would be glad about any help
graphActions.ts
/// <reference path="../../../typings/index.d.ts"/>
import { createAction, Action } from 'redux-actions';
import * as _ from 'lodash';
import {IGraphObject} from "../components/graph/GraphObject";
import {Graph} from "../models/Graph";
import {ADD_GRAPH} from "../constants/ActionTypes";
const addGraph = createAction<Graph>(
ADD_GRAPH,
(graph: IGraphObject) => ({graphObject: graph})
);
export {
addGraph
}
Graph.ts
import {IGraphObject} from "../components/graph/GraphObject";
export type Graph = {
id?: number;
graphObject: IGraphObject
}
GraphObject.ts
export interface IGraphObject {
id?: number;
graphConfig: IGraphConfig;
graphInstance: any;
initGraph(container: HTMLElement);
addShape(shape: ICustomShapeElement);
}
The typescript compiler throws
(11,5): error TS2345: Argument of type '(graph: IGraphObject) => { graphObject: IGraphObject; }' is not assignable to parameter of type '(...args: { id?: number; graphObject: IGraphObject; }[]) => { id?: number; graphObject: IGraphObj...'.
Types of parameters 'graph' and 'args' are incompatible.
Type '{ id?: number; graphObject: IGraphObject; }' is not assignable to type 'IGraphObject'.
Property 'graphConfig' is missing in type '{ id?: number; graphObject: IGraphObject; }'.
Solved it. A look at the redux-actions typings helped me.
redux-actions typings
export function createAction<Input, Payload>(
actionType: string,
payloadCreator?: PayloadCreator<Input, Payload>
): (...args: Input[]) => Action<Payload>;
Solution
const addGraph = createAction<IGraphObject, Graph>(
ADD_GRAPH,
(graphObject: IGraphObject) => ({graphObject: graphObject})
);
I think the problem is here:
const addGraph = createAction<Graph>(
ADD_GRAPH,
(graph: IGraphObject) => ({graphObject: graph})
);
You are passing a IGrapObject
as a parameter of that anonymous function and the expected return value of that function is of type Graph
.
To make it work your class Graph
have to implement IGraphObject
.
But I think that the best would be if you would return Graph, like so:
const addGraph = createAction<Graph>(
ADD_GRAPH,
(graph: Graph) => ({graphObject: graph})
);
Also move the properties graphConfig
and graphInstance
to Graph and perhaps change the addShape function so it is a array of IcustomShapeElement
and add it to the Grap instead.
Does that make sense?
//Daniel
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.