塩焼きブログ

塩焼きに関しての研究内容を公開しています

TypeScript + vue-routerでmode:historyを使う方法

下記のようにすることでハッシュが付かないhistoryを用いたURLを使えるようにできるらしいのだが

const routerOption = {
  mode: "history",
  routes: [{ path: '/', component: RootComponent }]
};

下記の様なエラーが出る

ERROR in /src/ts/app.ts
[tsl] ERROR in /src/ts/app.ts(24,30)
      TS2345: Argument of type '{ mode: string; routes: { path: string; component: VueConstructor<{ enthusiasm: any; } & { increm...' is not assignable to parameter of type 'RouterOptions | undefined'.
  Type '{ mode: string; routes: { path: string; component: VueConstructor<{ enthusiasm: any; } & { increm...' is not assignable to type 'RouterOptions'.
    Types of property 'mode' are incompatible.
      Type 'string' is not assignable to type '"history" | "hash" | "abstract" | undefined'.

typescript.jsonをこちらの書き方に修正してみたが、下記のようなエラーが出る。

Type 'string' is not assignable to type 'RouterMode'.

どうしたものかといろいろ調べてみたらこちらの記事でCastする方法が書かれていたので下記のようにしてみた。

let hoge: RouterMode = "history";
const routerOption = {
  mode: hoge,
  routes: [{ path: '/', component: RootComponent }]
};

すると無事コンパイルできた。

{
  mode: "history" as RouterMode,
  routes: [{ path: '/', component: RootComponent }]
}

と書いたほうが綺麗かな。