Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

⚛️ How to use TypeScript type predicates in React to create a more robust, type-safe, and maintainable component. (this pattern is particularly useful when dealing with discriminated unions or when you need to narrow types based on runtime checks)

_georgemoller's profile picture

George Moller

119,062 subscribers

29,508 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

5 Kommentare

Profilbild von George Moller
George Mollervor 1 Jahr

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics and 70+ video tutorials just like this one. Check them out ↓

Profilbild von Andre de Waard
Andre de Waardvor 1 Jahr

We don’t need this since TS 5.5 right?

Profilbild von Prasenjit
Prasenjitvor 1 Jahr

Thank you for the check, it's going to be useful.

Profilbild von Pavel Romanov
Pavel Romanovvor 1 Jahr

Strange, I've just tested it in TS playground and stackblitz React playground and it narrows the type correctly (with the latest TS version). Maybe it is a problem of some older TS version or less strict TS complier config?

Profilbild von Davide Briano
Davide Brianovor 1 Jahr

This is automatically narrowed with the latest TS version now 👌🏻

Ähnliche Videos

⚛️ How to use discriminated unions in TypeScript to represent mutually exclusive states in React↓
1:09

⚛️ How to use discriminated unions in TypeScript to represent mutually exclusive states in React↓

George Moller

28,192 Aufrufe • vor 1 Jahr

⚛️ React + Typescript tip: Creating dynamic prop types for components with Discriminated Unions ↓
0:51

⚛️ React + Typescript tip: Creating dynamic prop types for components with Discriminated Unions ↓

George Moller

77,657 Aufrufe • vor 2 Jahren

⚛️ How to use conditional types in TypeScript and React ↓
1:26

⚛️ How to use conditional types in TypeScript and React ↓

George Moller

42,383 Aufrufe • vor 1 Jahr

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓
0:32

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓

George Moller

89,528 Aufrufe • vor 1 Jahr

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓
0:32

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓

George Moller

57,741 Aufrufe • vor 2 Jahren

⚛️ Use TypeScript utility types like Omit to create more reusable and adaptable components ↓
0:24

⚛️ Use TypeScript utility types like Omit to create more reusable and adaptable components ↓

George Moller

50,210 Aufrufe • vor 1 Jahr

I wrote a 2D game, entirely in type-level Typescript. Yes, you read that right. This is flappy bird, written only in Typescript types. How did I do it? It involves a lot of type magic, and a new type-level Typescript runtime I made in Rust + Zig. Let me walk you through it:
0:23

I wrote a 2D game, entirely in type-level Typescript. Yes, you read that right. This is flappy bird, written only in Typescript types. How did I do it? It involves a lot of type magic, and a new type-level Typescript runtime I made in Rust + Zig. Let me walk you through it:

zack

625,414 Aufrufe • vor 2 Jahren

Do you know about ReturnType in TypeScript? What about Awaited or Parameters? Utility types can unlock a lot of power to keep your code type safe, even when your npm packages aren't perfect More magic you can do with utility types in my latest article:
2:50

Do you know about ReturnType in TypeScript? What about Awaited or Parameters? Utility types can unlock a lot of power to keep your code type safe, even when your npm packages aren't perfect More magic you can do with utility types in my latest article:

Steve (Builder.io)

268,398 Aufrufe • vor 3 Jahren

Some VINTAGE TypeScript magic. Here's how to create a type-safe version of Object.assign, with an arbitrary number of objects.
3:32

Some VINTAGE TypeScript magic. Here's how to create a type-safe version of Object.assign, with an arbitrary number of objects.

Matt Pocock

38,013 Aufrufe • vor 1 Jahr

There are different types of OS, you need to know the type you’re dealing with 🙈
0:44

There are different types of OS, you need to know the type you’re dealing with 🙈

Minister For Ashawo

31,083 Aufrufe • vor 8 Monaten

How to indicate a server component needs to be rendered dynamically at runtime, when it doesn't use dynamic APIs in Nextjs
0:20

How to indicate a server component needs to be rendered dynamically at runtime, when it doesn't use dynamic APIs in Nextjs

Alex Sidorenko

44,635 Aufrufe • vor 9 Monaten

GraphQL to TypeScript type, no code gen. Written purely in TypeScript type. With Prisma-like query syntax fully type-safe. Should cover almost all of the GraphQL specs, now. Here's a demo.
1:45

