Understanding Typescript 2024

Boost your JavaScript projects with TypeScript: Learn all about core types, generics, TypeScript + React or Node & more!

What you'll learn

Use TypeScript and its Features like Types, ES6 Support, Classes, Modules, Interfaces and much more in any of their Projects

Understand what TypeScript really is about and how it works

Why TypeScript offers a real advantage over vanilla JavaScript

Learn TypeScript both in theory as well as applied to real use-cases and projects

Learn how to combine TypeScript with ReactJS or NodeJS / Express

Requirements

JavaScript knowledge is required, though you don't need to be an Expert

NO prior TypeScript experience is required

ES6 Knowledge is a plus but not required

Description

Learn what TypeScript is, why it really is a powerful addition to JavaScript, what its features are and how to use it! Learn why TypeScript is amazing, how it improves your JavaScript code and how it helps you avoid nasty bugs and errors!This course takes you from the very basics and its most important feature (types!) to the point where you're able to use TypeScript in any of your projects. ReactJS projects included!As TypeScript is developed by Microsoft and strongly advertised and used by Angular 2+ (Google) and other popular libraries, it's here to stay. Indeed, TypeScript is one of the most popular web development languages you can learn these days!Gain an edge today and be amongst the first to really understand TypeScript!Learn how you can use TypeScript to bring modern JS features like destructuring, arrow functions or classes to any environment and codebase - even if it does not support those features yet!  Understand which types you may use and how you can build your own types. Learn how to write better code with types and with the many features offered by TypeScript!But, in this course, we'll not stop after the basics! You will also learn about more advanced features (like decorators) and also how to set up workflows with  TypeScript. This includes a TypeScript-only workflow as well as a webpack workflow.You'll also learn that you're not limited to Angular or plain JavaScript/ TypeScript projects. Instead, a complete module covers how you may use TypeScript with ReactJS and improve your React code with TypeScript as well.Practice what you learn!Watching videos is a great way to learn. And to a lot of students, it's the best way. If you also want to practice the things you learn, this course offers you more than that though. Because this course comes with plenty of exercises (and solutions, of course) in addition to all the high-quality learning videos.So much Content!I'm not a fan of these courses which teach you the basics and then leave you alone. Instead, in this course you'll get insights into:Types and how to use themHow the TypeScript compiler works (and how you may configure it)ES6 features with TypeScriptClasses in TypeScriptNamespaces and modulesInterfacesGenericsDecoratorsHow to integrate Third-Party JavaScript libraries into your TypeScript projectsHow to set up a TypeScript project with webpackOr how to set up a plain-TypeScript workflowHow to use TypeScript together with ReactJSHow to use TypeScript together with Node/ ExpressReal projects and use-cases!And so much more!

Overview

Section 1: Getting Started

Lecture 1 Welcome to the Course!

Lecture 2 What Is TypeScript & Why Should You Use It?

Lecture 3 Join Our Learning Community

Lecture 4 Installing & Using TypeScript

Lecture 5 TypeScript Advantages - Overview

Lecture 6 Course Outline

Lecture 7 How To Get The Most Out Of The Course

Lecture 8 Setting Up A Code Editor / IDE

Lecture 9 Course Setup

Lecture 10 The Course Project Setup

Section 2: TypeScript Basics & Basic Types

Lecture 11 Module Introduction

Lecture 12 Using Types

Lecture 13 TypeScript Types vs JavaScript Types

Lecture 14 Important: Type Casing

Lecture 15 Working with Numbers, Strings & Booleans

Lecture 16 Type Assignment & Type Inference

Lecture 17 Object Types

Lecture 18 Nested Objects & Types

Lecture 19 Arrays Types

Lecture 20 Working with Tuples

Lecture 21 Working with Enums

Lecture 22 The "any" Type

Lecture 23 Union Types

Lecture 24 Literal Types

Lecture 25 Type Aliases / Custom Types

Lecture 26 Type Aliases & Object Types

Lecture 27 Function Return Types & "void"

Lecture 28 Functions as Types

Lecture 29 Function Types & Callbacks

Lecture 30 The "unknown" Type

Lecture 31 The "never" Type

Lecture 32 Wrap Up

Lecture 33 Useful Resources & Links

