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