Understanding TypeScript – 2020 Edition

Video description

Don't limit the Usage of TypeScript to Angular 2! Learn the Basics, its Features, Workflows and how to use it!

About This Video

  • This course reflects the latest version of TypeScript, and incorporates tons of feedback.
  • Understand what TypeScript really it is about and how works
  • Why TypeScript offers a real advantage over vanilla JavaScript
  • Learn TypeScript in theory and apply it to real use cases and projects
  • Learn how to combine TypeScript with ReactJS or Node.js/Express

In Detail

Most people know TypeScript from Angular 2+. It's the language you must use there, right? It's more than that! Learn what TypeScript is, why it really is a powerful addition to JavaScript, what its features are, and how to use it! And while doing so, also understand what you're doing in your Angular code.

This course takes you from the very basics and its most important feature (Types!) to a point where you're able to use TypeScript in any of your projects—ReactJS projects included! As TypeScript is developed by Microsoft and used a lot by Angular 2+ (Google), it's here to stay. Gain an edge today and be amongst the first to really understand TypeScript!

A Journey into the Future - As TypeScript code can be compiled to ES5, you'll be amazed by the many next-gen features you can start using today. ES6 features such as destructuring or arrow functions, decorators, generics and interfaces or modules—TypeScript has them all! In this course, we'll not stop at the basics. You will learn about more advanced features and how to set up workflows with TypeScript. This includes TypeScript-only workflows as well as workflows using Gulp or Webpack. You'll also learn that you're not limited to Angular 2+ or plain JavaScript/TypeScript projects. One complete module covers how to use TypeScript with ReactJS to benefit from its features, too. You'll practice what you learn.

Watching videos is a great way to learn. And for a lot of students, it's the best way. If you also want to practice the things you learn, this course offers you exercises (and solutions) in many of the course modules. So much content!

In this course, you'll get insights into:

  • Types and how to use them
  • How the TypeScript compiler works
  • ES6 features in TypeScript
  • Classes in TypeScript
  • Namespaces and modules
  • Interfaces, generics, and decorators
  • How to integrate third-party JavaScript libraries into your TypeScript projects
  • How to set up a TypeScript project with Webpack
  • Or how to set up a plain TypeScript workflow
  • How to use TypeScript together with ReactJS
  • How to use TypeScript together with Node/Express
  • Real projects and use cases!

