ルートコンポーネントにプロパティを数値で渡す

Vue3 を使ってわからなかった事のメモシリーズ

ルートコンポーネントにプロパティを渡すことをリンクを参考にしてやってみた。しかし、値を渡すことはできたが age プロパティの値が文字列だった。

const router = new VueRouter({
  routes: [{
    path: '/User/:name/:age',
    name: 'User',
    component: User,
    props: true
  }]
})

// User コンポーネント
props: {
    name: String,
    age: Number,
},    

age プロパティの値を Number で渡すには router の props をFunction モードで定義する

const router = new VueRouter({
  routes: [{
    path: '/User/:name/:age',
    name: 'User',
    component: User,
    props: route => ({
      name: route.params.name,
      age: parseInt(route.params.age, 10),
    })
  }]
})

Vue のサンプルをまねて記述したのだが、自分の環境では以下のエラーがでてコンパイルできなかった。

パラメーター 'route' の型は暗黙的に 'any' になります。ts(7006)

引数の型を明記してやればよいみたい

const router = new VueRouter({
  routes: [{
    path: '/User/:name/:age',
    name: 'User',
    component: User,
    props: (route: { params: { name: string, age: string } }) => ({
      name: route.params.name,
      age: parseInt(route.params.age, 10),
    })
  }]
})