This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.
Table of Contents
TypeScript
Introduction
Mike North introduces his TypeScript course. TypeScript is a
Primitive Types
Mike reviews six primitive types in JavaScript.
Variable Declarations
Mike examines the specifics of variable declarations var, let and const for reassigning, scope, and hoisting.
Type Conversion
Mike discusses the sometimes confusing type conversion with the + and unary operators
Course Agenda
Mike reviews the course agenda, which covers the difference between modern JavaScript and TypeScript, how TypeScript provides structure for React components, using types to make the code more expressive, practice strategies for adoption, and more.
Types
Adding Types
Mike reviews reasons for adopting types.
Implicit Typing
Mike discusses how TypeScript can guess types through the assigning of a value to a variable.
Explicit Typing
Mike discusses how to set explicit typing, which is the practice of setting a type while declaring a variable.
Object Shapes
After talking about nominal type and structural type systems for checking if two types are the same, Mike reviews object shapes, which are the names of properties and types of their values.
Challenge 1: Color Functions
In this challenge, students convert color values from different color systems.
Challenge 1: Solution
Mike walks through the solution to Challenge 1.
Interfaces
After revealing that additional properties can be regarded as a possible bug as object shapes are checked more strictly, Mike introduces interfaces, which allow for describing the structure. Mike takes questions from students.
any & never Types
After introduces the any type, which bypasses type checking, Mike reviews the never type. The never type is the return type for functions that never return and never is the type of variables under type guards that are never true.
Challenge 2: Account Manager
In this challenge, students design TypeScript interfaces for two accounts, user and admin. Mike takes questions from students.
Challenge 2: Solution
Mike walks through the solution to Challenge 2. Mike takes questions from students.
Classes
Defining & Creating Instances
Mike reviews classes in JavaScript including the constructor function used to initialize instances.
Methods
Mike shows that methods can be defined in a manner similar to objects. Static methods can be defined using the static keyword.
Public & Instance Fields
Mike reviews the proposed public and instance fields on classes in JavaScript.
Inheritance
Mike discusses how subclasses can be created using the extends keyword. The super keyword can be used to call methods on the parent class.
Species
Mike reviews the species, which is a special property on classes when creating derived objects. Mike takes questions from students.
Mixins & Classes
After showing mixins patterns, which are abstract classes, Mike reviews how to define the shape of classes in TypeScript.
Enums
Mike introduces enums, which are types used to define a fixed number of possible values.
Arrays & Tuples
Mike reviews arrays in TypeScript, which work the same way as in JavaScript. Mike takes questions from students.
Type Aliases
Mike shows how to use the type keyword to define a type alias.
Challenge 3: Card Dealing
In this challenge, students build out a card dealing program using enum types to represent each card's suit and number.
Challenge 3: Solution
Mike walks through the solution to Challenge 3.
Object Literals
Enhanced Object Literal
After reviewing JavaScript objects, Mike examines enhanced object literal.
Destructured Assignment
Mike shows a way to pick one or more properties off an object into distinct variables. Mike takes questions from students.
Rest and Spread Properties
After discussing that rest properties collect the remaining enumerable property keys that are not already picked off by the destructuring pattern, Mike reviews spread properties, which copies their own enumerable properties from a provided object onto a newly created object.
Getters & Setters
Mike reviews getters and setters. While a getter is a method that gets the value of a specific property, the setter is a method setting the value of a specific property.
Functions: Types
Mike discusses how functions are types and how interfaces can be used to describe a function type.
Functions: Parameters
Mike discusses required parameters, default values, and rest parameters. TypeScript assumes every argument in the function is required.
Challenge 4: Functional Cashier
In this challenge, students build out a functional shopping cart. Mike takes questions from students.
Challenge 4: Solution
Mike walks through the solution to Challenge 4.
Generics
Introducing Generics
Mike introduces generics, which allow the reuse of code across types, interfaces, and functions.
Access Modifier Keywords
Mike discusses access modifier keywords, public, protected, and private, which help encapsulate a class and determines access to the class. Mike takes questions from students.
Function Overloading
Mike demonstrates that TypeScript allows for more than one function types for the same function as a list of overloads.
Challenge 5: Typed Stack
In this challenge, students build a stack data structure using generics. Mike takes questions from students.
Challenge 5: Solution
Mike walks through the solution to Challenge 5.
Iterators & Generators
Introducing Iterators
Mike introduces iterators, which allow access one item from a collection at a time and keeps tracks of the current position.
Iterables
Mike reviews and demonstrates iterables, objects that can ask for an iterator.
Generators
Mike discusses generators, which define an iterative algorithm by writing a single function which can maintain its state.
Iterators
Mike demonstrates the ability to pass values in while iterating. Mike takes questions from students.
Challenge 6: Fibonacci Generator
In this challenge, students build a generator function that returns an iterator, which emits the numbers of the Fibonacci sequence.
Challenge 6: Solution
Mike walks through the solution to Challenge 6.
React & TypeScript
Stateless Functional Components
Mike discusses how to integrate TypeScript with React by first addressing using interfaces to describe props.
Integrating React & TypeScript
After getting the project up and running, Mike shows how to integrate TypeScript with React.
Challenge 7: Autocomplete, Part 1
In this challenge, students code an autocomplete feature.
Challenge 7: Solution
Mike walks through the solution to build stateless functional component for a search result item.
Stateful Components
Mike discusses stateful components, which are usually classes that describe props and state. Mike takes questions from students.
Challenge 8: Autocomplete, Part 2
Before students continue to work building out the autocomplete feature, Mike reviews code additions to the project in order to aid in completing the challenge.
Challenge 8: Solution
Mike walks through the solution to build stateless functional component for a search result item.
Challenge 9: Autocomplete, Part 3
In this challenge, students work on refactoring state management in the project.
Challenge 9: Solution
Mike walks through the solution.
Challenge 10: Autocomplete, Part 4
In this challenge, students implement task function that treats the contents of a generator function that appears to work like async and await. Mike takes questions from students.
Challenge 10: Solution
Mike walks through the solution.
