TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Using TypeScript in your project has never been easier than it is today. The TypeScript team has continually added features to allow you to reap the benefits of static typing while reducing the overhead to get there.

This course will teach you these new language features TypeScript has to offer. You'll use optional chaining, handle undefined behavior with the unknown type and assertion functions, create private classes, handle tuple (and other data types) types, as well as learn about conditional types.

You'll also learn how to prevent type widening with TypeScript's new const assertions and efficiently type string literals through the use of template literals.

All of these skills will be brought together into examples that Marius will show you how to apply these new TypeScript features to real-world problems.

Maxime Bourgeois

This lesson introduces the `?.` operator which is known as [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining). We're going to look at how we can use `?.` to safely descend into an object with properties which potentially hold the values `null` or `undefined`. We're also going to learn how to access properties with an expression using the `?.[]` bracket notation and how to call functions which may not exist using the `?.()` syntax.

Use the Optional Chaining Operator in TypeScript

This lesson introduces the `??` operator which is known as [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator). The `??` operator produces the value on the right-hand side if (and only if) the value on the left-hand side is `null` or `undefined`, making it a useful operator for providing fallback values.

We'll contrast the `??` operator with the `||` [logical OR operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR) which produces the value on the right-hand side if the value on the left-hand side is _any_ falsy value (such as `null`, `undefined`, `false`, `""`, `0`, …).

## Additional Reading

