Practical Typescript

20h 10m 11s
English
Paid

Course description

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 212 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Practical Typescript

0:00
/
#1: Typescript Info

All Course Lessons (212)

#Lesson TitleDurationAccess
1
Typescript Info Demo
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

Unlock unlimited learning

Get instant access to all 211 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Mastering Next.js 13 with TypeScript

Mastering Next.js 13 with TypeScript

Sources: codewithmosh (Mosh Hamedani)
Clear. Concise. Comprehensive. Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's pe
5 hours 16 minutes 33 seconds
Learn React 19 with Epic React v2

Learn React 19 with Epic React v2

Sources: Kent C. Dodds
Ready for the React 19 revolution? The most in-demand JavaScript framework has received a major update! You are already familiar with React, but in React 19 the
26 hours 51 minutes 3 seconds
TypeScript Bootcamp: Zero to Mastery

TypeScript Bootcamp: Zero to Mastery

Sources: zerotomastery.io
Learn TypeScript by building your own real-world applications. Taught by an industry professional, this course covers everything from beginner to advanced topics. If you're a Ja...
9 hours 31 minutes 59 seconds
Build a Notion Clone with React and TypeScript

Build a Notion Clone with React and TypeScript

Sources: zerotomastery.io
Master React and TypeScript by building a Notion clone. Learn to use Vite for project setup and Supabase for database management. Showcase your skills with a
7 hours 57 minutes 47 seconds
Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Sources: Nomad Coders
We will do a Uber clone (backend + frontend + deployment). From head to toe using JavaScript! This time full stack, full JavaScript stack!
22 hours 41 minutes 56 seconds