Typesctipt とVueで開発していたら,vue-routerの部分でtslintで「〜の引数を型'RouterOptions'のパラメーターに割り当てることはできません。」と出た時の対処法
vue cli3で簡単にTypescriptを導入できるようになったので開発していたところ、以下のようなエラーが出た。
[ts] 型 '{ mode: "history"; base: any; routes: ({ path: string; component: VueConstructor<Vue>; } | { path: string; components: VueConstructor<Vue>; } | { path: string; redirect: string; })[]; }' の引数を型 'RouterOptions' のパラメーターに割り当てることはできません。 プロパティ 'routes' の型に互換性がありません。 型 '({ path: string; component: VueConstructor<Vue>; } | { path: string; components: VueConstructor<Vue>; } | { path: string; redirect: string; })[]' を型 'RouteConfig[]' に割り当てることはできません。 型 '{ path: string; component: VueConstructor<Vue>; } | { path: string; components: VueConstructor<Vue>; } | { path: string; redirect: string; }' を型 'RouteConfig' に割り当てることはできません。 型 '{ path: string; components: VueConstructor<Vue>; }' を型 'RouteConfig' に割り当てることはできません。 プロパティ 'components' の型に互換性がありません。 型 'VueConstructor<Vue>' を型 'Dictionary<Component>' に割り当てることはできません。 型 'VueConstructor<Vue>' のインデックス シグネチャがありません。 (property) RouterOptions.mode?: "hash" | "history" | "abstract" | undefined
vue-router部分の実装はこう。routes.tsでルーティングを定義し、index.tsでRouterとしてexportする。
今回のエラーはindex.ts で出ました。
index.ts
import Vue from 'vue'; import Router, { RouterOptions } from 'vue-router'; import routes from './routes'; Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes, });
routes.ts
import TodoList from '@/components/templates/TodoList.vue'; import TodoListDetail from '@/components/templates/TodoListDetail.vue'; export default [ { path: '/tasks', component: TodoList, }, { path: '/tasks/:id', components: TodoListDetail, }, { path: '*', redirect: '/tasks', }, ];
基本的には以下のリンクを見ればわかります。
この場合は型アサーションをする必要があり、修正方法は以下の2つです。
- index.tsを修正(RouterOptionsにする)
import Vue from 'vue'; import Router, { RouterOptions } from 'vue-router'; import routes from './routes'; Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes, } as RouterOptions);
- routes.tsを修正(RouteConfig[]にする)
import TodoList from '@/components/templates/TodoList.vue'; import TodoListDetail from '@/components/templates/TodoListDetail.vue'; import { RouteConfig } from 'vue-router'; export default [ { path: '/tasks', component: TodoList, }, { path: '/tasks/:id', components: TodoListDetail, }, { path: '*', redirect: '/tasks', }, ] as RouteConfig[];
以上、ご参考になれば幸いです。