Brtdku

How do I use interfaces combined with the initial state of my reducer in angular 6? When I use interfaces combined with the initial state of my reducer I get the following error:

ERROR in src/app/core/store/event/event.reducer.ts(8,14): error
TS2322: Type '{ loading: false; loaded: false; failed: false; data:
undefined; selectedEvent: {}; }' is not assignable to type 'Events'.
Types of property 'selectedEvent' are incompatible.
Type '{}' is not assignable to type 'Event'.
Property 'id' is missing in type '{}'.

event.interface.ts

export interface Event {

  id: string;

  title: string;

  date: string;

  place: string;

  line: string;

  type: string;

  vehicle: string;

  matriculeNr: string;

  filterCTX: string;

  status: string;

  recordExisting: string;

  mode: string;

  module: string;

  object: string;

  eventId: string;

  sharedObjects: SharedObject;

  eventTime: string;

  eventCodeDescr: string;

  eventCodeDescrCorp: string;

  description: string;

  selectedAsMain: boolean;

  selectedAsDetail: boolean;

  selected: boolean;

  documents: Document;

  participants: Participant;

}



export interface Events {

  loading: boolean;

  loaded: boolean;

  failed: boolean;

  data: Array<Event>;

  selectedEvent: Event;

}



export interface Document {

  id: string;

  name: string;

  docLink: string;

}



export interface Participant {

  id: string;

  relation: string;

  firstName: string;

  lastName: string;

  updateUser: string;

  updateDate: string;

}



export interface SharedObject {

  id: string;

}

event.reducer.ts

import * as events from './event.actions';

import { tassign } from 'tassign';

import { Events } from '@app/core/interfaces/event.interface';



/**

 * Initial state for events

 */

export const EVENTS_INITIAL_STATE: Events = {

  loading: false,

  loaded: false,

  failed: false,

  data: ,

  selectedEvent: {},

};



/**

 * Case functions

 */

function load(state: Events): Events {

  return tassign(state, { loading: true });

}



function loadSuccess(state: Events, action: events.LoadSuccess): Events {

  return tassign(state, {

    loaded: true,

    loading: false,

    failed: false,

    data: action.payload,

    selectedEvent: {},

  });

}



function loadFail(state: Events): Events {

  return tassign(state, {

    loaded: false,

    loading: false,

    failed: true,

    data: ,

    selectedEvent: {},

  });

}



function selectMainEvent(

  state: Events,

  action: events.SelectMainEvent

): Events {

  const updatedData = state.data.map(event => {

    if (event.id === action.payload) {

      return {

        ...event,

        selectedAsMain: true

      };

    }

    return {

      ...event,

      selectedAsMain: false

    };

  });



  return tassign(state, {

    loaded: true,

    loading: false,

    failed: false,

    data: updatedData,

    selectedEvent: {},

  });

}



function selectDetailEvent(

  state: Events,

  action: events.SelectDetailEvent

): Events {

  const updatedData = state.data.map(event => {

    if (event.id === action.payload.eventId) {

      return {

        ...event,

        selectedAsDetail: true

      };

    }

    return {

      ...event,

      selectedAsDetail: false

    };

  });



  return tassign(state, {

    loaded: true,

    loading: false,

    failed: false,

    data: updatedData,

    selectedEvent: action.payload,

  });

}



/**

 * EventsReducer

 *

 * @param state

 * @param action

 */

export function reducer(

  state: Events = EVENTS_INITIAL_STATE,

  action: events.Actions

): Events {

  switch (action.type) {

    case events.LOAD:

      return load(state);

    case events.LOAD_SUCCESS:

      return loadSuccess(state, action);

    case events.LOAD_FAIL:

      return loadFail(state);

    case events.MAIN_EVENT_SELECTED:

      return selectMainEvent(state, action);

    case events.DETAIL_EVENT_SELECTED:

      return selectDetailEvent(state, action);

  }



  return state;

}



/**

 * Selectors

 */

export const getData = (state: Events) => state.data;

export const getSelectedEvents = (state: Events) =>

  state.data.filter(event => event.selected);

export const getSelectedDetailEvent = (state: Events) => state.selectedEvent;

export const getLoading = (state: Events) => state.loading;

export const getLoaded = (state: Events) => state.loaded;

export const getFailed = (state: Events) => state.failed;