Getting started with TypeScript in your Phoenix projects!

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!


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

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