Practical Typescript

20h 10m 11s
English
Paid
July 23, 2024

Dive into the world of TypeScript with our "Practical TypeScript" course, designed for developers seeking a comprehensive understanding from the basics to advanced concepts. This course begins with setting up a TypeScript project using Vite, guiding you through a series of tutorials that cover essential TypeScript features and best practices.

You'll learn about type annotations, type inference, and the practical applications of type annotation, along with an exploration of union types and the handling of "any", "unknown", and "never" types. The course also covers the fundamentals of arrays and objects, and introduces challenges to reinforce learning. Additionally, you'll delve into the complexities of functions in TypeScript.

As you advance, the course explores more sophisticated TypeScript features, such as generics, fetching data with TypeScript, and working with the Zod library for data validation. You'll also gain insights into TypeScript declaration files and class-based programming with TypeScript. Each tutorial is designed to provide hands-on experience, enabling you to effectively apply TypeScript features in real-world scenarios.

Furthermore, this course extends to integrating TypeScript with React, covering component structure, prop handling, state management, event handling, and complex component structures. You'll learn about using React's Context API, reducers, and global state management in a TypeScript environment, as well as data fetching and validation techniques. The course concludes with a practical task management application, highlighting the use of localStorage and task state management.

Finally, the course culminates in building a modern store application with TypeScript, Shadcn/ui, and React Router, incorporating features such as authentication and pagination. Join us in "Practical TypeScript" to elevate your skills and confidently apply TypeScript in your development projects, from basic to advanced levels.

Watch Online Practical Typescript