GraphQL to TypeScript type, no code gen. Written purely in TypeScript type. With Prisma-like query syntax fully type-safe. Should cover almost all of the GraphQL specs, now. Here's a demo.

SaltyAom

100,697 Aufrufe • vor 2 Jahren

Everything in life follows a pattern. 🔃 When you recognize the pattern, fear disappears. When you learn to use the pattern, you gain power. When you create the pattern, you dominate. #UnleashthePowerWithin
1:22

Everything in life follows a pattern. 🔃 When you recognize the pattern, fear disappears. When you learn to use the pattern, you gain power. When you create the pattern, you dominate. #UnleashthePowerWithin

Tony Robbins

60,892 Aufrufe • vor 1 Jahr

Cline now uses Anthropic's new "Computer Use" feature to launch a browser, click, type, and scroll. This gives him more autonomy in runtime debugging, end-to-end testing, and even general web use!
2:53

Cline now uses Anthropic's new "Computer Use" feature to launch a browser, click, type, and scroll. This gives him more autonomy in runtime debugging, end-to-end testing, and even general web use!

Saoud Rizwan

66,247 Aufrufe • vor 1 Jahr

In TypeScript, interfaces and types are often interchangeable. But these are 6 features that only work with a type alias. Clip from "TypeScript: Getting Started" on Dometrain
1:19

In TypeScript, interfaces and types are often interchangeable. But these are 6 features that only work with a type alias. Clip from "TypeScript: Getting Started" on Dometrain

Cory House

56,130 Aufrufe • vor 1 Jahr

Sehun suddenly asked Yijin's blood type and Jongin said Sehun doesn't believe in MBTIs at all but is obsessed with blood types 😭 🐥: What is Yijin's blood type? 👤: *flustered*... why? 🧸: He's obsessed with blood types! He doesn't even believe in MBTIs, he believes in blood types! 👤: Which blood type do you think is the best? 🐥: Either type O or type A 🧸: Do you know why? Because he's type O, so he thinks type O is the best! 👤: Try guessing Yijin's blood type! 🐥: I asked because i think he's either type O or type A! 🧸🍼: *busy playing on their own* 🐥: *still trying to guess Yijin's blood type*
0:32

Sehun suddenly asked Yijin's blood type and Jongin said Sehun doesn't believe in MBTIs at all but is obsessed with blood types 😭 🐥: What is Yijin's blood type? 👤: *flustered*... why? 🧸: He's obsessed with blood types! He doesn't even believe in MBTIs, he believes in blood types! 👤: Which blood type do you think is the best? 🐥: Either type O or type A 🧸: Do you know why? Because he's type O, so he thinks type O is the best! 👤: Try guessing Yijin's blood type! 🐥: I asked because i think he's either type O or type A! 🧸🍼: *busy playing on their own* 🐥: *still trying to guess Yijin's blood type*

큥베리 | Grace 💫

34,464 Aufrufe • vor 7 Monaten

Today we’re excited to introduce GenSX, an open source TypeScript framework for building backend workflows and agents with reusable, React-like components. If you know how to write a React component, then you’ll feel right at home building agents in GenSX.
6:08

Today we’re excited to introduce GenSX, an open source TypeScript framework for building backend workflows and agents with reusable, React-like components. If you know how to write a React component, then you’ll feel right at home building agents in GenSX.

Evan Boyle

14,446 Aufrufe • vor 1 Jahr

Stop grouping your Unity Addressables by asset type! 🛑 For peak performance, organize your assets based on when they’re needed at runtime. In this quick tip, you’ll learn how to optimize your asset management workflow. 🔗 Watch the full tutorial:
1:00

Stop grouping your Unity Addressables by asset type! 🛑 For peak performance, organize your assets based on when they’re needed at runtime. In this quick tip, you’ll learn how to optimize your asset management workflow. 🔗 Watch the full tutorial:

Unity for Games

15,712 Aufrufe • vor 6 Tagen

How to use SketchUp to create a stone railing along a curved balcony. I hope this tutorial is useful and helpful for you
1:01

How to use SketchUp to create a stone railing along a curved balcony. I hope this tutorial is useful and helpful for you

Qiandra

17,049 Aufrufe • vor 9 Monaten

⚛️ How to keep you imports tidy and clean in React ↓
0:34

⚛️ How to keep you imports tidy and clean in React ↓

George Moller

43,401 Aufrufe • vor 2 Jahren