Getting started with TypeScript in your Phoenix projects!

Learning Resources Screencasts
,
1

Since static typing is all the rage in Elixir right now, maybe some of you will appreciate my most recent video. It’s all about how to get started with TypeScript in your Phoenix apps (assuming you’re using the default esbuild).

Let me know if you have any suggestions for further videos!

5 Likes
2

Nice work. I love how easy Phoenix makes it to get started with TS. Literally just rename your *.js files to *.ts and ESBuild will pick them up automagically.

You brought up typosquatting when you searched for the LiveView types on npm. That’s something that should be emphasized very strongly. npm is rife with malware these days, and there are a lot of packages that are waiting for people to install something with the wrong name. I always copy and paste the package name from npm, I never type it. Yes, this is probably overkill, but I don’t want to slip up and shoot myself in the foot.

With the Property 'liveSocket' does not exist on type 'Window...' bit, I haven’t used TS in a bit and I am a bit of a noob on that subject, but I always just worked around that with window["liveSocket"] = liveSocket;. Not sure if that is even supposed to work, but it always did the trick for me.

Again, good stuff.

1 Like
3

Yeah you have to be really careful with npm install for sure.

And the big advantage of properly augmenting the window type is that then other parts of your code will know that thing exists on window.

1 Like
4

Coming from a front end dev background, I’m really happy to see a move towards typescript on Elixir :slight_smile:

the video is great indeed, but I was a bit annoyed that we have to use casts, satisfies, etc, to correctly type hooks. So I pushed this PR on the type package: fix(phoenix-live-view): improve phoenix liveView hooks types by francois-codes · Pull Request #71190 · DefinitelyTyped/DefinitelyTyped · GitHub

I initially thought I’d offer to add these type declarations inside the phoenix framework repo, but promptly came into an issue about this where Chris closed it saying “I have no interest about that” :grimacing: so I guess it will have to live in definitely typed for now

regarding your point @arcanemachine , you need to extend the window interface like this

declare global {
  interface Window {
    liveSocket: LiveSocket
  }
}

either include this in your app.ts file, or better, in a .d.ts file referenced in the types array of your tsconfig

This is also where you can type custom phoenix events. let’s say you’re calling push_event("custom-event", args) on the elixir side, you’d probably define listeners on your ts code with

document.addEventListener("phx:custom-event", ({detail }) => { ... })

this will raise a type error because the event is not known to typescript. but you can use the same approach above and extend the WindowEventMap interface

interface EventPayload { ... }

declare global {
  interface WindowEventMap {
    'custom-event': CustomEvent<EventPayload>
  }
}

this way the argument of your event handler function will be correctly typed

2 Likes