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

对我来说，这个问题是因为我正在尝试构建一个库，执行以下操作：

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

我改为：

type Props = {...};

问题解决了。

Answer 2

编译器无法弄清楚确切的形状detailRoute,因为它不知道形状Route.

选项1

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

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

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

由于该index.d.ts文件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]的名称,因此类型"无法命名"并且存在错误.

如果添加[直接]导入[路由] ...错误应该消失.

Answer 3

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

  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 4

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

简短的回答：从减速器中导出所有的动作和状态类型！

当复合类型的部分未导出并且您依赖于类型推断时，复合类型似乎无法正常工作。在这种情况下，推断 rootReducer 的类型（如果您有多个减速器，则显式键入的内容太多）。

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