Join premium to watch
Go to premium
# Title Duration
1 Typescript Info 02:51
2 Useful Info 02:07
3 Template 04:08
4 Files and Folders 05:57
5 Build Step 03:58
6 Type Annotations 04:42
7 Type Inference 01:38
8 First Challenge 03:28
9 Setup Info 03:03
10 Union Type 04:16
11 Type : Any 03:25
12 Practical Example 05:36
13 Challenge - Union Type 02:01
14 Arrays 04:49
15 Challenge - Arrays 02:04
16 Object Fundamentals 08:09
17 Challenge - Objects 03:33
18 Functions - Parameters 04:57
19 Functions - Returns 04:04
20 Type : Any Example 03:13
21 Challenge - Functions 1 03:46
22 Functions - Optional Parameters 02:29
23 Functions - Default Parameters 02:32
24 Functions - Rest Parameter 06:06
25 Functions - Void Keyword 01:47
26 Functions - Type Guards 04:06
27 Functions - Objects As Parameters 05:58
28 Excess Property Check 02:39
29 Challenge - Functions II 06:04
30 Type Alias 05:10
31 Type Alias - Additional Info 02:43
32 Challenge - Type Alias 07:31
33 Intersection Type 03:51
34 Computed Properties 01:30
35 Interface - Fundamentals 05:06
36 Interface - Methods 05:33
37 Interface Methods - More Options 06:50
38 Callenge - Interface I 03:47
39 Interface - Merge and Extend 11:04
40 Challenge - Interface II 07:43
41 Interface - Type Predicate 05:05
42 Interface vs Type Alias 02:12
43 Tuple 05:11
44 Enum - Fundamentals 04:34
45 Enum - Reverse Mapping 04:23
46 Challenge - Tuple and Enum 03:14
47 Type Assertion 07:57
48 Type - Unknown 06:18
49 Type - Never 08:32
50 Modules - Intro 05:12
51 Modules - ES6 07:22
52 Modules - JS File 03:42
53 Type Guards - Typeof 04:16
54 Type Guards - Equality and "in" 03:51
55 Type Guards - Truthy and Falsy 03:02
56 Type Guards - Instanceof 05:19
57 Type Guards - Type Predicate 04:54
58 Type "never" Gotcha 02:58
59 Type Guards - Discriminated Unions 07:36
60 Generics - Intro 08:00
61 Generics - First Function and Interface 05:34
62 Generics - Promise Example 04:16
63 Generics - Create Array 05:14
64 Generics - Multiple Types 02:12
65 Generics - Type Constraints 04:09
66 Generics - Type Constraints Second Example 03:47
67 Generics - Default Type 06:16
68 Fetch Data - Basics 07:05
69 Fetch Data - Setup Type 03:03
70 Fetch Data - Gotcha 02:03
71 Zod Library 08:18
72 Declaration Files 08:52
73 TS Config 03:22
74 Classes - Intro 02:57
75 Classes - Default Property 02:26
76 Classes - Readonly Modifier 00:55
77 Classes - Public and Private Modifiers 04:39
78 Classes - Constructor Shortcut 03:17
79 Classes - Getters and Setters 05:14
80 Classes - Implement Interface 02:48
81 Tasks Project - Setup 07:38
82 Tasks Project - Useful Info 10:14
83 Tasks Project - Select Elements 04:36
84 Tasks Project - Submit Event 03:23
85 Tasks Project - Event Gotcha 02:18
86 Tasks Project - Add Task 02:17
87 Tasks Project - Render Task 02:41
88 Tasks Project - Local Storage 05:36
89 Tasks Project - Checkbox 03:23
90 Setup 01:59
91 Files and Folders 06:19
92 Component Return 04:36
93 Props - Inline 05:03
94 Props - Type Alias / Interface 01:42
95 Children Prop 05:56
96 State 07:14
97 State - Custom List 04:36
98 Events - Change Event 06:32
99 Events - Form Event 09:22
100 Challenge - Intro 02:59
101 Challenge - First Solution 07:21
102 Challenge - Alternative Solution 01:34
103 Challenge - Typescript Solution 05:15
104 Context API - Basic Example 11:28
105 Context API - Theme Example 06:48
106 useReducer - Setup 05:03
107 useReducer - Counter 04:37
108 useReducer - Status 04:41
109 Fetch Data - UseEffect and Fetch API 08:08
110 Fetch Data - Type and Schema 06:37
111 Fetch Data - React Query and Axios 09:21
112 RTK - Slice 11:09
113 RTK - Setup 04:59
114 RTK - Complete 03:51
115 Tasks Project - Setup 04:07
116 Tasks Project - Form Setup 04:01
117 Tasks Project - Add Task 03:16
118 Tasks Project - List 05:48
119 Tasks Project - Local Storage 03:29
120 Intro 02:20
121 Install/Setup 02:15
122 Boilerplate 05:26
123 Tailwind Intro 01:14
124 Tailwind Info 09:33
125 Tailwind Install 02:44
126 Shadcn/ui Install 07:59
127 Shadcn/ui Info 08:47
128 Redux Toolkit - Setup 08:04
129 Create Pages 08:30
130 React Router - Setup 04:35
131 Link Component 04:59
132 Outlet Component - Shared Layout 10:20
133 Header Component 12:01
134 Tailwind Custom Class 02:39
135 Navbar Component - Setup 07:44
136 Logo Component 03:19
137 Links List 03:57
138 Links Dropdown Component 09:32
139 NavLinks Component 03:04
140 Change Theme 02:43
141 ApplyTheme Function 05:25
142 Theme Slice 04:12
143 ModeToggle Component 04:42
144 CartButton Component 03:00
145 ErrorPage Component 09:32
146 About Page Component 02:41
147 Error Element Component 05:16
148 Landing Page - Setup 03:17
149 Custom Fetch Function 03:46
150 Product Types 04:29
151 Loader Function 04:44
152 Landing Page - Loader 10:40
153 Section Title 05:07
154 FormatAsDollars Function 04:28
155 Products Grid Component 07:51
156 Hero Component 03:43
157 Hero Carousel 06:06
158 Products Page - Setup 08:18
159 Products List Component 08:18
160 Products Container Component 14:41
161 Global Loading - Setup 05:22
162 Loading Component 06:33
163 Filters Component - Setup 13:50
164 Query Params 06:51
165 Default Value 06:05
166 Form Input 06:30
167 Form Select 12:43
168 Form Range 10:57
169 Form Checkbox 06:27
170 Pagination Container - Setup 04:45
171 Construct URL - Setup 05:49
172 Pagination Container 13:06
173 Construct URL - Complete 09:31
174 React Router - URL Params 04:26
175 Single Product Page - Setup 06:12
176 Fetch Single Product 07:06
177 Single Product Page - Render Image and Info 08:47
178 Select Product Colors Component 08:00
179 Select Product Amount Component 15:06
180 Toast Component 04:07
181 Cart Slice - Setup 07:49
182 Add Item - Reducer 07:15
183 Clear Cart - Reducer 01:15
184 Delete Item - Reducer 04:16
185 Edit Item - Reducer 03:03
186 AddToCart Functionality 07:24
187 Cart Page - Setup 09:03
188 Cart Totals Component 05:50
189 Cart Items List 09:08
190 First Column 01:52
191 Second Column 09:34
192 Third and Fourth Column 09:42
193 User Slice 09:44
194 Register and Login Request API Info 03:28
195 Register Page Setup 06:59
196 Register User Action 07:48
197 Register User Request 10:31
198 Submit Button Component 07:06
199 Login Page Setup 06:19
200 Login Guest User Request 08:14
201 Login User Action and Request 10:46
202 Access User in Header Component 04:39
203 Access User in NavLinks, LinksDropdown and CartButton Components 04:56
204 Checkout Page Setup 07:45
205 Checkout Page Loader 03:06
206 Checkout Form Component Setup 06:13
207 Checkout Form Action 13:20
208 OrdersResponse Type 02:18
209 Orders Page Loader 09:55
210 Orders List Component 08:27
211 Complex Pagination Component 15:27
212 Deploy Application 08:29

Similar courses to Practical Typescript

TypeScript course

TypeScript courseui.dev (ex. Tyler McGinnis)

Duration 6 hours 27 minutes 32 seconds
TypeScript Bootcamp: Zero to Mastery

TypeScript Bootcamp: Zero to Masteryzerotomastery.io

Duration 9 hours 31 minutes 59 seconds
Understanding TypeScript - 2023 Edition

Understanding TypeScript - 2023 EditionudemyAcademind Pro

Duration 14 hours 54 minutes 54 seconds