Redux商店状态导出接口

Question

Having started making a redux module, I have created the following files:

//state.tsx
export default interface State {
  readonly user: any;
  readonly isLoggedIn: boolean;
}


//types.tsx
export default {
  REQUEST: 'authentication/REQUEST',
  SUCCESS: 'authentication/SUCCESS',
  FAILURE: 'authentication/FAILURE',
  LOGOUT: 'authentication/LOGOUT'
};


//reducers.tsx
import Types from './types';
import State from './state';
import { Reducer, AnyAction } from 'redux';

const initialState: State = {
  user: null,
  isLoggedIn: false
};

export default class {
  reducer: Reducer<State> = (
    state: State = initialState,
    action: AnyAction
  ) => {
    // brahbrah
  };
}

//index.tsx
import reducer from './reducers';
import Types from './types';
import State from './state';

export default {
  reducer,
  Types,
  // How to export State in this default export?
};

but I'm not sure how to export the definition of state interface in the index.tsx.

When I simply put State in the export, it tells me 'State' only refers to a type, but is being used as a value here. and I understand it's wrong way, but what is needed to export this definition?

Answer 1

The problem is that you're trying to export an object but Typescript types and interfaces only exist before compilation. What would the object value be for that key?

// Typescript
interface Foo {};

export default {
  Foo,
};

// Compiled Javascript
export default {
  Foo: ???
};

I do agree that it would be logical for TS to support this formation as you can just export the interface separately, but as far as I know, you can't do this at the moment, you need a separate export.

export interface Foo {};

export default {
  // Rest of the things
};