Client Page component query parameter

Thomas Tastet · 2023-04-18T16:25:39.884Z

On the following part of the doc: https://wasp-lang.dev/docs/language/features#accessing-route-parameters-in-a-page-component The doc is using jsx and not tsx (typescript), is it possible to have a type for the function to have typescript autocompletion in props ?

M

martinsos•4/18/23, 4:31 PM

@0xtlt that would be great yes! We have just recently upped our TS game significantly, and we haven't covered this part yet, but certainly we can do it. Let me ping @Filip he is our TS expert -> let's create a GH issue for this?

F

Filip•4/18/23, 4:46 PM

Hey @0xtlt, you can change the file's extension to

tsx

tsx

tsx

tsx and use TypeScript as you normally would. The same goes for using React Router's types

import { RouteComponentProps } from 'react-router-dom'

const Task = (props: RouteComponentProps<{ id: string }>) => {
  // Now you have your autocomplete :)
}

import { RouteComponentProps } from 'react-router-dom'

const Task = (props: RouteComponentProps<{ id: string }>) => {
  // Now you have your autocomplete :)
}

import { RouteComponentProps } from 'react-router-dom'

const Task = (props: RouteComponentProps<{ id: string }>) => {
  // Now you have your autocomplete :)
}

import { RouteComponentProps } from 'react-router-dom'

const Task = (props: RouteComponentProps<{ id: string }>) => {
  // Now you have your autocomplete :)
}

F

Filip•4/18/23, 4:47 PM

Relevant docs (picture taken from this site): https://wasp-lang.dev/docs/tutorials/todo-app/01-creating-new-project

F

Filip•4/18/23, 4:48 PM

And for all TS-supported features: https://wasp-lang.dev/docs/typescript

F

Filip•4/18/23, 4:50 PM

If you're asking whether we have something like this provided out of the box:

import { TaskPage } from '@wasp/pages/types'

const Task: TaskPage = (props) => {
  // automatically know the type of props and that params contain "id"
}

import { TaskPage } from '@wasp/pages/types'

const Task: TaskPage = (props) => {
  // automatically know the type of props and that params contain "id"
}

import { TaskPage } from '@wasp/pages/types'

const Task: TaskPage = (props) => {
  // automatically know the type of props and that params contain "id"
}

import { TaskPage } from '@wasp/pages/types'

const Task: TaskPage = (props) => {
  // automatically know the type of props and that params contain "id"
}

The answer is: Not yet! But, as @martinsos said, we're planning to add it soon!

Hopefully the manual typing will do for now!

T

Thomas TastetOP•4/19/23, 7:30 AM

alright thank you @Filip, it is clear for me

M

MEE6•4/19/23, 7:30 AM

Wohooo @0xtlt, you just became a Waspeteer level 1!

Client Page component query parameter

Similar Threads

Similar Threads

Similar Threads