This is a two-part series. You can jump to part 2.
Imagine if you could use a tool that finds defects for you automatically and makes it easier to squash bugs before they make it to production! This walk through demonstrates how.
The repository contains documentation paired with several commits to walk through the process. If you’re a hands-on person and want to dive in, visit the repository and get started right now! I recorded a companion video series to guide you through each step.
Each video is only a few minutes long so feel free to bookmark this page and come back often. You may have already found these videos from my Twitter thread.
index.js file to
Note: an alternative way to initialize TypeScript’s configuration file is to use the
npxcommand, like this:
npx tsc --init
2. Configuration and the Spread (Rest) Operator
3. Classes and Types
A major benefit of using TypeScript, as you may be able to guess from the name, is the ability to use classes and types. I refactor the code to use classes instead of function constructors and annotate the properties with types. This immediately uncovers another bug for us that will be easy to fix in the next step.
4. Custom Types
The class refactoring revealed a property that wasn’t named consistently. This is fixed by updating the constructor function to match the names use in other code. Next, a custom type is defined that declares the two possible string values for
home. This reveals a defect that, when fixed, corrects the phone display logic.
5. Scope and the “let” Keyword
6. Lambda Expressions
this is. By default, scope is at a function level, so
this.x has a different meaning in a nested function. Lambda expressions not only simplify the definition of functions, but also capture outer scope for a consistent hierarchy of variable access.
7. String Templates
8. Generic Types
9. Custom Types with Generics
To simplify the code, a custom type is created that uses generics to define a predicate. You can think of a predicate as a test. Given an item
T it returns either
false. This type can then be used to define the second parameter in the