TS4023:导出的变量 <x>有或正在使用名称 <y>来自外部模块但无法命名 [英] TS4023: Exported Variable <x> has or is using name <y> from external module but cannot be named

问题描述

我以前看过这个答案，但它们似乎没有涵盖这个特定的用例(或者它们不起作用/帮助)

I've seen this answered before, but they don't seem to cover this specific use case (or they don't work/help)

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}; ，但这没有帮助.

detailRoute uses Route, which I am importing, but I guess as a named import {Route} it doesn't work? Is there a different/better way to do this that will work? I tried export {Route}; as well, but that didn't help.

tsconfig.json:

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:导出的变量detailRoute"具有或正在使用来自外部模块/Users/chris//node_modules/vue-router/types/router"的名称Route"，但无法命名.

推荐答案

编译器无法确定 detailRoute 的确切形状，因为它不知道 Route<的形状/代码>.

The compiler is failing to figure out the exact shape of detailRoute, because it does not know the shape of Route.

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

One way around this is to import Route from its source, thereby providing the information that the compiler needs to determine the shape of detailRoute.

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

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

由于 index.d.ts 文件vue-router(您在问题中导入的)重新导出 Route，它不提供对 direct 的引用编译器需要的Route.

Since the index.d.ts file in vue-router (which you were importing in the question) re-exports Route, it does not provide the direct reference to Route that the compiler needed.

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

Another option is to opt detailRoute out of static typing altogether.

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

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

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

Since any opts-out of static typing, the compiler does not need to figure out the shape of detailRoute.

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

A further is option is what you did in your own answer. Since you provided the type annotation, the compiler again does not need to figure out the shape of 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] 的名称，因此类型无法命名".还有一个错误.

When trying to emit [the module], the compiler needs to write an object type literal... representing the shape of the module. But there isn't a name in scope that refers directly to [Route], so the type "cannot be named" and there's an error.

如果您添加了 [Route] 的 [直接] 导入...错误应该会消失.

If you add [a direct] import of [Route]... the error should go away.

这篇关于TS4023:导出的变量 <x>有或正在使用名称 <y>来自外部模块但无法命名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！