web-dev-qa-db-ja.com

TS4023：エクスポートされた変数<x>は、外部モジュールからの名前<y>を持っているか、使用していますが、名前を付けることはできません

私はこれが以前に回答されたのを見たことがありますが、彼らはこの特定のユースケースをカバーしていないようです（または彼らは機能しません/助けません）

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.

typescripttypesmoduledeclarationtype-inference
15
user358089

detailRouteの形状がわからないため、コンパイラーはRouteの正確な形状を理解できません。

オプション1

これを回避する方法の1つは、ソースからRouteをインポートして、コンパイラがdetailRouteの形状を決定するために必要な情報を提供することです。

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

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

以降 the index.d.tsファイルvue-router （質問でインポートしたもの）はRouteを再エクスポートします。これは、directへの参照を提供しませんRouteコンパイラが必要としました。

オプション2

もう1つのオプションは、静的型付けを完全に無効にする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]を直接参照するスコープ内の名前がないため、「名前を付けることができません」というタイプがあり、エラーが発生します。

[ルート]の[直接]インポートを追加すると、エラーは解消されます。

11
Shaun Luttin

どうやらこれは私の問題の解決策です：

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


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

DetailRouteがRouteConfig（ルートを使用する）であることを指定すると、問題が解決しました。これがどのように機能するかを誤解しているはずですが、これで修正されました。

7
user358089