Wasp-lang•14mo ago

Client Page component query parameter

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 ?

Features | Wasp

App

6 Replies

martinsos•14mo ago

@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?

Filip•14mo ago

Hey @0xtlt, you can change the file's extension to 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 :)
}

Filip•14mo ago

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

Filip•14mo ago

And for all TS-supported features: https://wasp-lang.dev/docs/typescript 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"
}

The answer is: Not yet! But, as @martinsos said, we're planning to add it soon! Hopefully the manual typing will do for now!

0xtlt•14mo ago

alright thank you @Filip, it is clear for me 🙂

MEE6•14mo ago

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

Gaming

Programming

Client Page component query parameter