TypeScript Fundamentals

Adding strong typing to large JavaScript apps with TypeScript helps reduce bugs, and keep developers on the performant and maintainable path. We'll look at recent advancements in the JavaScript standard like classes and decorators; some new tools for managing asynchrony; and then dive into TypeScript to add static typing to the mix. In this course, you'll learn everything you need to know to be set up for success when using TypeScript to build a modern web app.

TypeScript Fundamentals

Today's JavaScript is Yesterday's TypeScript

Starting with the ES2015 revision of the JavaScript language standard, it has begun to adopt many well-loved features of TypeScript. Because of this, it’s common to see some things that the JavaScript community would consider “experimental” used widely in TypeScript programs. We’ll look at some of these areas in detail.

  • Today's JavaScript is Yesterday's TypeScriptModules

    Modules have been a first class part of TypeScript since before people started using them widely in JavaScript. We'll look at how to stitch encapsulated and modular pieces of code together, and cover some best practices regarding namespaces, named and default exports, and importing.

  • Today's JavaScript is Yesterday's TypeScriptEXERCISE: Refactor into modules

    Using our best practices for modules, refactor the code for this exercise so that it's separated into distinct modules, and more easily unit testable.

  • Today's JavaScript is Yesterday's TypeScriptClasses and Prototypes

    Classes are an important abstraction built on top of JavaScript's prototypal inheritance, which reduces the propensity for developers to tread into a counterintuitive territory. TypeScript makes heavy use of the concept of a JavaScript class and adds some unique features that you won't see in the JS world.

  • Today's JavaScript is Yesterday's TypeScriptEXERCISE: Color picker: class edition

    Implement a color picker using JavaScript classes.

  • Today's JavaScript is Yesterday's TypeScriptLunch

    Break for lunch

  • Today's JavaScript is Yesterday's TypeScriptDecorators

    Decorators allow us to modify and annotate things like classes, functions and values in an easy and declarative way. While they're starting to look like promising additions to the JavaScript language spec, you'll see them in TypeScript all the time.

  • Today's JavaScript is Yesterday's TypeScriptEXERCISE: Memoized functions

    Memoization is a technique that can be used with pure functions, where output values are “remembered” for an input argument(s). Thus, re-invoking the function with the same arguments will return the same “remembered” result. We’ll implement a @memoize function decorator so that we can apply this technique easily and cleanly in our code.

  • Today's JavaScript is Yesterday's TypeScriptEnhanced Objects & Property Descriptors

    Enhanced object literals allow us to do common things like add methods and properties more clearly and easily than ever before. We'll look at how object literals have evolved since the ES5 JavaScript standard, and then explore additional features that TypeScript bring to the party.

  • Today's JavaScript is Yesterday's TypeScriptEXERCISE: Getter/Setter based properties

    Using a property descriptor, define a property on an object that's derived from other values. We should be able to get and set this property, just as if it was value based. For the getter and setter you define, you should take care of keeping all dependencies properly in sync.

  • Today's JavaScript is Yesterday's TypeScriptIterators and Generators

    Several core JavaScript objects are “Iterables”, meaning they can provide an Iterator: special objects that maintain iteration state and can be asked for the next item in a sequence. Generator functions are simply functions that return iterators. We’ll look at these concepts in depth, and illustrate how they serve as the foundation for many higher-level JavaScript language features.

  • Today's JavaScript is Yesterday's TypeScriptAsync & Await

    Async and await are starting to creep into the JavaScript world, but these keywords have been broadly used in TypeScript programs for many years. We'll learn about how these new keywords allow us to write async code that looks almost like the synchronous (blocking) equivalent!

  • Today's JavaScript is Yesterday's TypeScriptRecap & Wrap Up

    We'll recap what we've covered today, and set our sights on a homework assignment and tomorrow's agenda

  • Today's JavaScript is Yesterday's TypeScriptHOMEWORK: Async Task Runner

    One of the most powerful things we can build on top of generator functions is an “async task runner”. You have an “autocomplete” use case already set up, that involves running several async operations in sequence.