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 }]
}

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA