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

Question

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

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.

Answer 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 ... 错误应该会消失。

Answer 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）解决了这个问题。我一定误解了它应该如何工作，但这解决了它。

Answer 3

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

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

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

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

Answer 4

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

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

我改成：

type Props = {...};

问题已解决。