Section 3: The TypeScript Compiler (and its Configuration)

Lecture 34 Module Introduction

Lecture 35 Using "Watch Mode"

Lecture 36 Compiling the Entire Project / Multiple Files

Lecture 37 Including & Excluding Files

Lecture 38 Setting a Compilation Target

Lecture 39 Understanding TypeScript Core Libs

Lecture 40 More Configuration & Compilation Options

Lecture 41 Working with Source Maps

Lecture 42 rootDir and outDir

Lecture 43 Stop Emitting Files on Compilation Errors

Lecture 44 Strict Compilation

Lecture 45 Code Quality Options

Lecture 46 Debugging with Visual Studio Code

Lecture 47 Wrap Up

Lecture 48 Useful Resources & Links

Section 4: Next-generation JavaScript & TypeScript

Lecture 49 Module Introduction

Lecture 50 "let" and "const"

Lecture 51 Arrow Functions

Lecture 52 Default Function Parameters

Lecture 53 The Spread Operator (…)

Lecture 54 Rest Parameters

Lecture 55 Array & Object Destructuring

Lecture 56 How Code Gets Compiled & Wrap Up

Lecture 57 Useful Resources & Links

Section 5: Classes & Interfaces

Lecture 58 Module Introduction

Lecture 59 What are Classes?

Lecture 60 Creating a First Class

Lecture 61 Compiling to JavaScript

Lecture 62 Constructor Functions & The "this" Keyword

Lecture 63 "private" and "public" Access Modifiers

Lecture 64 Shorthand Initialization

Lecture 65 "readonly" Properties

Lecture 66 Inheritance

Lecture 67 Overriding Properties & The "protected" Modifier

Lecture 68 Getters & Setters

Lecture 69 Static Methods & Properties

Lecture 70 Abstract Classes

Lecture 71 Singletons & Private Constructors

Lecture 72 Classes - A Summary

Lecture 73 A First Interface

Lecture 74 Using Interfaces with Classes

Lecture 75 Why Interfaces?

Lecture 76 Readonly Interface Properties

Lecture 77 Extending Interfaces

Lecture 78 Interfaces as Function Types

Lecture 79 Optional Parameters & Properties

Lecture 80 Compiling Interfaces to JavaScript

Lecture 81 Wrap Up

Lecture 82 Useful Resources & Links

Section 6: Advanced Types

Lecture 83 Module Introduction

Lecture 84 Intersection Types

Lecture 85 More on Type Guards

Lecture 86 Discriminated Unions

Lecture 87 Type Casting

Lecture 88 Index Properties

Lecture 89 Function Overloads

Lecture 90 Optional Chaining

Lecture 91 Nullish Coalescing

Lecture 92 Wrap Up

Lecture 93 Useful Resources & Links

Section 7: Generics

Lecture 94 Module Introduction

Lecture 95 Built-in Generics & What are Generics?

Lecture 96 Creating a Generic Function

Lecture 97 Working with Constraints

Lecture 98 Another Generic Function

Lecture 99 The "keyof" Constraint

Lecture 100 Generic Classes

Lecture 101 A First Summary

Lecture 102 Generic Utility Types

Lecture 103 Generic Types vs Union Types

Lecture 104 Useful Resources & Links

Section 8: Decorators

Lecture 105 Module Introduction

Lecture 106 A First Class Decorator

Lecture 107 Working with Decorator Factories

Lecture 108 Building More Useful Decorators

Lecture 109 Adding Multiple Decorators

Lecture 110 Diving into Property Decorators

Lecture 111 Accessor & Parameter Decorators

Lecture 112 When Do Decorators Execute?

Lecture 113 Returning (and changing) a Class in a Class Decorator

Lecture 114 Other Decorator Return Types

Lecture 115 Example: Creating an "Autobind" Decorator

Lecture 116 Validation with Decorators - First Steps

Lecture 117 Validation with Decorators - Finished

Lecture 118 Fixing a Validator Bug

Lecture 119 Wrap Up

Lecture 120 Useful Resources & Links

Section 9: Practice Time! Let's build a Drag & Drop Project

Lecture 121 Module Introduction

Lecture 122 Getting Started

