Mike North
Stripe
Making TypeScript Stick
3 hours, 59 minutes CC
Course Description
Cross the gap from simply knowing TypeScript basics and how to read TypeScript code to being able to tackle new, challenging TypeScript problems. You'll go through a series of challenges designed to reinforce your knowledge and make the important TypeScript concepts truly "stick" in your mind. Test your knowledge through quizzes, challenges, and even a TypeScript game show!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 6 minutes
Mike North introduces the course by providing some brief background information, the purpose and inspiration for this course, and what to expect from this course.
Intro Quiz
Section Duration: 23 minutes
Mike walks through the first few questions from the introduction quiz that focus on TypeScript basics. TypeScript fields, immutable values, and a fill-in-the-blank question regarding how to expand a string are covered in this segment.
Mike discusses questions from the introduction quiz regarding primitive types. The union of the two primitive types, string and number, results in a never, whereas the interface types String and Number do not.
Mike walks through the last question from the introduction quiz regarding the order of execution when it comes to async functions and promises. If a promise has been resolved it does not mean the corresponding .then or await is called immediately.
Recent TypeScript Features
Section Duration: 1 hour, 15 minutes
Mike discusses the recent change to TypeScript, which allows variadic tuple types. A variadic tuple type is a tuple type that has the same properties, defined length, and the type of each element is known, but where the exact shape is yet to be defined.
Mike demonstrates the ability to no longer add types to every class field with class property inference when noImplicitAny is set to true. A student's question regarding what happens when there are conflicting types in the constructor and declaration is also covered in this segment.
Mike discusses how thrown values used to be considered type any but now can be chosen to be regarded as type unknown. The useUnknownInCatchVariables compilerOption allows any error found in a catch block to be labeled as type unknown automatically.
Mike demonstrates that template literal types build on string literal types and can expand into many strings via unions. Key remapping has been given a new syntax to allow the transformation of keys in a more declarative way.
Mike discusses the compiler flag that automatically describes the possibility of being undefined: noUncheckedIndexAccess.
Students are instructed to build a data store with type errors that alert on miss-named methods in the class. If a new entity such as Comic is added, type errors should alert the absence of a clearComics, getAllComics, and getAllSongs method. There should be no externally-visible properties on an instance of DataStore beyond the required methods, the code and the test suite should type-check, and all pre-existing tests should pass.
Mike walks through the solution to the typed data store exercise.
Compiling TypeScript
Section Duration: 51 minutes
Mike walks through 13 brief exercises to help familiarize with whether or not TypeScript will compile and, if not, what kind of error to expect with the given code example. A student's questions regarding what an abstract class is also covered in this segment.
Students are instructed to implement new code to allow the refactored jQuery snippets to run correctly.
Mike walks through the solution to the typing jQuery exercise.
Challenges
Section Duration: 1 hour, 8 minutes
Mike provides a brief TypeScript version of the game Jeopardy. Categories covered include language features, compiler options, utility types, tools and ecosystem, best practices, and JS/TS conversion.
Mike walks through a few examples of beginner-level exercises from the type-challenges GitHub repo and answers a student's question regarding why a read-only array and array are treated differently. Examples in this segment include implementing the correct types for each of the following If<C, T, F>, LengthOfTuple<T>, EndsWith<A, B>, and Concat<A, B>.
Mike demonstrates some intermediate type challenges, including correctly typing ReturnOf<F> and Split<S, SEP>.
Mike answers student questions regarding how practical the type challenges are for everyday use of TypeScript and if ternary expressions with the extends keyword are the only way to do conditional types. A walkthrough of the last intermediate type challenge involving correctly typing IsTuple is also covered in this segment.
Mike walks through an example of an expert type challenge, including solving for the correct type for IndexOf<T, U>.
Example Exercise
Section Duration: 13 minutes
Students are instructed to create a utility type WrapForPenpal<T> that takes an object T with methods and emits a type with similar methods. Any non-promise return types become ”Promise-ified.”
Mike walks through the solution to the penpal types exercise.
Wrapping Up
Section Duration:
Mike wraps up the course by providing some closing statements regarding the course.
I just completed "Making TypeScript Stick" by Mike North on Frontend Masters! I now feel so much more confident about leveraging the powers of TypeScript in making scalable applications.
Ankit Kaushik
AnkitKaushik24
I just completed "Making TypeScript Stick" by Michael North on Frontend Masters! It was fun & insightful course for me, like finally able to see "oh that is how you use TypeScript with some edge cases!". really great, thanks!
Ridho Febriansa
ridhofebriansa
I just completed "Making TypeScript Stick" by Mike North on Frontend Masters! This is a tough course but I need to get familiar with utility types and build types with keyof, typeof and extends.
Connie Leung
connieleung404
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops