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: 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.

推荐答案

编译器无法弄清楚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,
};

由于 vue-router 中的index.d.ts文件(其中您要在问题中导入)重新导出Route，它不提供编译器所需的对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屋！