- [Nullish Coalescing: The `??` Operator in TypeScript](https://mariusschulz.com/blog/nullish-coalescing-the-operator-in-typescript)
- [The `&&` and `||` Operators in JavaScript](https://mariusschulz.com/blog/the-and-and-or-operators-in-javascript)

Use the Nullish Coalescing Operator in TypeScript

In this lesson, we'll go over TypeScript's `unknown` type. The `unknown` type is the type-safe counterpart of the `any` type. Both `unknown` and `any` are so-called [top types](https://en.wikipedia.org/wiki/Top_type) (also known as universal supertypes) of the type system. This means that every type in TypeScript is assignable to both `unknown` and `any`.

The main difference between the two types is that `unknown` is much less permissive than `any`: We have to do some form of checking before performing most operations on values of type `unknown`, whereas we don't have to do any checks before performing operations on values of type `any`.

Another difference is that `any` is assignable to every type, whereas `unknown` is only assignable to `any` and `unknown` itself. To assign `unknown` to any other types, we have to narrow it to a more specific type first.

## Additional Reading

- [The `unknown` Type in TypeScript](https://mariusschulz.com/blog/the-unknown-type-in-typescript)
- [New `unknown` top type](https://github.com/Microsoft/TypeScript/pull/24439) (origin pull request by Anders Hejlsberg)

Statically Type Unknown Values with TypeScript's unknown Type

This lesson introduces assertion functions which let us narrow the type of a variable or property for the remainder of the containing scope. We're going to learn how to create an assertion function by using the `asserts` keyword in the function signature. In particular, we're going to focus on narrowing the `unknown` type to a more specific type.

## Additional Reading

- [TypeScript 3.7: Assertion Functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions)

Narrow the unknown Type with TypeScript's Assertion Functions

In this lesson, we're going to look at how to perform `null` checks with assertion functions. We're going to assert that a nullable value doesn't hold the value `null`. In the process, we're going to learn how assertion functions integrate with TypeScript's control flow analysis.

Perform null Checks with Assertion Functions

In this lesson, we're going over how to create private class fields using TypeScript's `private` modifier. However, as we're going to see, the `private` modifier doesn't give us any actual protection at runtime; it only exists in TypeScript's type system and is completely compiled away when emitting JavaScript code.

Create Private Class Fields Using TypeScript's private Modifier

This lesson introduces private class fields which (unlike regular class fields) cannot be examined or modified outside of the class they're defined in. We're going to contrast private class fields with TypeScript's `private` modifier and public class fields.

We're also going to take a look at the JavaScript code that the TypeScript compiler emits when downlevel-compiling private class fields. Note that this code requires that the JavaScript runtime implement the `WeakMap` data structure (introduced as part of ES2015). Finally, we're going to learn how we can use closures to get true privacy guarantees in older runtime environments that do not implement `WeakMap`.

## Additional Reading

- [Private class fields](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields)
- [Class field declarations for JavaScript](https://github.com/tc39/proposal-class-fields)
- [Private methods and getter/setters for JavaScript classes](https://github.com/tc39/proposal-private-methods)

Create Truly Private Class Fields Using the #fieldName Syntax

Closures are an alternative to truly private class fields. If you need to encapsulate a private variable so that it can only be accessed in a controlled way, you can use a closure. This technique is particularly useful when your code has to run in older JavaScript environments that don't yet support truly private class fields or the ES2015 `WeakMap` data structure.

Encapsulate Truly Private Variables in a Closure

We're going to take a look at TypeScript's `strictPropertyInitialization` compiler option and how it helps us prevent using uninitialized class instance properties. If the `strictPropertyInitialization` flag is enabled, the type checker verifies that each instance property declared in a class either

- has a type that includes `undefined`,
- has an **explicit initializer**, or
- is **definitely assigned** to in the constructor.

The `strictPropertyInitialization` option is part of the family of compiler options that is enabled automatically when the `strict` flag is set. As with all the other strict compiler options, you can set `strict` to true and selectively opt out of strict property initialization checks by setting `strictPropertyInitialization` to `false`.

## Additional Reading
- [Strict Property Initialization in TypeScript](https://mariusschulz.com/blog/strict-property-initialization-in-typescript)

Ensure Initialization of Class Instance Properties in TypeScript

TypeScript lets us define array types as read-only so that we get a type error if we attempt to add, remove, or replace any elements of the array. We can use the `readonly` keyword to make an array type read-only. Alternatively, we can use the `ReadonlyArray<T>` type instead of `Array<T>` or `T[]`.

## Additional Reading

- [Read-Only Array and Tuple Types in TypeScript](https://mariusschulz.com/blog/read-only-array-and-tuple-types-in-typescript)

Declare Read-Only Array Types in TypeScript

Similar to how we can declare read-only array types, we can declare read-only tuple types using the `readonly` modifier. Any attempt to mutate a value of a read-only tuple type will result in a type error.

## Additional Reading

- [Read-Only Array and Tuple Types in TypeScript
](https://mariusschulz.com/blog/read-only-array-and-tuple-types-in-typescript)

Declare Read-Only Tuple Types in TypeScript

A `const` assertion is a special type assertion that uses the `const` keyword instead of a specific type name. When using a `const` assertion on an object literal expression, all properties will become `readonly` properties and no literal types within the expression will be widened.

## Additional Reading

- [Const Assertions in Literal Expressions in TypeScript](https://mariusschulz.com/blog/const-assertions-in-literal-expressions-in-typescript)
- [Literal Type Widening in TypeScript](https://mariusschulz.com/blog/literal-type-widening-in-typescript)

Prevent Type Widening of Object Literals with TypeScript's const Assertions

A `const` assertion is a special type assertion that uses the `const` keyword instead of a specific type name. When using a `const` assertion on an array literal expression, the resulting type will be a `readonly` tuple type and no literal types within the expression will be widened.

Prevent Type Widening of Array Literals with TypeScript's const Assertions

In this lesson, we're going to learn how we can use `const` assertions to implement an enum-style object in TypeScript. We generally don't want widening of any literal types in this object, so we can use a `const` assertion. We're also going to compare our enum-style object to a native TypeScript enum.

Implement and Type Enum-Style Objects in TypeScript

In this lesson, we're going to learn about conditional types, a powerful feature of TypeScript's type system. Conditional types let us express non-uniform type mappings, that is, type transformations that differ depending on a condition.

A conditional type describes a type relationship test and selects one of two possible types, depending on the outcome of that test. It always has the form `T extends  U ? X : Y`, which makes conditional types look similar to conditional expressions in JavaScript.

We're going to use a conditional type to implement a `NonNullish<T>` helper type. This type is identical to the `NonNullable<T>` helper type which is defined in the core type declaration files that ship with the TypeScript compiler. Step by step, we're going to resolve an application of the `NonNullish<T>` type to understand how conditional types are being evaluated.

## Additional Reading

- [Conditional Types in TypeScript](https://mariusschulz.com/blog/conditional-types-in-typescript)

Implement a NonNullish<T> Conditional Type in TypeScript

In this lesson, we're going to write another conditional type. This time, we'll implement a `ReturnTypeOf<T>` helper type which lets us extract the return type of a function type. This type is identical to the `ReturnType<T>` helper type that's defined in the core type declaration files that ship with the TypeScript compiler.

Implement a ReturnTypeOf<T> Conditional Type in TypeScript

In this lesson, we're going to explore template literal types, another powerful feature of TypeScript's type system. Template literal types have the same syntax as template literals in JavaScript, but they're used in type positions. Using template literal types, we can produce a union of string literal types and perform string concatenation in the type space:

```ts
type Dimension = "block" | "inline";
type MarginProperty = `margin-${Dimension}`;
```

## Additional Reading

- [Template Literal Types](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html)
- [String Literal Types in TypeScript](https://mariusschulz.com/blog/string-literal-types-in-typescript)
- [Mapped Types in TypeScript](https://mariusschulz.com/blog/mapped-types-in-typescript)
- [`keyof` and Lookup Types in TypeScript](https://mariusschulz.com/blog/keyof-and-lookup-types-in-typescript)

Statically Type String Literals with Template Literal Types in TypeScript

In this final lesson, we're going to dive deep into a more complex example in which we combine mapped types, key remapping, template literal types, and indexed access types to statically type a highly dynamic JavaScript function in TypeScript.

Use TypeScript's Mapped Types and Template Literal Types Together

Explore the capabilities of TypeScript’s type system and learn how to use advanced static types in practice.

Advanced Static Types in TypeScript

TypeScript applies a fundamental change to JavaScript and applies static typing to the code in our apps. This course will dive into the type system that TypeScript provides.

Use Types Effectively in TypeScript

This course explores some of the new TypeScript features, using examples you might encounter in your projects. You'll explore type guards, mapped types, interfaces, and more!

Advanced TypeScript Fundamentals

Marius Schulz

What you'll learn:

Prerequisites:

You might also like these resources:

Advanced Static Types in TypeScript

Use Types Effectively in TypeScript

Practical Advanced TypeScript

Credits

Course Content

You might also like these resources:

Advanced Static Types in TypeScript

Use Types Effectively in TypeScript

Practical Advanced TypeScript