Mô tả

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.

Bạn sẽ học được gì

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.

Yêu cầu

  • Knowledge of Javascript

Nội dung khoá học

6 sections

Introduction

1 lectures
Typescript Info
02:50

Setup

4 lectures
Useful Info
02:06
Template
04:07
Files and Folders
05:56
Build Step
03:56

Typescript Fundamentals

84 lectures
Type Annotations
04:41
Type Inference
01:37
First Challenge
03:27
Setup Info
03:02
Union Type
04:15
Type : Any
03:24
Practical Example
05:34
Challenge - Union Type
02:00
Arrays
04:48
Challenge - Arrays
02:03
Object Fundamentals
08:07
Challenge - Objects
03:32
Functions - Parameters
04:56
Functions - Returns
04:03
Type : Any Example
03:12
Challenge - Functions 1
03:45
Functions - Optional Parameters
02:28
Functions - Default Parameters
02:31
Functions - Rest Parameter
06:05
Functions - Void Keyword
01:46
Functions - Type Guards
04:05
Functions - Objects As Parameters
05:57
Excess Property Check
02:38
Challenge - Functions II
06:03
Type Alias
05:09
Type Alias - Additional Info
02:42
Challenge - Type Alias
07:29
Intersection Type
03:50
Computed Properties
01:29
Interface - Fundamentals
05:05
Interface - Methods
05:32
Interface Methods - More Options
06:49
Callenge - Interface I
03:46
Interface - Merge and Extend
11:03
Challenge - Interface II
07:42
Interface - Type Predicate
05:04
Interface vs Type Alias
02:11
Tuple
05:10
Enum - Fundamentals
04:32
Enum - Reverse Mapping
04:22
Challenge - Tuple and Enum
03:13
Type Assertion
07:56
Type - Unknown
06:16
Type - Never
08:31
Modules - Intro
05:11
Modules - ES6
07:21
Modules - JS File
03:40
Type Guards - Typeof
04:15
Type Guards - Equality and "in"
03:50
Type Guards - Truthy and Falsy
03:01
Type Guards - Instanceof
05:18
Type Guards - Type Predicate
04:53
Type "never" Gotcha
02:57
Type Guards - Discriminated Unions
07:35
Generics - Intro
07:59
Generics - First Function and Interface
05:33
Generics - Promise Example
04:15
Generics - Create Array
05:13
Generics - Multiple Types
02:11
Generics - Type Constraints
04:08
Generics - Type Constraints Second Example
03:46
Generics - Default Type
06:15
Fetch Data - Basics
07:04
Fetch Data - Setup Type
03:02
Fetch Data - Gotcha
02:02
Zod Library
08:17
Declaration Files
08:51
TS Config
03:21
Classes - Intro
02:56
Classes - Default Property
02:25
Classes - Readonly Modifier
00:54
Classes - Public and Private Modifiers
04:38
Classes - Constructor Shortcut
03:16
Classes - Getters and Setters
05:13
Classes - Implement Interface
02:47
Tasks Project - Setup
07:37
Tasks Project - Useful Info
10:13
Tasks Project - Select Elements
04:35
Tasks Project - Submit Event
03:22
Tasks Project - Event Gotcha
02:17
Tasks Project - Add Task
02:15
Tasks Project - Render Task
02:40
Tasks Project - Local Storage
05:35
Tasks Project - Checkbox
03:22

Typescript and React

30 lectures
Setup
01:58
Files and Folders
06:18
Component Return
04:35
Props - Inline
05:02
Props - Type Alias / Interface
01:41
Children Prop
05:55
State
07:13
State - Custom List
04:35
Events - Change Event
06:31
Events - Form Event
09:21
Challenge - Intro
02:58
Challenge - First Solution
07:20
Challenge - Alternative Solution
01:33
Challenge - Typescript Solution
05:14
Context API - Basic Example
11:27
Context API - Theme Example
06:47
useReducer - Setup
05:02
useReducer - Counter
04:36
useReducer - Status
04:40
Fetch Data - UseEffect and Fetch API
08:07
Fetch Data - Type and Schema
06:36
Fetch Data - React Query and Axios
09:20
RTK - Slice
11:08
RTK - Setup
04:58
RTK - Complete
03:50
Tasks Project - Setup
04:06
Tasks Project - Form Setup
04:00
Tasks Project - Add Task
03:15
Tasks Project - List
05:47
Tasks Project - Local Storage
03:28

Store App

93 lectures
Intro
02:19
Install/Setup
02:14
Boilerplate
05:25
Tailwind Intro
01:13
Tailwind Info
09:31
Tailwind Install
02:43
Shadcn/ui Install
07:58
Shadcn/ui Info
08:46
Redux Toolkit - Setup
08:02
Create Pages
08:29
React Router - Setup
04:34
Link Component
04:58
Outlet Component - Shared Layout
10:19
Header Component
12:00
Tailwind Custom Class
02:38
Navbar Component - Setup
07:43
Logo Component
03:18
Links List
03:56
Links Dropdown Component
09:30
NavLinks Component
03:03
Change Theme
02:42
ApplyTheme Function
05:24
Theme Slice
04:11
ModeToggle Component
04:41
CartButton Component
02:59
ErrorPage Component
09:30
About Page Component
02:40
Error Element Component
05:15
Landing Page - Setup
03:16
Custom Fetch Function
03:45
Product Types
04:28
Loader Function
04:43
Landing Page - Loader
10:39
Section Title
05:06
FormatAsDollars Function
04:27
Products Grid Component
07:50
Hero Component
03:42
Hero Carousel
06:05
Products Page - Setup
08:16
Products List Component
08:17
Products Container Component
14:40
Global Loading - Setup
05:21
Loading Component
06:32
Filters Component - Setup
13:49
Query Params
06:50
Default Value
06:03
Form Input
06:29
Form Select
12:42
Form Range
10:56
Form Checkbox
06:26
Pagination Container - Setup
04:44
Construct URL - Setup
05:48
Pagination Container
13:05
Construct URL - Complete
09:30
React Router - URL Params
04:25
Single Product Page - Setup
06:11
Fetch Single Product
07:05
Single Product Page - Render Image and Info
08:46
Select Product Colors Component
07:59
Select Product Amount Component
15:05
Toast Component
04:05
Cart Slice - Setup
07:48
Add Item - Reducer
07:14
Clear Cart - Reducer
01:14
Delete Item - Reducer
04:15
Edit Item - Reducer
03:02
AddToCart Functionality
07:23
Cart Page - Setup
09:02
Cart Totals Component
05:48
Cart Items List
09:07
First Column
01:51
Second Column
09:33
Third and Fourth Column
09:41
User Slice
09:43
Register and Login Request API Info
03:27
Register Page Setup
06:58
Register User Action
07:47
Register User Request
10:30
Submit Button Component
07:05
Login Page Setup
06:18
Login Guest User Request
08:13
Login User Action and Request
10:45
Access User in Header Component
04:38
Access User in NavLinks, LinksDropdown and CartButton Components
04:55
Checkout Page Setup
07:44
Checkout Page Loader
03:05
Checkout Form Component Setup
06:12
Checkout Form Action
13:19
OrdersResponse Type
02:17
Orders Page Loader
09:54
Orders List Component
08:26
Complex Pagination Component
15:26
Deploy Application
08:28

Bonus

1 lectures
Bonus
00:11

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.