Practical Typescript

Unleash the Power of TypeScript: Dive into Type Annotations, Generics, React Integration, and Build Modern Apps

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.

Requirements

Knowledge of Javascript

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.

Overview

Section 1: Introduction

Lecture 1 Typescript Info

Section 2: Setup

Lecture 2 Useful Info

Lecture 3 Template

Lecture 4 Files and Folders

Lecture 5 Build Step

Section 3: Typescript Fundamentals

Lecture 6 Type Annotations

Lecture 7 Type Inference

Lecture 8 First Challenge

Lecture 9 Setup Info

Lecture 10 Union Type

Lecture 11 Type : Any

Lecture 12 Practical Example

Lecture 13 Challenge - Union Type

Lecture 14 Arrays

Lecture 15 Challenge - Arrays

Lecture 16 Object Fundamentals

Lecture 17 Challenge - Objects

Lecture 18 Functions - Parameters

Lecture 19 Functions - Returns

Lecture 20 Type : Any Example

Lecture 21 Challenge - Functions 1

Lecture 22 Functions - Optional Parameters

Lecture 23 Functions - Default Parameters

Lecture 24 Functions - Rest Parameter

Lecture 25 Functions - Void Keyword

Lecture 26 Functions - Type Guards

Lecture 27 Functions - Objects As Parameters

Lecture 28 Excess Property Check

Lecture 29 Challenge - Functions II

Lecture 30 Type Alias

Lecture 31 Type Alias - Additional Info

Lecture 32 Challenge - Type Alias

Lecture 33 Intersection Type

Lecture 34 Computed Properties

Lecture 35 Interface - Fundamentals

Lecture 36 Interface - Methods

Lecture 37 Interface Methods - More Options

Lecture 38 Callenge - Interface I

Lecture 39 Interface - Merge and Extend

Lecture 40 Challenge - Interface II

Lecture 41 Interface - Type Predicate

Lecture 42 Interface vs Type Alias

Lecture 43 Tuple

Lecture 44 Enum - Fundamentals

Lecture 45 Enum - Reverse Mapping

Lecture 46 Challenge - Tuple and Enum

Lecture 47 Type Assertion

Lecture 48 Type - Unknown

Lecture 49 Type - Never

Lecture 50 Modules - Intro

Lecture 51 Modules - ES6

Lecture 52 Modules - JS File

Lecture 53 Type Guards - Typeof

Lecture 54 Type Guards - Equality and "in"

Lecture 55 Type Guards - Truthy and Falsy

Lecture 56 Type Guards - Instanceof

Lecture 57 Type Guards - Type Predicate

Lecture 58 Type "never" Gotcha

Lecture 59 Type Guards - Discriminated Unions

Lecture 60 Generics - Intro

Lecture 61 Generics - First Function and Interface

Lecture 62 Generics - Promise Example

Lecture 63 Generics - Create Array

Lecture 64 Generics - Multiple Types

Lecture 65 Generics - Type Constraints

Lecture 66 Generics - Type Constraints Second Example

Lecture 67 Generics - Default Type

Lecture 68 Fetch Data - Basics

Lecture 69 Fetch Data - Setup Type

Lecture 70 Fetch Data - Gotcha

Lecture 71 Zod Library

Lecture 72 Declaration Files

Lecture 73 TS Config

Lecture 74 Classes - Intro

Lecture 75 Classes - Default Property

Lecture 76 Classes - Readonly Modifier

Lecture 77 Classes - Public and Private Modifiers

Lecture 78 Classes - Constructor Shortcut

Lecture 79 Classes - Getters and Setters

Lecture 80 Classes - Implement Interface

Lecture 81 Tasks Project - Setup

Lecture 82 Tasks Project - Useful Info

Lecture 83 Tasks Project - Select Elements

Lecture 84 Tasks Project - Submit Event

Lecture 85 Tasks Project - Event Gotcha

Lecture 86 Tasks Project - Add Task

Lecture 87 Tasks Project - Render Task

Lecture 88 Tasks Project - Local Storage

Lecture 89 Tasks Project - Checkbox

Section 4: Typescript and React

Lecture 90 Setup

Lecture 91 Files and Folders

Lecture 92 Component Return

Lecture 93 Props - Inline

Lecture 94 Props - Type Alias / Interface

Lecture 95 Children Prop

Lecture 96 State

Lecture 97 State - Custom List

Lecture 98 Events - Change Event

Lecture 99 Events - Form Event

Lecture 100 Challenge - Intro

Lecture 101 Challenge - First Solution

Lecture 102 Challenge - Alternative Solution

Lecture 103 Challenge - Typescript Solution

Lecture 104 Context API - Basic Example

Lecture 105 Context API - Theme Example

Lecture 106 useReducer - Setup

Lecture 107 useReducer - Counter

Lecture 108 useReducer - Status

Lecture 109 Fetch Data - UseEffect and Fetch API

Lecture 110 Fetch Data - Type and Schema

Lecture 111 Fetch Data - React Query and Axios

Lecture 112 RTK - Slice

Lecture 113 RTK - Setup

Lecture 114 RTK - Complete

Lecture 115 Tasks Project - Setup

Lecture 116 Tasks Project - Form Setup

Lecture 117 Tasks Project - Add Task

Lecture 118 Tasks Project - List

Lecture 119 Tasks Project - Local Storage

Section 5: Store App

Lecture 120 Intro

Lecture 121 Install/Setup

Lecture 122 Boilerplate

Lecture 123 Tailwind Intro

Lecture 124 Tailwind Info

Lecture 125 Tailwind Install

Lecture 126 Shadcn/ui Install

Lecture 127 Shadcn/ui Info

Lecture 128 Redux Toolkit - Setup

Lecture 129 Create Pages

Lecture 130 React Router - Setup

Lecture 131 Link Component

Lecture 132 Outlet Component - Shared Layout

Lecture 133 Header Component

Lecture 134 Tailwind Custom Class

Lecture 135 Navbar Component - Setup

Lecture 136 Logo Component

Lecture 137 Links List

Lecture 138 Links Dropdown Component

Lecture 139 NavLinks Component

Lecture 140 Change Theme

Lecture 141 ApplyTheme Function

Lecture 142 Theme Slice

Lecture 143 ModeToggle Component

Lecture 144 CartButton Component

Lecture 145 ErrorPage Component

Lecture 146 About Page Component

Lecture 147 Error Element Component

Lecture 148 Landing Page - Setup

Lecture 149 Custom Fetch Function

Lecture 150 Product Types

Lecture 151 Loader Function

Lecture 152 Landing Page - Loader

Lecture 153 Section Title

Lecture 154 FormatAsDollars Function

Lecture 155 Products Grid Component

Lecture 156 Hero Component

Lecture 157 Hero Carousel

Section 6: Bonus

Lecture 158 Bonus

Ideal for developers seeking to master TypeScript, from basics to advanced concepts, and apply it in building modern React applications.