redux store 状态导出接口答案

【问题标题】：Exporting interface of redux store stateredux store 状态导出接口
【发布时间】：2019-04-06 23:56:23
【问题描述】：

开始制作 redux 模块后，我创建了以下文件：

//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?
};

但不知道如何在index.tsx中导出状态接口的定义。

当我简单地将State 放在导出中时，它会告诉我'State' only refers to a type, but is being used as a value here.，我理解这是错误的方式，但是导出这个定义需要什么？

【问题讨论】：

问题是你试图导出一个对象，但 Typescript 类型和接口只在编译之前存在。该键的对象值是什么？我同意 TS 支持这种形式是合乎逻辑的，因为您可以单独导出接口，但据我所知，您目前不能这样做，您需要单独导出接口。
感谢您给我的解释，如果您想将此问题标记为已回答，请发布一些内容。事实上，现在我正在使用个人export type AuthenticationState = State。此外，首先，我不确定将 reducer、动作类型和状态接口组合到一个默认导出中是否是设计中的一个好习惯。动作类型和状态接口显然具有与 reducer 不同的特性。

标签： javascript typescript interface react-redux

【解决方案1】：

问题是您试图导出一个对象，但 Typescript 类型和接口仅在编译之前存在。该键的对象值是什么？

// Typescript
interface Foo {};

export default {
  Foo,
};

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

我同意 TS 支持这种格式是合乎逻辑的，因为您可以单独导出接口，但据我所知，您目前不能这样做，您需要单独导出。

export interface Foo {};

export default {
  // Rest of the things
};

【讨论】：