Getting Started with TypeScript on Your Frontend

Because Static Typing is Awesome!

Lauren Wittenberg

Published in

Capital One Tech

4 min readMar 22, 2018

What is TypeScript and How is it Different from Standard JavaScript?

TypeScript was created in 2012 by Microsoft as a really versatile superset of JavaScript, meaning that JavaScript is technically already TypeScript. TypeScript actually compiles as standard JavaScript, which is a big benefit when it comes to migrating a codebase from JavaScript to TypeScript (more on that later). However, what makes TypeScript different from JavaScript is that it has additional functionalities that standard JavaScript doesn’t have, such as:

Optional static typing
Interfaces
Classes
Namespaces
Generics

In short, TypeScript adds functionality to JavaScript that helps to catch errors and promote codebase consistency, yet retains JavaScript’s power as a programming language.

TypeScript has Optional Static Typing — Why does that Matter?

Code riddled with errors = bad code. Static typing allows for errors to be detected at compile time, and catching errors as early as possible in the development process is preferable and can help reduce bugs at runtime.
You can better utilize your integrated development environment (IDE). With static typing, IDEs can better detect auto-completion as well as warn you about potential errors before you even compile. When utilizing IDE features such as auto-completion, development happens more quickly while minimizing simple mistakes such as spelling errors.
Knowledge is power! Static typing makes it easier for teams to work together because it adds readability and consistency to a codebase. This way, you don’t have to guess what type of parameters a function accepts or dig through documentation just to make a function call, among other things.

How Is My Team at Capital One using TypeScript?

I’m a Software Engineer for our Recurring Merchants feature, which displays a list of a credit card customer’s recurring merchants — things like cable bills, gym memberships, etc. — so that they can better track their spending. In 2017, my team completed a TypeScript migration so our codebase would be compatible with Angular(V2+). Teams at Capital One are constantly innovating, so we value staying as up-to-date as possible with open source technologies.

I had the opportunity to work on the TypeScript migration for my team’s project. Because TypeScript is compiled as JavaScript, I mainly had to rework some code to take advantage of TypeScript’s additional features. Static typing was the most valuable TypeScript functionality for my team because now that we are developing on top of the migrated code, it’s a lot easier to catch mistakes. The migration also made it easier for my team to understand the logic of what I wrote because adding static typing makes our codebase easier to read and understand.

The learning curve for the transition was fairly small because there was a lot of clear documentation to help us get started. Once I became familiar with the differences between JavaScript and TypeScript, my team’s codebase was migrated in a short amount of time.

Some things I learned along the way were:

How to translate a function from JavaScript to TypeScript; this let me choose when to implement static typing for function parameters and return values
Refactoring our controller to take advantage of TypeScript classes is smart design
It’s easy to build on top of the newly migrated TypeScript code — I’ve already started doing so!
TypeScript migration doesn’t have to be done all at once — We were able to migrate our controller first and the corresponding unit tests later

Was it Difficult to Move an Enterprise-Sized Codebase to TypeScript?

It wasn’t as hard as it sounds! TypeScript is extremely similar to standard JavaScript, so it’s easy to fill any knowledge gaps quickly. You also don’t have to migrate every part of your codebase at once. Since TypeScript is backwards-compatible with JavaScript, you can easily migrate at your own pace. While it may be a bit time consuming to get all your files in working order, the payoff is certainly worth it in the long run.

How to Get Started Using TypeScript?

The TypeScript documentation is pretty comprehensive and has this 5-minute tutorial as a good starting point. Here are some other resources I found useful getting started with TypeScript:

Happy coding!

DISCLOSURE STATEMENT: These opinions are those of the author. Unless noted otherwise in this post, Capital One is not affiliated with, nor is it endorsed by, any of the companies mentioned. All trademarks and other intellectual property used or displayed are the ownership of their respective owners. This article is © 2018 Capital One.