Practical Typescript
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
# | 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 |