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',
  },
];

基本的には以下のリンクを見ればわかります。

github.com

この場合は型アサーションをする必要があり、修正方法は以下の2つです。

  1. 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);
  1. 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[];

以上、ご参考になれば幸いです。