TypeScript in React - COMPLETE Tutorial (Crash Course)

ByteGrad September 4, 2023
Video Thumbnail
ByteGrad Logo

ByteGrad

@bytegrad

About

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). My COMPLETE React & Next.js course is out now! Find it here: https://bytegrad.com/courses/professional-react-nextjs It's the #1 resource to master the latest React & Next.js. I'm very proud of it, my best work! Interested in sponsoring me? I love working with sponsors. Please email me here: [email protected] Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code. This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 and KRS-number: 0001125554

Video Description

👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Add auth to your app FAST: https://bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: https://bytegrad.com/courses/professional-css 👉 Discord: all my courses have a private Discord where I actively participate 🔔 Email newsletter (BIG update soon): https://email.bytegrad.com ⏱️ Timestamps: 0:00 JSX to TSX 0:28 Typing variables 1:28 Typing functions 2:55 Typing React components 3:17 React.FC 3:52 Typing props 6:37 Extracting type 7:20 Benefits of TypeScript 7:44 Optional 8:14 Benefits of TypeScript (cont.) 8:35 'any' type 9:14 Type return value of component? 9:38 Union type 10:03 Extracting type 10:45 Typing arrays 11:32 Tuple type 12:21 React.CSSProperties 14:38 Record type 16:01 Typing functions 17:18 Typing children (React.ReactNode) 18:34 React.JSX.Element vs React.ReactNode 19:42 Typing useState setter function 21:01 Default prop values 21:35 Type Alias vs Interface 24:00 ComponentPropsWithoutRef 26:52 ...rest and ...spread 27:49 Intersection (&) 29:03 Interface extends 29:34 Typing event handler functions 31:13 Typing useState hook 34:33 Typing useRef hook 35:29 'as const' 36:55 Omit utility 37:38 'as' Type Assertion 38:31 Generics (EASY!) 42:00 Generics in React 45:10 index.d.ts vs types.ts 45:34 import type 47:05 'unknown' type 48:20 Zod 48:58 ts-reset library 49:28 Third-party types ('@types' / DefinitelyTyped) 50:33 tsconfig.json 52:09 next-env.d.ts #webdevelopment #programming #coding Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code. This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 . . TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)

TypeScript & React Dev Essentials

AI-recommended products based on this video

Loading...
Magnetic Nasal Strips Starter Kit: Comfortable Nasal Breathing Support for Sleep, Helps Reduce Snoring Noise, Includes 60 Tabs (30 Uses) with 4 Sizes

Magnetic Nasal Strips Starter Kit: Comfortable Nasal Breathing Support for Sleep, Helps Reduce Snoring Noise, Includes 60 Tabs (30 Uses) with 4 Sizes

(40)
$17.99
FREE delivery Wed, Mar 18 on your first orderOnly 7 left in stock.
1K+ bought in past month
Loading...
Environet Hydroponic Growing Kit, Self-Watering Mason Jar Herb Garden Starter Kit Indoor, Windowsill Herb Garden, Grow Your Own Herbs from Organic Seeds (Basil)

Environet Hydroponic Growing Kit, Self-Watering Mason Jar Herb Garden Starter Kit Indoor, Windowsill Herb Garden, Grow Your Own Herbs from Organic Seeds (Basil)

(786)
$69.15$33.51
FREE delivery Jun 13 - 17
Loading...
Herb Garden Planter Indoor Kit 21Pcs Kitchen Herb Garden Starter Kit Growing Kit Including Wooden Box Burlap Pots Soil Discs Gardening Tools Unique Easter Birthday Christmas Gift Ideas for Women Mom

Herb Garden Planter Indoor Kit 21Pcs Kitchen Herb Garden Starter Kit Growing Kit Including Wooden Box Burlap Pots Soil Discs Gardening Tools Unique Easter Birthday Christmas Gift Ideas for Women Mom

(0)
$30.99
FREE delivery Jun 19 - Jul 3
Loading...
Bonsai Starter Kit – 1x Bonsai Tree | Complete Indoor Starter Kit for Growing Plants with Bonsai Seeds, Tools & Planters – Gardening Gifts for Women & Men
Best Seller

Bonsai Starter Kit – 1x Bonsai Tree | Complete Indoor Starter Kit for Growing Plants with Bonsai Seeds, Tools & Planters – Gardening Gifts for Women & Men

(243)
$19.99
FREE delivery Sat, Jun 14 on your first order
300+ bought in past month
Loading...
Of Course It's Good!: Aggressively Delicious Meals ANYONE Can Make and EVERYONE Will Love

Of Course It's Good!: Aggressively Delicious Meals ANYONE Can Make and EVERYONE Will Love

(668)
$29.01
FREE delivery Mon, Feb 16 on your first order
Loading...
MOTOPOWER MP69033 Car OBD2 Scanner Code Reader Engine Fault Scanner CAN Diagnostic Scan Tool for All OBD II Protocol Cars Since 1996, Yellow

MOTOPOWER MP69033 Car OBD2 Scanner Code Reader Engine Fault Scanner CAN Diagnostic Scan Tool for All OBD II Protocol Cars Since 1996, Yellow

(47,222)
$29.99
FREE delivery Sat, Jan 3 on your first order
2K+ bought in past month
Loading...
Freenove Ultimate Starter Kit for BBC micro bit (V2 Included), 316-Page Detailed Tutorial, 225 Items, 44 Projects, Blocks and Python Code

Freenove Ultimate Starter Kit for BBC micro bit (V2 Included), 316-Page Detailed Tutorial, 225 Items, 44 Projects, Blocks and Python Code

(382)
$94.95
PrimeFREE delivery Sat, Jun 14