Who this book is for

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

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Getting Started
    1. Welcome to the Course!
    2. Why Is TypeScript Why Should You Use It?
    3. Installing Using TypeScript
    4. TypeScript Advantages - Overview
    5. Course Outline
    6. How to Get the Most Out of the course
    7. Setting Up A Code Editor / IDE
    8. The Course Project Setup
  2. Chapter 2 : TypeScript Basics Basic Types
    1. Module Introduction
    2. Using Types
    3. TypeScript Types vs JavaScript Types
    4. Working with Numbers, Strings Booleans
    5. Type Assignment Type Inference
    6. Object Types
    7. Arrays Types
    8. Working with Tuples
    9. Working with Enums
    10. The 'any' Type
    11. Union Types
    12. Literal Types
    13. Type Aliases / Custom Types
    14. Function Return Types 'void'
    15. Functions as Types
    16. Function Types Callbacks
    17. The 'unknown' Type
    18. The 'never' Type
    19. Wrap Up
  3. Chapter 3 : The TypeScript Compiler and Configuration
    1. Module Introduction
    2. Using 'Watch Mode'
    3. Compiling the Entire Project / Multiple Files
    4. Including Excluding Files
    5. Setting a Compilation Target
    6. Understanding TypeScript Core Libs
    7. More Configuration Compilation Options
    8. Working with Source Maps
    9. rootDir and outDir
    10. Stop Emitting Files on Compilation Errors
    11. Strict Compilation
    12. Code Quality Options
    13. Debugging with Visual Studio Code
    14. Wrap Up
  4. Chapter 4 : Next-generation JavaScript TypeScript
    1. Module Introduction
    2. 'let' and 'const'
    3. Arrow Functions
    4. Default Function Parameters
    5. The Spread Operator (...)
    6. Rest Parameters
    7. Array Object Destructuring
    8. How Code Gets Compiled Wrap Up
  5. Chapter 5 : Classes Interfaces
    1. Module Introduction
    2. What are Classes?
    3. Creating a First Class
    4. Compiling to JavaScript
    5. Constructor Functions The 'this' Keyword
    6. 'private' and 'public' Access Modifiers
    7. Shorthand Initialization
    8. 'readonly' Properties
    9. Inheritance
    10. Overriding Properties The 'protected' Modifier
    11. Getters Setters
    12. Static Methods Properties
    13. Abstract Classes
    14. Singletons Private Constructors
    15. Classes - A Summary
    16. A First Interface
    17. Using Interfaces with Classes
    18. Why Interfaces?
    19. Readonly Interface Properties
    20. Extending Interfaces
    21. Interfaces as Function Types
    22. Optional Parameters Properties
    23. Compiling Interfaces to JavaScript
    24. Wrap Up
  6. Chapter 6 : Advanced Types
    1. Module Introduction
    2. Intersection Types
    3. More on Type Guards
    4. Discriminated Unions
    5. Type Casting
    6. Index Properties
    7. Function Overloads
    8. Optional Chaining
    9. Nullish Coalescing
    10. Wrap Up
  7. Chapter 7 : Generics
    1. Module Introduction
    2. Built-in Generics What are Generics?
    3. Creating a Generic Function
    4. Working with Constraints
    5. Another Generic Function
    6. The 'keyof' Constraint
    7. Generic Classes
    8. A First Summary
    9. Generic Utility Types
    10. Generic Types vs Union Types
  8. Chapter 8 : Decorators
    1. Module Introduction
    2. A First-Class Decorator
    3. Working with Decorator Factories
    4. Building More Useful Decorators
    5. Adding Multiple Decorators
    6. Diving into Property Decorators
    7. Accessor Parameter Decorators
    8. When Do Decorators Execute?
    9. Returning (and changing) a Class in a Class Decorator
    10. Other Decorator Return Types
    11. Example: Creating an 'Autobind' Decorator
    12. Validation with Decorators - First Steps
    13. Validation with Decorators - Finished
    14. Wrap Up
  9. Chapter 9 : Practice Time! Let's build a Drag Drop Project
    1. Module Introduction
    2. Getting Started
    3. DOM Element Selection OOP Rendering
    4. Interacting with DOM Elements
    5. Creating Using an 'Autobind' Decorator
    6. Fetching User Input
    7. Creating a Re-Usable Validation Functionality
    8. Rendering Project Lists
    9. Managing Application State with Singletons
    10. More Classes Custom Types
    11. Filtering Projects with Enums
    12. Adding Inheritance Generics
    13. Rendering Project Items with a Class
    14. Using a Getter
    15. Utilizing Interfaces to Implement Drag Drop
    16. Drag Events Reflecting the Current State in the UI
    17. Adding a Droppable Area
    18. Finishing Drag Drop
    19. Wrap Up
  10. Chapter 10 : Modules Namespaces
    1. Module Introduction
    2. Writing Module Code - Your Options
    3. Working with Namespaces
    4. Organizing Files Folders
    5. A Problem with Namespace Imports
    6. Using ES Modules
    7. Understanding various Import Export Syntaxes
    8. How Does Code In Modules Execute?
    9. Wrap Up
  11. Chapter 11 : Using Webpack with TypeScript
    1. Module Introduction
    2. What is Webpack Why do we need it?
    3. Installing Webpack Important Dependencies
    4. Adding Entry Output Configuration
    5. Adding TypeScript Support with the ts-loader Package
    6. Finishing the Setup Adding webpack-dev-server
    7. Adding a Production Workflow
    8. Wrap Up
  12. Chapter 12 : 3rd Party Libraries TypeScript
    1. Module Introduction
    2. Using JavaScript (!) Libraries with TypeScript
    3. Using 'declare' as a 'Last Resort'
    4. No Types Needed: class-transformer
    5. TypeScript-embracing: class-validator
    6. Wrap Up
  13. Chapter 13 : Time to Practice! Let's build a "Select Share a Place" App (incl. Google Maps)
    1. Module Introduction
    2. Project Setup
    3. Getting User Input
    4. Setting Up a Google API Key
    5. Using Axios to Fetch Coordinates for an Entered Address
    6. Rendering a Map with Google Maps (incl. Types!)
  14. Chapter 14 : React.js TypeScript
    1. Module Introduction
    2. Setting Up a React + TypeScript Project
    3. How Do React + TypeScript Work Together?
    4. Working with Props and Types for Props
    5. Getting User Input with 'refs'
    6. Cross-Component Communication
    7. Working with State Types
    8. Managing State Better
    9. More Props State Work
    10. Adding Styling
    11. Types for other React Features (e.g. Redux or Routing)
    12. Wrap Up
  15. Chapter 15 : Node.js + Express TypeScript
    1. Module Introduction
    2. Executing TypeScript Code with Node.js
    3. Setting up a Project
    4. Finished Setup Working with Types (in Node + Express Apps)
    5. Adding Middleware Types
    6. Working with Controllers Parsing Request Bodies
    7. More CRUD Operations
    8. Wrap Up
  16. Chapter 16 : Course Roundup
    1. Roundup

Product information

  • Title: Understanding TypeScript – 2020 Edition
  • Author(s): Maximilian Schwarzmüller
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781789951905