TS4023：导出的变量 <x> 具有或正在使用来自外部模块的名称 <y>，但无法命名

Posted 2023-02-19

【中文标题】TS4023：导出的变量 <x> 具有或正在使用来自外部模块的名称 <y>，但无法命名

【英文标题】：TS4023: Exported Variable <x> has or is using name <y> from external module but cannot be named

【发布时间】：2017-10-09 13:09:46

【问题描述】：

我以前看过这个回答，但他们似乎没有涵盖这个特定的用例（或者他们不工作/帮助）

import Route from 'vue-router';


export const detailRoute = 
  path: '/detail/:id',
  component: Detail,
  props: (route: Route) => (
    state: route.query.state
  )
;

detailRoute 使用了我正在导入的 Route，但我猜想作为命名导入 Route 它不起作用？有没有一种不同/更好的方法可以做到这一点？我也试过export Route;，但没有帮助。

tsconfig.json：

    
      "compilerOptions": 
        "target": "ES2017",
        "module": "ES2015",
        "moduleResolution": "Node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "allowSyntheticDefaultImports": true,
        "noEmitHelpers": true,
        "importHelpers": true,
        "pretty": true,
        "alwaysStrict": true,
        "declaration": true,
        "declarationDir": "./types",
        "lib": [
          "DOM",
          "ES2017",
          "DOM.Iterable",
          "ScriptHost"
        ],
        "baseUrl": "./client",
        "paths": 
          "styles/*": ["./app/core/styles/*"],
          "core/*": ["./app/core/*"],
          "components/*": ["./app/components/*"],
          "containers/*": ["./app/containers/*"],
          "assets/*": ["./assets/*"],
          "config/*": ["./config/*"]
        
      
    

确切的错误：

TS4023: Exported variable 'detailRoute' has or is using name 'Route' from external module "/Users/chris/<projectname>/node_modules/vue-router/types/router" but cannot be named.

【问题讨论】：

从 GitHub 看到这个解决方案：github.com/Microsoft/TypeScript/issues/5711

谢谢，这就是我开始的地方，但它似乎没有帮助，或者我错过了一些东西。我导入了 Route，我尝试导出 Route，我不知道我还能做些什么来说“Route is in this”。

我无法重现您的问题。我正在使用 TypeScript 2.3 和 commonjs 模块。你在用什么？

ES6 模块，节点解析，声明 = true;

【参考方案1】：

编译器无法确定detailRoute 的确切形状，因为它不知道Route 的形状。

选项 1

解决此问题的一种方法是从其源导入Route，从而提供编译器确定detailRoute 形状所需的信息。

import  Route  from "./../node_modules/vue-router/types/router";

export const detailRoute = 
  props: (route: Route) => null,
;

由于the index.d.ts file in vue-router（您在问题中导入）重新导出Route，它不提供编译器需要的对Route 的直接引用。

选项 2

另一种选择是让detailRoute 完全不使用静态类型。

import  Route  from 'vue-router'; // index.d.ts

export const detailRoute: any = 
  props: (route: Route) => null,
;

由于any 选择退出静态类型，编译器不需要弄清楚detailRoute 的形状。

选项 3

另一个选项是您在自己的答案中所做的。由于您提供了类型注释，因此编译器无需再次计算detailRoute 的形状。

import  Route, RouteConfig  from 'vue-router'; // index.d.ts

export const detailRoute: RouteConfig = 
  props: (route: Route) => null,
;

另见

https://github.com/Microsoft/TypeScript/issues/5711

当试图发出 [模块] 时，编译器需要编写一个对象类型字面量……表示模块的形状。但是范围内并没有直接引用[Route]的名称，所以类型“无法命名”，出现错误。

如果您添加 [Route] 的 [a direct] import ... 错误应该会消失。

【参考方案2】：

显然这是我的问题的解决方案：

  import Route, RouteConfig from 'vue-router';


  export const detailRoute: RouteConfig = 
    path: '/detail/:id',
    component: Detail,
    props: (route: Route) => (
      state: route.query.state
    )
  ;

指定 detailRoute 是一个 RouteConfig（它又使用 Route）解决了这个问题。我一定误解了它应该如何工作，但这解决了它。

【参考方案3】：

我在输入 rootReducer 时遇到了这个问题，以防其他人也这样做。我正在导入由我还没有导出的其他类型（状态、动作）组成的类型化减速器。

简答：从 reducer 中导出所有 action 和 state 类型！

当复合类型的部分也未导出并且您依赖类型推断时，复合类型似乎无法正常工作。在这种情况下，推断 rootReducer 的类型（如果你有多个 reducer，那么显式类型就太多了）。

const rootReducer = combineReducers( typedReducerA, typedReducerB, ... 

【讨论】：

我也在处理减速器问题，我的解决方案是在尝试扩展之前从 RootState 中删除唯一符号。我的解决方案是：Subtract<RootState, CombinedState<>>。 Subtract 来自 utility-types npm 包

【参考方案4】：

对我来说，这个问题是因为我正在尝试构建一个库：

interface Props ...;
const MyComponent = (...:Props)=><>...</>

我改成：

type Props = ...;

问题已解决。

【讨论】：

这很奇怪，但它为我解决了问题。