Description
TypeScript is here to stay because it is created by Microsoft and actively promoted and used by Angular 2+ (Google) and other well-known libraries.
TypeScript is undoubtedly one of the most well-liked web development languages available today.
Discover how TypeScript can be used to add cutting-edge JS features like DE structuring, arrow functions, and classes to any environment or codebase—even if it doesn't currently support them! Recognize the kinds you can use and how to create your own types.
Discover how to use TypeScript's numerous features and types to produce better code!
You'll discover that your options don't just stop with Angular or simple JavaScript/TypeScript projects. Instead, a comprehensive module explains how to use TypeScript with ReactJS and how to use TypeScript to make your React code better.
What is TypeScript?
Microsoft created and maintains TypeScript, a free and open source programming language.
The language gains optional static typing and is a strict superset of JavaScript in terms of syntax. Large programmes may be developed with it and transpiled to JavaScript.
JavaScript is extended by TypeScript, which also enhances the developer environment. It helps programmers to include type safety in their creations.
Additional capabilities offered by TypeScript include interfaces, type aliases, abstract classes, function overloading, tuples, generics, etc.
The TypeScript file format with the ts extension is flawless. The language of choice for server-side development is TypeScript.
It is advised to use TypeScript while creating complex apps. It is statically typed, which makes error detection simple because the code won't run until you provide the type of the variable.
Why should you learn TypeScript?
| Type Safety | TypeScript improves the reliability of JavaScript by adding static typing to the programming language. |
| Enhanced Productivity | Tools and language features of TypeScript, like as autocompletion and code navigation, speed up the development process. |
| Easy Adoption | Since TypeScript includes everything in JavaScript, it's possible to gradually switch over to it without having to rewrite your applications. |
| Improved Collaboration | The documentation and type annotations in TypeScript make it simpler for groups to collaborate on and understand codebases. |
| Predictable Refactoring | With TypeScript's error checking capabilities, refactoring may be done with complete assurance. |
| Growing Community | TypeScript offers a robust ecosystem of libraries thanks to its big and engaged community. |
| Modern JavaScript Features | Because TypeScript is compatible with the most recent version of ECMAScript, programmers can take advantage of the most recent language features. |
| Strong Tooling Support | Many strong programming tools, including as code editors and integrated development environments, support TypeScript. |
| Applicable to Frontend and Backend Development | TypeScript may also be used for backend and full-stack development, thus it's not just for the front end. |
| In-Demand Skill | Because of the widespread use of TypeScript, developers who are proficient in it have a leg up when applying for jobs. |
What will you require?
- JavaScript Knowledge is recommended but not at expert level
- Passion to learn TypeScript
- ES6 knowledge is an added advantage
Syllabus
Getting Started
- A Warm welcome
- TypeScript and it’s uses
- Installation and usage of TypeScript
- Advantages of TypeScript - Overview
- Outline of Course
- Get the best out of this course
- IDE/Code Editor Setup
- Project Setup
TypeScript Basics & Basic Types
- Introduction to the Module
- Types and it’s uses
- Difference between TypeScript types Vs JavaScript types
- Type Casing
- Numbers, Strings and Booleans
- Type Assignment and Type Interference
- Types Understanding- Quiz
- Object Types
- Nested Objects and Types
- Arrays Types
- Tuples
- Enums
- “Any” Type
- Union Types
- Literal Types
- Custom Types / Type Aliases
- Type Aliases & Object Types
- Core concepts and Core Types - Quiz
- Function Return Types & “void”
- Functions as Types
- Function Types and Callbacks
- Functions and Types - Quiz
- The “unknown” Type
- The “never” Type
- Wrapping up
- Resources and Links
The TypeScript Compiler (and its Configuration)
- Introduction to the Module
- “Watch Mode” usage
- Entire Project / Multiple Files Compilation
- Excluding & Including Files
- Compilation Target Setup
- TypeScript Core Libs Understanding
- More Compilation and Configuration Options
- Source Maps working
- outDir and rootDir
- Stop Emitting Files on Compilation errors
- Strict Compilation
- Code Quality options
- Visual Studio Code Debugging
- Wrapping up
- Resources
Next-generation JavaScript & TypeScript
- Introduction to the Module
- “Const” and “let”
- Arrow Functions
- Default Function Parameters
- The Spread Operator (...)
- Rest Parameters
- Array and Object Destructing
- How a Code is compiled and Wrapping up
- Resources
Classes & Interfaces
- Introduction to the Module
- Classes
- First Class creation
- JavaScript compiling
- Constructor Functions and “this” keyword
- “Public” and “private” access modifiers
- Shorthand Initialization
- “Readonly” Properties
- Class Basics - Quiz
- Inheritance
- Properties Overriding and the “protected” Modifier
- Setters and Getters
- Static Properties and Methods
- Abstract Classes
- Private Constructors and Singletons
- A Summary of Classes
- Classes Quiz
- First Interface
- Using Interfaces with Classes
- Why Interfaces
- Readonly Interface Propeties
- Extending Interfaces
- Interfaces as Function Types
- Optional Parameters and Properties
- Compiling Interfaces to JavaScript
- Interfaces Quiz
- Wrapping up
- Resources
Advanced Types
- Introduction to the Module
- Intersection Types
- More on Type Guards
- Discriminated Unions
- Type Casting
- Index Properties
- Function Overloads
- Optional Chaining
- Nullish Coalescing
- Advanced Types - Quiz
- Wrapping up
- Resources
Generics
- Introduction to the Module
- Generics and Built-in Generics
- Generic Function creation
- Constraints working
- Another Generic Function
- The “keyof” constraint
- Generic Classes
- First Summary
- Generic Utility Types
- Union Types Vs Generic Types
- Generics - Quiz
- Resources
Decorators
- Introduction to the Module
- First Class Decorator
- More Useful Decorators Building
- Multiple Decorators addition
- Property Decorators - a Deep Dive
- Parameter and Accessor Decorators
- Decorators Execution
- Returning and changing a class in Class Decorator
- Decorator Return Types
- Creating an “Autobind” decorator - Example
- Decorators Validation - First Step
- Decorators Validation - Finishing
- Validator Bug fixing
- Wrapping up
- Resources
Practice Time! Let’s build a Drag & Drop Project
- Introduction to the Module
- Getting started
- OOP Rendering & DOM Element Selection
- DOM Elements Interaction
- “Autobind” decorator creation and usage
- User input fetching
- Reusable Validation Functionality creation
- Project Lists Rendering
- Application State managing with Singletons
- Custom Types & More Classes
- Project Filtering with Enums
- Inheritance and Generics Addition
- Project Items rendering with a Class
- Getter using
- Drag & Drop implementation with Interface utilizing
- Reflecting the Current State in the UI with Drag Events
- Droppable Area addition
- Drag and Drop finishing
- Wrapping up
- Resources
Modules & Namespaces
- Introduction to the Module
- Module Code writing - Your Options
- Namespaces working
- Files and Folders organizing
- Namespace Imports Problem
- Using Chrome or firefox
- ES Modules using
- Import and Export syntax Understanding
- Executing Codes in Module
- Wrapping Up
- Resources
Using Webpack with TypeScript
- Introduction to the Module
- Webpack and its need
- NodeJS notes
- Webpack and Important dependencies Installation
- Output and Entry Configuration
- Ts-loader package with TypeScript Support
- Setup Finishing and webpack-dev-server adding
- Production workflow addition
- Wrapping up
- Resources
3rd Party Libraries & TypeScript
- Introduction to the Module
- Using TypeScript with JavaScript Libraries
- “Last Resort” as “declare”
- Class-transformer - No types
- Class-validator - TypeScript-embracing
- Wrapping up
- Resources
Time to Practice! Let’s build a “Select & Share a Place” (incl. Google Maps)
- Introduction to the Module
- Setting up the Project
- User input getting
- Google API Key setup
- Fetching Coordinates for an Entered Address using Axios
- Map Rendering with Google Maps (incl. Types!)
- Work with Maps without a Credit Card
- Resources
React.js & TypeScript
- Introduction to the Module
- React + TypeScript Project setup
- React + TypeScript working together
- Types of Props and Working with it
- “Refs” user input
- Cross-component Communication
- State and Types Working
- Managing State Better
- Working in depth with Props & State
- Styling Addition
- Other React Features (Redux, Routing etc.,)
- Resources
Node.js + Express & TypeScript
- Introduction to the Module
- TypeScript Code Execution with Node.js
- Project setup
- Working with Types and Setup finishing (in Node + Express Apps)
- Middleware adding and Types
- Parsing Request Bodies and Controllers working
- CRUD Operations
- Wrapping up
- Resources
Course Roundup
- Thanksgiving
What you’ll learn?
- TypeScript Uses
- Features like Types, ES6 Support
- Classes, Modules, Interfaces and much more
- Combining TypeScript with ReactJS or NodeJS / Express
- TypeScript understanding
- Working of TypeScript
- TypeScript theory
- Applying TypeScript in projects
Who can enroll this course?
- People who want to extend his or her horizon beyond vanilla JavaScript
- People who understand Angular can understand TypeScript works
Course Duration
- Course Duration
- 200+ Lectures and 38+ Hours of on Demand HD Videos
- Certificate of Completion
- 5214+ students enrolled
- Complete Practical Training
- Watch Videos on Android and iOS App, TV, Computer & Tablets