IIRF Online > Development > Web Development > Typescript > TypeScript Masterclass 2024 Edition - React + NodeJS Project
TypeScript Masterclass 2024 Edition - React + NodeJS Project by Udemy
TypeScript in-depth Course and also build a full stack app using TypeScript with ReactJS, Material, NodeJS and TypeORM.
Course Highlights
- Learn TypeScript from scratch starting with the basic type safety and types offered by TypeScript to advanced OOP features.
- Deep dive into Object Oriented Programming features offered by TypeScript. Includes lectures about classes, abstract classes, access modifiers and interfaces.
- Understand advanced TypeScript features such as Generics, Decorators, Totality, Type Widening, Mapped Types, Conditional Types and so on.
- Create a full stack application using TypeScript and learn how to use TypeScript with technologies like React, Material UI, Tanstack Query, NodeJs, TypeORM
- Use TypeScript with front-end frameworks like React JS, Tanstack/React Query, Context API and Material UI
- Use TypeScript for back-end development using NodeJS, Express, TypeORM and MySQL
Skills you will learn!
Curriculum
12 Topics
WHAT'S INCLUDED IN THE COURSE
DEMO OF APP WE BUILD IN THE END
How To Take Full Advantage Of The Course
Course Update And Change Log
What Is TypeScript
Setup Development Environment
Setting Up TypeScript Compiler
How TypeScript Helps You Catch Errors
Your First TypeScript Program
Deep Dive into the JavaScript File Generated by TypeScript
TypeScript Type System
Quiz for Introduction Section.
8 Topics
Introduction To Primitive Types
string number and boolean
null and undefined Types
bigint Type
symbol Type
★ Practice: The Primitive Types ★
★Solution: The Primitive Types★
Quiz on primitive types
11 Topics
Introduction To TypeSystem
any Type
unknown type
Type Alias
Inference Annotation Duck Typing and Declaration
Union Types
Quick Conditional Types
Understanding Type Hierarchy
Type Casting
★Practice: Type System★
★ Solution: Type System ★
11 Topics
Introduction To Objects
Working With Objects
Type Alias For Objects
Nested Objects
Index Signatures With Objects
Optional And Readonly Properties
Union Types With Objects
Discriminating Unions
Intersection Types
★Practice: Strictly Type an Object★
★Solution: Strictly Type an Object★
12 Topics
Introduction To Arrays And Enums
Strictly Typing Arrays
Tuples
Readonly Arrays and Tuples
Enums
Enums are Available At Runtime
Enums Vs Objects
Computed Enums
Enums as Unions and Types
★Practice: Arrays and Enums★
★Solution: Arrays and Enums★
Test your knowledge about TypeScript Types.
14 Topics
Declaring Functions
Default and Optional Parameters
Custom Parameters And Return Types
Function Call Signatures
Anonymous Functions
void and never Types
Async Functions
Rest Parameters And Arguments
Parameter Destructuring
Introduction to Function Overloading
Function Overloading In TypeScript
★Practice: Functions in TypeScript★
★Solution: Functions in TypeScript★
Test your knowledge about functions in TypeScript
11 Topics
What are Generics
Generic Function Declarations
Generic and Constraints With Arrays
Generics With Objects
keyof Type Operator
Generic Default Values
Implementing A Polymorphic Function
Problems With Function Overloads
Using Generics Instead Of Function Overloads
★Practice: Implement Map Function★
★Solution: Implement Map Function★
31 Topics
What Are Classes
Running TypeScript In Browser
Creating First Class And Instance
Constructor Function
this Keyword
Classes as Types
Optional And Readonly Fields
Inheritance With Classes
super Method
★ Practice: Classes Exercise 1 ★
★Solution: Classes Exercise 1★
Access Modifiers
public Members
protected Members
private Members
Which Access Modifier to Use?
Overriding Methods In Child Classes
Shorthand For Constructor
More Control Over Classes
Using Mutators - Setters
Using Accessors - Getters
Static Members
Understanding Static Blocks
Generics With Classes
Generics Use Case
Concrete Implementation With User Type
Intro To Mixins
Composing New Classes With Mixins
★Practice: Classes Exercise 2★
★Solution: Classes Exercise 2★
Test your knowledge about classes and access modifiers
26 Topics
Module Introduction - Abstract Classes And Interfaces
Introduction To Abstract Classes
Shared methods in Abstract Classes
Protected Constructor And Child Classes
Adding Holidays To Classes
Print Holidays Method
Method Overriding In Child Class
Introduction to Abstract Methods
Introduction to Interfaces
Introduction to Interfaces
Extending Interfaces using extends keyword
Inheriting From Multiple Interfaces
Interfaces and Generics
Assigning Generics To Interfaces
Using Multiple Types as Generics
Using interfaces with classes
Multiple Classes Using the Same Interface
Implementing Multiple Interfaces
Multiple inheritance in classes using interfaces
Interfaces and Access Modifiers
Declaration Merging Interfaces
Difference Between a Type and an Interface
Difference Between a Abstract Class and an Interface
Difference Between Interfaces and Abstract Classes 2
What should you use? Abstract Class or Interfaces
See what you have learnt about interfaces.
9 Topics
Module Introduction - The TypeScript Compiler
Setting up a Base Project
Including and Excluding Files
rootDir and outDir
Setting a Compilation Target
TypeScript Core Libs
Type Checking Options
JS in Browser Using Liver Server
Understanding Source Maps
13 Topics
Module Introduction - Prototypes And Objects
This Keyword In JS
Weird Behaviour Of The This Keyword
Constructor Functions
Javascript’s Own Constructor Function
Understanding Prototypes
Prototypical Inheritance Theory
Inheriting The User Properties
Inheriting The User Prototypes
Alternate Methods Of Creating Objects
Introduction To Property Descriptors
defineProperty Method
How Classes Are Syntactic Sugar On Prototypes
15 Topics
Introduction to Decorators
Writing Our First Decorator
When Are Decorators Invoked
Introduction To Decorator Factories
Changes To Decorators In TypeScript 5
Adding To Prototype
Interfaces For Prototypes
Adding Functions to Prototypes
Using Same Decorator With Multiple Classes
Method Decorators
Static Method Decorators
Decorators For Method Parameters
Decorators For Class Properties And Accessors
Multiple Decorators And Returning Values from Class Decorators
Decorator Composition and Evaluation
5 Topics
Introduction To Namespaces
Starting With Namespaces
Namespaces In Multiple Files
Working With ESM Modules
Mixed Module Interoperability
8 Topics
Transitioning JavaScript to TypeScript
First Declaration File
Reusable Types With Interfaces
Function Overloads With Declaration Files
Using Namespaces In Declaration Files
Declaration For Classes
Ambient Declarations
Using @Types Packages
20 Topics
Module Introduction - Advanced Concepts and Features
Understanding Subtypes And Supertypes
How TypeScript Checks Compatibility
Type Widening
Typecasting
Totality
Discriminated Unions
keying-in or Index Accessed Types
keyof operator
typeOf Operator
Mapped Types
Using Mapped Types
Conditional Types
★ Practice: Conditional Types
Solution: Conditional Types
Constraints on conditional types
Inferring With Conditional Types
Infer The Return Type Of A Function
Infer Function Arguments
Satisfies Operator (TS Version 5 feature)
6 Topics
Introduction To Type Guards
typeof Type Guards
Truthiness Narrowing
Equality Narrowing
in Operator narrowing
instanceOf Type Guards
10 Topics
Intro To Built In Utility Types
How Do Utility Types Work Behind The Scenes
Awaited<Type>
Record<Keys Type>
Pick<Type Keys>
Omit<OldType Keys>
Partial<Type>
Required<Type>
Readonly<Type>
String Manipulation Types
4 Topics
An Overview Of The Application
Development Paths
A Note About ESLint And Prettier
Using Type Definitions
37 Topics
A Look At The Design And What We Are Going To Build
Using Create React App With TypeScript
Installing And Configuring ESLint
Installing And Configuring Prettier
Our First TSX React Component
Getting Started With Material UI
Create Custom Material UI Theme
Creating Our First Page
Breaking Dashboard Into Components
Creating Profile Component
Profile Component Layout
Adding Props
Using TypeScript With Props
Interfaces or PropTypes
Creating CreateATask Component
Creating Title And Description Components
Making Components Dynamic Using Interfaces
Using PropTypes
Creating DateField Component
Adding Props to DateField
Creating taskSelectField Component
Interfaces for taskSelectField
PropTypes And Dynamic Options
Task Area Layout
The Task Counter Component
Styling The Task Counter
Making Values Dynamic
Creating The Correct Border Color
Emitting Correct Label
Starting with the Task Component
The Task Header Component
Task Description Component
Task Footer Component
Making Task Footer Dynamic
Adding Props To Task Component
Dynamic Colors to Border In Task Component
Concluding Front-end Development
32 Topics
Module Introduction: Building Node API With TypeScript
Creating A Basic Node Server
Adding TypeScript To Node Server
Converting index.js to index.ts
Automating the Development Process
ESlint And Prettier Integration
Understanding TypeORM
Integrating TypeORM
Tools To Browse MySQL Schemas
Adding Other Dependencies
Understanding TypeORM Entities
Adding Primary Key To Task Entity
Completing Task Entity
Abstracting Routing Logic
Understanding Application Flow
Creating A Tasks Controller
Creating A TypeORM Repository
Using Repository To Get All Tasks
Setup For Testing HTTP Requests
Checking Results From Repository
Introduction to Class Transformer
Sending A Response From Tasks Router
Creating The Post Endpoint
Introduction To Express Validator
Using The Validator
Refactoring Router And Controller
Moving Validation Logic To Controller
Completing The Post Controller
Creating Update Request Validator
Creating a PUT Request Route
Implementation Of Update Method
Testing And Conclusion
32 Topics
A Quick Introduction
Introduction To React | Tanstack Query
Integrating Tanstack Query
Using the Latest Version of @tanstack Query
Introduction To Queries And Mutations
The Fetch API
Creating States For Our Form
Using States With Form Fields
Adding Button Alert and Progress
Adding The useMutation Hook
Creating The ICreateTask Interface
Use Mutation To Create A New Task
Managing Loading States
Managing Side Effects In Mutation
Create Our First Query
Interface For GET Request
Minor Changes to ITask Interface
Adding Alert Messages
Looping Through Query Data
Setting inProgress Switch State
Create Mutation For Updating Task
onStatusChangeHandler
markCompleteHandler
countTasks Function
Working On Task Counters
Understanding Why We Need React Context
Creating React Context
Using Context In Our App
TaskStatusChangedContext
Using The Context
Updating Task List On Context Change
Testing Our App And Concluding
1 Topic
Why this section exists
8 Topics
What Is Typescript ?
Installing NodeJS On Your Machine
Installing Typescript And Preparing Your IDE
A Note About Resources
Your First TypeScript Program
How TypeScript Helps you Catch Errors
Deep Dive into the JavaScript File Generated by TypeScript
Setting up Auto Compilation
25 Topics
Module Introduction - All About Types
Introduction to Types
any Type
unknown Type
boolean Type
number Type
bigint Type
string Type
Type Inference in TypeScript
Object Type
Type Aliases with type Keyword
★ Practice: Create Strictly Typed Nested Objects
★ Solution: Create Strictly Typed Nested Objects
The union types
Union Types with Primitive Types
Intersection Types In TypeScript
Index Signatures
Arrays in TypeScript
Tuples
Read only Arrays
null and undefind in TypeScript
void and never types
Enums
★ Practice: Strictly Type A Complex Object
★ Solution: Strictly Type A Complex Object
TypeScript Masterclass 2024 Edition - React + NodeJS Project
Related Typescript Courses
.webp)
Thank You!
Your review has been submitted successfully.