React, TypeScript, and... Schbooleans? | Ep 8

TypeScript.fm - The Friendly Show for TypeScript Developers

This week Kamran dives into some nuances with using React with TypeScript while Erik plays the React fool and coins the word "schbooleans" (yep). In the news, erasableSyntaxOnly gets shipped, some new minor releases in the ecosystem, and oh, TypeScript types can run DOOM. Yes, TS is a real language now.

Erik's News

• Personal Blog Post: The Best Worst Year
• Happy New Year Excalibur!
• Excalibur 2024 Community Reel
• Erik didn't finish the flappy bird vid or lighting feature in time, consolation prize
  • Flappy Bird Article
• Excalibur Lighting PRs: Pipeline & PoC

Week of February 24, 2025

• (04:16) - News: TypeScript 5.8 Released
  • userland-codemods for transforming import extensions to ".ts"
• (06:32) - News: Bun 1.2.4 Released
• (08:01) - News: Next.js 15.2 Released
• (09:29) - News: Astro 5.4 Released
• (09:49) - News: React Router 7.2 Released
• (10:25) - News: ArkType 2.1 Released
• (11:23) - News: Mozilla's Firefox Privacy Policy Rug-pull
• (14:32) - News: Warp Terminal is Now Available on Windows
• (15:55) - Community Highlights: TypeScript Types Can Run DOOM (!?)
  • Write-up by Simon Willison
  • Write-up on Socket.dev
  • Mark Seeman's series (and course) on type-driven development (F#)
• (20:24) - Community Highlights: Dr. Axel's Corner
  • free-typescript-resources Gist
  • Testing Types and asserttt
• (22:19) - Community Highlights: Safety-Web ESLint Plugin
• (23:27) - Community Highlights: Pattern for Strongly Typed Event Emitters
• (24:20) - Community Highlights: Websocks, a Typed WebSockets Router for Node

Deep Dive: TypeScript and React Nuances

• (26:17) - Deep Dive: TypeScript and React
• (27:26) - Deep Dive: What You Need to Know First
  • Using Vite react-ts template
• (28:27) - Deep Dive: TSConfig Options for React and TS
• (32:55) - Deep Dive: How JSX/TSX Works Under the Hood
  • Deno has native support for TSX/JSX
  • And so does Bun
• (35:03) - Deep Dive: TSX in Different Runtimes
• (35:39) - Deep Dive: Typing Components and Props
  • Example of leaning on inference
• (38:12) - Deep Dive: Typing the Children Prop
• (40:13) - Deep Dive: Where Should Typings Go?
• (41:05) - Deep Dive: Should I Use React Class Components?
• (43:21) - Deep Dive: Typing Events and Callbacks
• (46:59) - Deep Dive: Typing Data and APIs
• (48:41) - Deep Dive: Typing Form Actions and "Schbooleans"
• (51:19) - Deep Dive: Typing State and Set-state Actions
• (54:11) - Deep Dive: Typing Contexts
• (54:49) - Deep Dive: Typing Refs and DOM Attributes
• (58:19) - Deep Dive: Sharing Typed Components in Libraries
• (59:56) - Deep Dive: Takeaways / tl;dl
• Resource: React and TS Cheatsheets
• Resource: Using React with TypeScript guided code lab on Pluralsight (requires subscription)

Secrets of the Handbook

• (01:01:30) - Secrets of the Handbook: Our Favorite Utility Types

Links

• (01:04:13) - Cool Stuff: Kamran's been playing Avowed and Pillars of Eternity
• (01:05:25) - Cool Stuff: Erik's spreads his stink with