Using Typescript on a Basic wasp project.

How do I configure a basic Wasp project to use typescript? Currently my typescript page is showing blank.

2 Replies

Hi @Juan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Wasp supports TypeScript out of the box, so you can freely choose between or mix JavaScript and TypeScript as you see fit. If your TypeScript page is showing blank, it might be due to some misconfiguration or error in your TypeScript code. Here are some steps to ensure your TypeScript setup is correct: 1. File Extension: Make sure your file has the .tsx extension if it's a React component. 2. Importing the Component: In your main.wasp file, ensure that you're importing the TypeScript file correctly. For example:

page MainPage {  
 component: import { MainPage } from "@src/MainPage"  
}

page MainPage {  
 component: import { MainPage } from "@src/MainPage"  
}

3. Component Definition: Check your TypeScript file and ensure you're exporting a valid React component. For example:

export const MainPage = () => {  
 return <div>Hello world!</div>  
}

export const MainPage = () => {  
 return <div>Hello world!</div>  
}

4. Project Structure: Wasp allows you to organize and structure your code however you think is best. There's no need to separate client files and server files into different directories. So, ensure your TypeScript files are in the correct location. 5. TypeScript Configuration: Wasp has some open and closed issues related to TypeScript configuration. You might want to check these out for more context (issue 835 (https://github.com/wasp-lang/wasp/issues/835), issue 1430 (https://github.com/wasp-lang/wasp/issues/1430)). If you're still facing issues, please provide more details or error messages if any. You can also refer to the Wasp documentation (https://wasp-lang.dev/docs) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Juan, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JuanOP•3mo ago

It works now. I think VSCode was being wonky in picking up my changes after I replaced the MainPage jsx with a tsx file.

Gaming

Programming

Using Typescript on a Basic wasp project.