MENU

Fun & Interesting

TypeScript in React - COMPLETE Tutorial (Crash Course)

ByteGrad 311,810 lฦฐแปฃt xem 1 year ago
Video Not Working? Fix It Now

๐Ÿ‘‰ 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)

Comment