KAKIMASSE

ネットで見つけた面白い記事や、役立つのではと感じたネタなどを書いています。

TypeScriptの「Argument of type 'string | (string | null)[]' is not assignable to parameter of type 'string'.」でハマった

   

vue.js + TypeScriptで色々やってみてるんですが、PHPerの僕にはハマるポイントがいっぱいです。

今日も丁度、

ERROR in C:/Users/Sample/Test.vue
49:27 Argument of type 'string | (string | null)[]' is not assignable to parameter of type 'string'.

 Type '(string | null)[]' is not assignable to type 'string'.
  47 | created() {
  48 | //this.$route.query.hoge の型を stringからnumberへ変換したい
 49 | this.hoge = parseInt(this.$route.query.hoge);
    |           ^

というエラーが表示され、困っていました。

このvueファイル中では、

data(){
 return {
  hoge: 0
 }
}

としています。

hogeは number型、Vue Routerで渡されたクエリは string型 として扱われているのでエラーになっているというのは分かりましたが、

ではどうやって this.$route.query.hoge をstring型からnumber型に変更するのか分からずにググったけど出てこない…

色んな方法を試した結果、以下の方法で解決しました。

created() {
 this.hoge = parseInt(this.$route.query.hoge as string)
}

さらに改良版として、

created() {
 this.hoge = parseInt(this.$route.query.hoge as string)
}

data(){
 return {
  hoge: parseInt(this.$route.query.hoge as string)
 }
}
こちらを僕は採用しました!

難しいけど新しいことを覚えるのは面白い!

 - Typescript

SPONSORD LINKS

スポンサーリンク

Message

メールアドレスが公開されることはありません。

  関連記事