TS4023: экспортированная переменная имеет или использует имя из внешнего модуля, но не может быть названа

Я видел этот ответ раньше, но они, похоже, не охватывают этот конкретный случай использования (или они не работают/помогают)

import {Route} from 'vue-router';


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

detailRoute использует маршрут, который я импортирую, но я думаю, что как именованный импорт {маршрут} он не работает? Есть ли другой/лучший способ сделать это, что будет работать? Я пытался!--2--> тоже, но это не помогло.

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.

6
declaration module type-inference types typescript

2 ответов

компилятор не в состоянии выяснить точную форму detailRoute, потому что он не знает форму Route.

1

один из способов обойти это, чтобы импортировать Route из своего источника, тем самым предоставляя информацию, которую компилятор должен определить форму detailRoute.

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

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

С the на vue-router (который вы импортировали в вопросе) реэкспорт Route, он не обеспечивает прямые ссылка Route что компилятор нужен.

2

другой вариант-выбрать detailRoute из статического ввода вообще.

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

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

С any opts-из статической типизации компилятору не нужно выяснять форму 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

при попытке испустить [модуль] компилятору необходимо написать литерал типа объекта... представление формы модуля. Но в области нет имени, которое ссылается непосредственно на [маршрут], поэтому тип "не может быть назван", и есть ошибка.

если вы добавляете [прямой] импорт [Маршрут.].. ошибка должна исчезнуть.

8

по-видимому, это решение моей проблемы:

  import {Route, RouteConfig} from 'vue-router';


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

указание того, что detailRoute был RouteConfig (который, в свою очередь, использует маршрут), решило проблему. Должно быть, я неправильно понял, как это должно работать, но это исправило это.

5