How to get started in TypeScript

Get Help and Help Others
1

I’ve created apps using RedwoodJS: The Tutorial | RedwoodJS Docs before.

I’ve even somehow gotten TypeScript to work in some of my apps. But it’s always been difficult, and I find myself hacking my way through it rather than following repeatable steps.

So I wanted to try to improve the docs at https://redwoodjs.com/docs/typescript

But then I couldn’t even get this working, and I wonder what I’m doing wrong:

nvm install --lts
yarn create redwood-app redwoodts
cd redwoodts
git init
git checkout -b main

cat << EOF > ./api/tsconfig.json
{
  "compilerOptions": {
    "noEmit": true,
    "allowJs": true,
    "esModuleInterop": true,
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"]
    },
    "typeRoots": ["../.redwood"]
  },
  "include": ["src"],
}
EOF

cat << EOF > ./web/tsconfig.json
{
  "compilerOptions": {
    "noEmit": true,
    "allowJs": true,
    "esModuleInterop": true,
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"]
    },
    "typeRoots": ["../.redwood"]
  },
  "include": ["src"],
}
EOF

yarn redwood generate page home /
mv web/src/Routes.js web/src/Routes.ts
mv web/src/pages/HomePage/HomePage.js web/src/pages/HomePage/HomePage.tsx
yarn rw dev

In the browser, I get:

ReferenceError: HomePage is not defined

2

They have not yet extended typescript support for router components I guess

3

Correct, unfortunately. But there’s an active PR for Router support. Hoping to get into next release.

1 Like
4

@ryancwalsh There is a critical piece missing in that example. You need types: []. There is a PR, with that change, and some other notes as well. Please have a look https://github.com/redwoodjs/redwoodjs.com/pull/524

2 Likes
5

@thedavid and @Tobbe Thank you for your responses! :smiley:

Unfortunately, I’m still seeing the same problem, regardless of whether I add types: [] or run yarn workspace web add @types/jest and add "types": ["jest"].

nvm current says v14.15.4.

I’m on Windows running Ubuntu via WSL 1, if that matters.

6

That’s useful information, thanks for sharing. I’m on windows myself, but not WSL.

If you’re still getting

ReferenceError: HomePage is not defined

And it’s from the router, then you’re probably hitting the issue @vinaypugal mentioned. If you switch your pages over to .js, and try making some other file .tsx instead – does that work?

7

@Tobbe Yes! I just tried creating and using a .ts file other than a page, and it worked.

It sounds like you’re saying pages can be .tsx on Linux or Windows but apparently not WSL 1.

I spent hours last night trying to upgrade to WSL 2 but still haven’t been successful. Do you happen to know if everything would work for me if I were on WSL 2?

Thanks.

8

The router still doesn’t have TS support. So you can’t write your pages using typescript. I think everything else should work. And it looks like the router is getting TS support in the next release, so you won’t have to wait long for it to work for you.

It’s the automatic import (with code splitting) that the router does that doesn’t find your .ts or .tsx files.

If you want to get it to work today you can manually import your tsx pages in the router with a relative path all the way in to the page and it should work.

The behavior should be the same on WSL1 as on all other setups.

1 Like
9

Thank you so much, @Tobbe!

10

This will be working in the next release: Make auto-import pages support .tsx files. by peterp · Pull Request #1651 · redwoodjs/redwood · GitHub

2 Likes
11

Great to hear. Thanks, @peterp!

1 Like