Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for params generic in useRoute #1160

Open
fyapy opened this issue Oct 16, 2021 · 6 comments
Open

Add support for params generic in useRoute #1160

fyapy opened this issue Oct 16, 2021 · 6 comments
Labels
enhancement New feature or request has workaround A workaround has been found to deal with the issue typescript Problem related to TS typings

Comments

@fyapy
Copy link

fyapy commented Oct 16, 2021

What problem does this feature solve?

Typing of params from useRoute.

When you have function with typed arguments

const someFn = (id: string, type: ResourceType) => {}

And when you try to pass a route.params as an argument

const route = useRoute()
someFn(route.params.resourceId, route.params.type)

You will get error

Argument of type 'string | string[]' is not assignable to parameter of type 'string'.
Type 'string[]' is not assignable to type 'string'.

Screenshot of problem

image

What does the proposed API look like?

type Params = {
    id: string
    type: ResourceType
}
const route = useRoute<Params>() // route.params will be typed

Pull Request

#1159

@posva
Copy link
Member

posva commented Oct 17, 2021

This is interesting. I think we can push it a bit further the type génération for routes and the PR that @pikax sent #872 , maybe there is a way to extend the defined routes and then provide (with autocompletion) a name generic:

// given a route { path: '/users/:id', name: 'users' ... }
useRoute<'users'>() // route type with params: { id: string }
// given a route { path: '/posts/:slugs*', name: 'posts' ... }
useRoute<'posts'>() // route type with params: { slugs?: string[] }

@posva posva added enhancement New feature or request typescript Problem related to TS typings labels Oct 17, 2021
@fyapy
Copy link
Author

fyapy commented Nov 1, 2021

@posva If we have plans for a useRoute hook, may be we can add a useParams hook with generic support? Because at the moment the problem with typing params is very annoying 😞

What does the proposed API look like?

type Params = {
    id: string
    type: ResourceType
}
const params = useParams<Params>() // params with types information

@posva
Copy link
Member

posva commented Mar 1, 2022

as mentioned in #1159 (comment) let's keep this in userland for the moment

import { RouteParams } from 'vue-router'
import { computed } from 'vue'

function useParams<P extends RouteParams>() {
  const route = useRoute()
  return computed(
    () => route.params as P
  )
}

@posva posva added the has workaround A workaround has been found to deal with the issue label May 29, 2022
@posva
Copy link
Member

posva commented Oct 20, 2022

The current direction is leaning more towards something as automatic as possible with https://github.com/posva/unplugin-vue-router

@amalitsky
Copy link

Can't param types be correctly generated based on path definition?
If it has * after param string, type becomes string[], otherwise it's a simple string.
Am I missing something here? Thanks

@posva
Copy link
Member

posva commented May 29, 2024

@amalitsky the reason is performance: https://www.youtube.com/watch?v=2hYU6HyTNdk

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request has workaround A workaround has been found to deal with the issue typescript Problem related to TS typings
Projects
Status: 🆕 Triaging
Status: To Do
Development

No branches or pull requests

3 participants