Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

⚛️ 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 görüntüleme • 1 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

5 Yorum

George Moller profil fotoğrafı
George Moller1 yıl önce

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 ↓

Andre de Waard profil fotoğrafı
Andre de Waard1 yıl önce

We don’t need this since TS 5.5 right?

Prasenjit profil fotoğrafı
Prasenjit1 yıl önce

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

Pavel Romanov profil fotoğrafı
Pavel Romanov1 yıl önce

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?

Davide Briano profil fotoğrafı
Davide Briano1 yıl önce

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

Benzer Videolar

⚛️ 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 görüntüleme • 1 yıl önce

⚛️ 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 görüntüleme • 2 yıl önce

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

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

George Moller

42,383 görüntüleme • 1 yıl önce

⚛️ 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,738 görüntüleme • 2 yıl önce

⚛️ 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 görüntüleme • 1 yıl önce

⚛️ 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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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,388 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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,241 görüntüleme • 1 yıl önce

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,121 görüntüleme • 1 yıl önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 9 ay önce

⚛️ 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 görüntüleme • 2 yıl önce

I think I figured out how to create responsive type scales with composable CSS utilities, thet lets you scale linearly between exact pixel values (this is important if you want to align exactly with a type scale, rather than just scale type on a case-by-case basis) 🧵
0:22

I think I figured out how to create responsive type scales with composable CSS utilities, thet lets you scale linearly between exact pixel values (this is important if you want to align exactly with a type scale, rather than just scale type on a case-by-case basis) 🧵

Tobias Ahlin

20,937 görüntüleme • 2 yıl önce