CF

Practical Typescript

20h 10m 11s
English
Paid

Embark on a comprehensive journey into the world of TypeScript with our "Practical TypeScript" course. This course is crafted for developers aiming to gain a deep understanding of TypeScript from the basics to advanced levels. You'll start by setting up a TypeScript project using Vite and continue through a series of tutorials, exploring essential features and best practices.

Foundational Concepts

Learn the core aspects of TypeScript, including:

  • Type Annotations and Inference: Understand how to use type annotations and the benefits of type inference.
  • Union Types: Explore how to work with union types effectively.
  • Handling Special Types: Gain confidence in using "any", "unknown", and "never" types appropriately.
  • Arrays and Objects: Cover the basics of managing arrays and objects in TypeScript with practice challenges.

Deep Dive into Functions

Delve into the intricacies of functions in TypeScript, enhancing your ability to implement complex logic seamlessly.

Advanced TypeScript Features

As you progress, the course introduces more advanced features:

  • Generics: Learn about the power and flexibility generics bring to your code.
  • Data Fetching: Implement data fetching with TypeScript for robust and type-safe operations.
  • Data Validation with Zod: Use the Zod library to ensure reliable data validation.
  • Declaration Files: Understand and utilize TypeScript declaration files in your projects.
  • Class-Based Programming: Gain skills in class-based programming using TypeScript.

Integrating with React

Expand your skills by integrating TypeScript with React:

  • Component Structure and Prop Handling: Build scalable React components with TypeScript.
  • State and Event Handling: Manage state and handle events efficiently in React applications using TypeScript.
  • Advanced Component Structures: Tackle complex component setups, utilizing React's Context API and reducers for global state management.
  • Data Fetching and Validation: Implement robust strategies for fetching and validating data in a TypeScript environment.

Final Projects

Conclude your learning with real-world applications:

  1. Task Management Application: Develop a task management app utilizing localStorage and task state management.
  2. Modern Store Application: Build a modern store app using TypeScript, Shadcn/ui, and React Router, featuring authentication and pagination functionalities.

Join us in the "Practical TypeScript" course to elevate your development skills. Master TypeScript from the ground up and apply it confidently in your projects, advancing from basic to sophisticated technologies.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 212 lessons

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
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

Related courses

Frequently asked questions

What prerequisites should I have before enrolling in the course?
Before enrolling in this course, it's beneficial to have a basic understanding of JavaScript, as TypeScript builds on JavaScript's syntax and features. Familiarity with programming concepts such as functions, arrays, and objects will also be helpful, as these are foundational elements covered in the course.
What projects or exercises will I work on during the course?
Throughout the course, you will encounter various practical challenges and examples that help solidify your understanding of TypeScript concepts. These include tasks related to type annotations, handling special types like 'any' and 'unknown', working with arrays and objects, and implementing functions with parameters and returns.
Who is the target audience for this TypeScript course?
This course is designed for developers who want to gain a comprehensive understanding of TypeScript, from beginners to those with some experience looking to deepen their knowledge. It's suitable for anyone interested in building robust, type-safe applications.
What advanced TypeScript features will be covered?
As you progress through the course, you'll explore advanced TypeScript features such as generics, data validation using the Zod library, and creating and utilizing declaration files. These topics will help you handle complex data structures and ensure reliable data validation in your projects.
What tools or platforms will I use in this course?
The course will guide you through setting up a TypeScript project using Vite, a modern build tool that provides an efficient development environment. Additionally, you'll learn to implement data validation with the Zod library, ensuring your applications handle data safely and effectively.
How does this course compare to other TypeScript courses?
This course offers a detailed journey from foundational to advanced concepts in TypeScript, with a total of 212 lessons. It's structured to provide hands-on experience through challenges and practical examples, focusing on both basic and sophisticated TypeScript features not always covered in other offerings.
What is not covered in this TypeScript course?
While the course covers a wide range of TypeScript topics, it does not delve into integrating TypeScript with specific frameworks like Angular or React. The focus is primarily on TypeScript itself, its syntax, features, and best practices for standalone projects.