redux-aktionen Typoskript eine Aktion deklarieren

Question

Im Moment versuche ich meine erste Reaktion & Redux und Typoskript zu entwickeln, aber ich stecke bei der Deklaration einer Aktion fest. Der Typescript-Compiler wirft immer noch den gleichen Fehler immer wieder.

Vielleicht habe ich etwas von dem Konzept missverstanden.

Der Code basiert auf this Tutorial.

Wäre über jede Hilfe

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); 
} 

Der Typoskript Compiler gerne wirft

(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; }'. 

Answer 1

Gelöst es. Ein Blick auf die Redux-Aktionen hat mir geholfen.

redux-Aktionen Typisierungen

export function createAction<Input, Payload>(
     actionType: string, 
     payloadCreator?: PayloadCreator<Input, Payload> 
): (...args: Input[]) => Action<Payload>; 

Lösung

const addGraph = createAction<IGraphObject, Graph>(
    ADD_GRAPH, 
    (graphObject: IGraphObject) => ({graphObject: graphObject}) 
); 

Answer 2

denke ich, ist das Problem hier:

const addGraph = createAction<Graph>(
    ADD_GRAPH, 
    (graph: IGraphObject) => ({graphObject: graph}) 
); 

Du ein IGrapObject als Parameter dieser anonymen Funktion und der erwarteten Rückgabewert dieser Funktion übergeben ist vom Typ Graph.

Damit es funktioniert, muss Ihre Klasse GraphIGraphObject implementieren.

Aber ich denke, dass das Beste wäre, wenn Sie Graph zurückkehren würden, etwa so:

const addGraph = createAction<Graph>(
    ADD_GRAPH, 
    (graph: Graph) => ({graphObject: graph}) 
); 

auch bewegen, um die Eigenschaften graphConfig und graphInstance in Graph und vielleicht die Funktion addShape ändern, so dass es eine Reihe von IcustomShapeElement ist und füge es stattdessen dem Grap hinzu.

Macht das Sinn?

// Daniel