Lecture 123 DOM Element Selection & OOP Rendering

Lecture 124 Interacting with DOM Elements

Lecture 125 Creating & Using an "Autobind" Decorator

Lecture 126 Fetching User Input

Lecture 127 Creating a Re-Usable Validation Functionality

Lecture 128 Rendering Project Lists

Lecture 129 Managing Application State with Singletons

Lecture 130 More Classes & Custom Types

Lecture 131 Filtering Projects with Enums

Lecture 132 Adding Inheritance & Generics

Lecture 133 Rendering Project Items with a Class

Lecture 134 Using a Getter

Lecture 135 Utilizing Interfaces to Implement Drag & Drop

Lecture 136 Drag Events & Reflecting the Current State in the UI

Lecture 137 Adding a Droppable Area

Lecture 138 Finishing Drag & Drop

Lecture 139 Wrap Up

Lecture 140 Useful Resources & Links

Section 10: Modules & Namespaces

Lecture 141 Module Introduction

Lecture 142 Writing Module Code - Your Options

Lecture 143 Working with Namespaces

Lecture 144 Organizing Files & Folders

Lecture 145 A Problem with Namespace Imports

Lecture 146 Important: Use Chrome or Firefox

Lecture 147 Using ES Modules

Lecture 148 Understanding various Import & Export Syntaxes

Lecture 149 How Does Code In Modules Execute?

Lecture 150 Wrap Up

Lecture 151 Useful Resources & Links

Section 11: Using Webpack with TypeScript

Lecture 152 Module Introduction

Lecture 153 What is Webpack & Why do we need it?

Lecture 154 Installing Webpack & Important Dependencies

Lecture 155 Adding Entry & Output Configuration

Lecture 156 Adding TypeScript Support with the ts-loader Package

Lecture 157 Adjust Webpack Config

Lecture 158 Finishing the Setup & Adding webpack-dev-server

Lecture 159 Adding a Production Workflow

Lecture 160 Wrap Up

Lecture 161 Useful Resources & Links

Section 12: 3rd Party Libraries & TypeScript

Lecture 162 Module Introduction

Lecture 163 Using JavaScript (!) Libraries with TypeScript

Lecture 164 Using "declare" as a "Last Resort"

Lecture 165 No Types Needed: class-transformer

Lecture 166 TypeScript-embracing: class-validator

Lecture 167 Wrap Up

Lecture 168 Useful Resources & Links

Section 13: Time to Practice! Let's build a "Select & Share a Place" App (incl. Google Maps)

Lecture 169 Module Introduction

Lecture 170 Project Setup

Lecture 171 Getting User Input

Lecture 172 Setting Up a Google API Key

Lecture 173 Using Axios to Fetch Coordinates for an Entered Address

Lecture 174 Rendering a Map with Google Maps (incl. Types!)

Lecture 175 Working with Maps without a Credit Card

Lecture 176 Useful Resources & Links

Section 14: React.js & TypeScript

Lecture 177 Module Introduction

Lecture 178 Setting Up a React + TypeScript Project

Lecture 179 How Do React + TypeScript Work Together?

Lecture 180 Working with Props and Types for Props

Lecture 181 Getting User Input with "refs"

Lecture 182 Cross-Component Communication

Lecture 183 Working with State & Types

Lecture 184 Managing State Better

Lecture 185 More Props & State Work

Lecture 186 Adding Styling

Lecture 187 Types for other React Features (e.g. Redux or Routing)

Lecture 188 Wrap Up

Lecture 189 Useful Resources & Links

Section 15: Node.js + Express & TypeScript

Lecture 190 Module Introduction

Lecture 191 Executing TypeScript Code with Node.js

Lecture 192 Setting up a Project

Lecture 193 Finished Setup & Working with Types (in Node + Express Apps)

Lecture 194 Adding Middleware & Types

Lecture 195 Working with Controllers & Parsing Request Bodies

Lecture 196 More CRUD Operations

Lecture 197 Wrap Up

Lecture 198 Useful Resources & Links

Section 16: Course Roundup

Lecture 199 Thanks for being part of the course!

This Course is for every student who wants to extend his or her horizon beyond vanilla JavaScript,Everyone learning Angular should definitely understand how TypeScript works