解决 React/ Typescript 错误：导出变量正在使用外部模块的名称

Question

我使用 React 与 Redux 和 Typescript 并得到一个奇怪的错误，我不知道如何解决？

导出的变量“rootReducer”具有或正在使用名称 来自外部模块的“ITransactionAddAction” “/Users/lony/Desktop/vest/react-stock-portfolio/src/store/account/types” 但不能命名.ts(4023)

名为

ITransactionAddAction

的帐户/类型中定义，如下所示，它指定用于将交易添加到帐户存储的减速器。

rootReducer.ts

store.ts

我有两个“redux store”帐户和投资组合，两者的结构都相同，每个都有一个减速器和一个类型文件。

这里举个例子，一次是账户的代码：

账户/类型

// Data

export interface ITransaction {
  isin: string;
  order_action?: string;
  quantity: number;
  price: number;
  cost: number;
  order_datetime: Date;
  valuta_datetime?: Date;
}

export type ITransactionArray = Array<ITransaction>;

export interface IAccount {
  transactions: ITransactionArray;
}

// Action

export const TRANSACTION_ADD = "TRANSACTION_ADD";
export const TRANSACTION_DELETE = "TRANSACTION_DELETE";
export const TRANSACTION_UPDATE = "TRANSACTION_UPDATE";

interface ITransactionAddAction {
  type: typeof TRANSACTION_ADD;
  payload: ITransaction;
}

interface ITransactionDeleteAction {
  type: typeof TRANSACTION_DELETE;
  payload: ITransaction;
}

interface ITransactionUpdateAction {
  type: typeof TRANSACTION_UPDATE;
  payload: ITransaction;
}

export type TransactionActionTypes =
  | ITransactionAddAction
  | ITransactionDeleteAction
  | ITransactionUpdateAction;

账户/减速机

import {
  IAccount,
  TRANSACTION_ADD,
  TRANSACTION_DELETE,
  TRANSACTION_UPDATE,
  TransactionActionTypes,
} from "./types";

const initialState: IAccount = { transactions: [] };

const accountReducer = (
  state = initialState,
  action: TransactionActionTypes
): IAccount => {
  switch (action.type) {
    case TRANSACTION_ADD:
      return {
        ...state,
        transactions: state.transactions.concat(action.payload),
      };
    case TRANSACTION_DELETE:
      return {
        ...state,
        transactions: state.transactions.filter(
          (item) => item.isin !== action.payload.isin
        ),
      };
    case TRANSACTION_UPDATE:
      const data = state.transactions.map((item) => {
        if (item.isin === action.payload.isin) {
          return action.payload;
        } else {
          return item;
        }
      });

      return {
        ...state,
        transactions: data,
      };
    default:
      return state;
  }
};

export default accountReducer;

Answer 1

可能涉及到的人。我不是 100% 确定这是否解决了问题，但我更改了以下文件并升级到 React 16.13.1。

如果您也有同样的问题，请确认是否有效？

rootReducer.ts

import { TypedUseSelectorHook, useSelector } from "react-redux";
import { combineReducers } from "redux";

import accountReducer from "./account/reducer";
import portfolioReducer from "./portfolio/reducer";

export const rootReducer = combineReducers({
  portfolio: portfolioReducer,
  account: accountReducer,
});
export type RootState = ReturnType<typeof rootReducer>;
export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

store.ts

import { createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";

import { rootReducer } from "./rootReducer";

const store = createStore(
  rootReducer /* preloadedState, */,
  composeWithDevTools()
);
export type AppDispatch = typeof store.dispatch;

export default store;

Answer 2

只需声明类型即可，例如：

在外部库中有如下代码：

interface privateProperty {
  name: string;
}
export const config = {
  propName: {} as privateProperty
}

在你的代码中

// this config['propName'] contains non-exported type/interface
import { config } from 'external-lib';

// declare new type from private property
type Y = config['propName']; // or typeof config['propName']
// declare new type that extends Y
export interface X extends Y {}
// apply interface X which contains Private Type Name
export const yourVariable = {} as X;

完成。现在问题解决了

结果

之前

之后