TypeScript Video Tutorial Collection: ES6, Debugging, and Typing

This post gathers a set of video tutorials that walk through frequently used TypeScript capabilities. The features covered tackle several long-standing pain points that have challenged developers across many languages for years, including:

  • achieving type safety without excessive boilerplate
  • addressing the problems caused by null values
  • working with composite or mixed types

Specifically, these videos explore:

  • selected ES6 features that TypeScript supports
  • debugging techniques for both browsers and Node.js
  • type definition files and system features

Content Overview

The following list outlines the topics covered in the accompanying videos. Each entry links to a video and includes a brief description; all clips belong to this Playlist:

  • Video 1 - Four Primary Benefits of TypeScript - Why Choose It?
  • Video 2 - Comparing let, const, and var in ES6/TypeScript: Default Choice and Immutability
  • Video 3 - Object Destructuring and Shorthand Object Creation in ES6/TypeScript: Their Connection
  • Video 4 - Debugging TypeScript in Browser and Node.js: A Detailed Walkthrough
  • Video 5 - Creating Type-Safe Programs Without Classes in TypeScript
  • Video 6 - The Behavior of the TypeScript any Type
  • Video 7 - Using @types: Adding Type Definitions for External Libraries
  • Video 8 - Non-Nullable Types in TypeScript: Preventing Null and Undefined Errors
  • Video 9 - Union and Intersection Types: Comparing interface and type Aliases
  • Video 10 - Tuple Types: Enhancing Type Safety for Arrays

Video 1 - Four Primary Benefits of TypeScript - Why Choose It?

TypeScript has seen substantial growth and development recently, with new capabilities arriving regularly. Amid this rapid evolution, it's easy to forget the core reasons for adopting the language in the first place.

A frequent critique is that type checking requires extra verbosity, similar to nominally typed languages like Java or C#. However, this isn't accurate for TypeScript—it allows for both concise, readable code and the advantages of robust tooling. For a detailed look at the primary benefits, check out this video:

Video 2 - Comparing let, const, and var in ES6/TypeScript: Default Choice and Immutability

A significant advantage of TypeScript is its ability to use many modern ES6+ features without waiting for widespread browser adoption.

It allows developers to write code with the latest JavaScript features, even those not yet universally supported. The TypeScript compiler then transpiles this code into a version of JavaScript that runs consistently across all browsers.

The set of supported ES6 features is always expanding, but TypeScript removes the worry about browser compatibility. It ensures that your code works everywhere, irrespective of individual browser support for a given feature.

For a practical demonstration of a widely used ES6 feature, watch this video on the let vs const keywords and discover which one is the better default choice and why:

Video 3 - Object Destructuring and Shorthand Object Creation in ES6/TypeScript: Their Connection

When exploring new ES6+ features, it's often challenging to see their immediate benefit or the rationale behind their introduction. This difficulty arises because many features are designed to work in concert. Their true value becomes apparent when you see multiple features used together in a single example.

A perfect example involves these capabilities:

  • Object Destructuring
  • Shorthand Object Creation

In isolation, each seems minor. But this video demonstrates how they combine to enable much more concise code:

Video 4 - Debugging TypeScript in Browser and Node.js: A Detailed Walkthrough

For a long time, debugging TypeScript meant debugging the compiled JavaScript. That is no longer the case. There is now excellent support for debugging TypeScript directly in the browser and within IDEs like WebStorm. This support also extends to debugging Node.js programs written in TypeScript.

To see a demonstration of debugging TypeScript in both Node.js and the browser, take a look at this video:

Video 5 - Creating Type-Safe Programs Without Classes in TypeScript

A common misconception is that you need object-oriented constructs like classes to define custom types for your data. In TypeScript, this is not true. You can define your own object types using the interface keyword. Unlike in many other languages, interface here is not just an OOP concept; it also serves as a way to define custom object types.

To understand the mechanics of the type system (which is quite different from Java or C#), refer to this post. If you prefer a visual example of using the interface keyword to create custom object types, this video is for you:

Note: This topic is also revisited in video 9.

Video 6 - The Behavior of the TypeScript any Type

A central feature of TypeScript is its seamless integration with plain JavaScript. If you have an existing JavaScript codebase and run it through the TypeScript compiler, you'll find it almost compiles as-is. It might require adjusting a few compiler flags or adding some type annotations, depending on the level of type safety you desire. In general, the code migration process is quite fast.

A key component enabling this compatibility is the TypeScript any type. To learn more about its use and behavior, see this demo video:

Video 7 - Using @types: Adding Type Definitions for External Libraries

Type definitions are a powerful feature, but what do you do when a third-party library doesn't include them? If a library bundles its own typings within its npm package, that's the best option to use. This is how some popular packages, such as Firebase, handle it, and more libraries are following suit by providing their own type definitions.

However, if you're using a common package written in plain JavaScript without typings, like Express, you can often still get type safety. You can do this by installing a separate package that contains only the type definitions for that library. For more on acquiring third-party typings, watch this video about npm @types packages:

Video 8 - Non-Nullable Types in TypeScript: Preventing Null and Undefined Errors

This feature addresses a highly requested capability in many languages (see the famous talk Null References: The Billion Dollar Mistake): the guarantee that your program is free from null and undefined bugs.

TypeScript makes this possible, but it requires turning on a couple of compiler flags. These flags are disabled by default to avoid breaking existing projects, as enabling them would produce numerous errors in codebases not designed for it. To see how to enable these stronger type-checking mechanisms and witness the feature in action, view this video:

Video 9 - Union and Intersection Types: Comparing interface and type Aliases

In video 5, we used the interface keyword to define object types. A closely related keyword is type, which is used for combining multiple type definitions. This is particularly useful when combined with strict null and undefined checking discussed in the previous video, as it lets you define a type that can be either an object instance or null/undefined.

There are other scenarios where type combination is valuable. For instance:

  • a function parameter could be either an object or an array, serving as a configuration element
  • a function might return different types based on its arguments

For these cases, TypeScript union and intersection types are ideal, providing a better alternative to the any keyword. See these features in action in the following video:

Video 10 - Tuple Types: Enhancing Type Safety for Arrays

There are common programming patterns for which many languages lack a concise solution. Sometimes you need to return multiple values from a function but want to avoid defining a whole new custom type. Other times, you might want to enforce a specific length for an array, for example, specifying that an array must contain exactly three elements.

TypeScript supports these use cases directly with Tuple types. To see how they look and work in practice, watch this video:

If this list has piqued your interest and you'd like a deeper dive into the various type definition options and when to use them, check out this post:

TypeScript Type Definitions Crash Course - Types and Npm, how are they linked? @types, Compiler Opt-In Types: When To Use Each and Why ?

If you'd like to explore the type system itself and its fundamental differences from nominal type systems (like Java or C#), have a look at this post:

TypeScript Type System Top 3 Key Concepts: How Does it Really Work? When Are Two Types Compatible? Different Than Several Other Type Systems

We hope these resources are helpful. Please explore the list below for more related posts and Angular resources.

To stay updated on new articles, consider subscribing to our newsletter.

If you're new to Angular, the Angular for Beginners Course is a great starting point:

Typescript Tutorial Videos: ES6 Features, Debugging, Type System — figure 1

More Angular Articles

If you found this post interesting, you might also enjoy these other popular articles: