This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.
Table of Contents
IntroductionMike North introduces his TypeScript course. TypeScript is a
Variable DeclarationsMike examines the specifics of variable declarations var, let and const for reassigning, scope, and hoisting.
Type ConversionMike discusses the sometimes confusing type conversion with the + and unary operators
Adding TypesMike reviews reasons for adopting types.
Implicit TypingMike discusses how TypeScript can guess types through the assigning of a value to a variable.
Explicit TypingMike discusses how to set explicit typing, which is the practice of setting a type while declaring a variable.
Object ShapesAfter 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 FunctionsIn this challenge, students convert color values from different color systems.
Challenge 1: SolutionMike walks through the solution to Challenge 1.
InterfacesAfter 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 TypesAfter 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 ManagerIn this challenge, students design TypeScript interfaces for two accounts, user and admin. Mike takes questions from students.
Challenge 2: SolutionMike walks through the solution to Challenge 2. Mike takes questions from students.
MethodsMike shows that methods can be defined in a manner similar to objects. Static methods can be defined using the static keyword.
InheritanceMike discusses how subclasses can be created using the extends keyword. The super keyword can be used to call methods on the parent class.
SpeciesMike reviews the species, which is a special property on classes when creating derived objects. Mike takes questions from students.
Mixins & ClassesAfter showing mixins patterns, which are abstract classes, Mike reviews how to define the shape of classes in TypeScript.
EnumsMike introduces enums, which are types used to define a fixed number of possible values.
Type AliasesMike shows how to use the type keyword to define a type alias.
Challenge 3: Card DealingIn this challenge, students build out a card dealing program using enum types to represent each card's suit and number.
Challenge 3: SolutionMike walks through the solution to Challenge 3.
Destructured AssignmentMike shows a way to pick one or more properties off an object into distinct variables. Mike takes questions from students.
Rest and Spread PropertiesAfter 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 & SettersMike 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: TypesMike discusses how functions are types and how interfaces can be used to describe a function type.
Functions: ParametersMike discusses required parameters, default values, and rest parameters. TypeScript assumes every argument in the function is required.
Challenge 4: Functional CashierIn this challenge, students build out a functional shopping cart. Mike takes questions from students.
Challenge 4: SolutionMike walks through the solution to Challenge 4.
Introducing GenericsMike introduces generics, which allow the reuse of code across types, interfaces, and functions.
Access Modifier KeywordsMike 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 OverloadingMike demonstrates that TypeScript allows for more than one function types for the same function as a list of overloads.
Challenge 5: Typed StackIn this challenge, students build a stack data structure using generics. Mike takes questions from students.
Challenge 5: SolutionMike walks through the solution to Challenge 5.
Iterators & Generators
Introducing IteratorsMike introduces iterators, which allow access one item from a collection at a time and keeps tracks of the current position.
IterablesMike reviews and demonstrates iterables, objects that can ask for an iterator.
GeneratorsMike discusses generators, which define an iterative algorithm by writing a single function which can maintain its state.
IteratorsMike demonstrates the ability to pass values in while iterating. Mike takes questions from students.
Challenge 6: Fibonacci GeneratorIn this challenge, students build a generator function that returns an iterator, which emits the numbers of the Fibonacci sequence.
Challenge 6: SolutionMike walks through the solution to Challenge 6.
React & TypeScript
Stateless Functional ComponentsMike discusses how to integrate TypeScript with React by first addressing using interfaces to describe props.
Integrating React & TypeScriptAfter getting the project up and running, Mike shows how to integrate TypeScript with React.
Challenge 7: Autocomplete, Part 1In this challenge, students code an autocomplete feature.
Challenge 7: SolutionMike walks through the solution to build stateless functional component for a search result item.
Stateful ComponentsMike discusses stateful components, which are usually classes that describe props and state. Mike takes questions from students.
Challenge 8: Autocomplete, Part 2Before 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: SolutionMike walks through the solution to build stateless functional component for a search result item.
Challenge 9: Autocomplete, Part 3In this challenge, students work on refactoring state management in the project.
Challenge 9: SolutionMike walks through the solution.
Challenge 10: Autocomplete, Part 4In 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: SolutionMike walks through the solution.