On learning curve of TypeScript

May 18, 2021typescriptjavascript

Let’s assume that you were convinced by benefits of using TypeScript over JavaScript in a big project. How steep is the learning curve for you as an experienced JavaScript developer with or without previous statically typed language experience?

TypeScript doesn’t change how your code runs, you’ll still have to learn how JavaScript works in order to write code that actually does something. It’s important to remember that TypeScript uses the same runtime as JavaScript.

In my experience, the TypeScript learning curve is low when you experienced with Javascript and a static typed language. Majority of difficult time is to wrestle missing types.

TypeScript is a language very much in the growth phase of its life. It will pay off in big projects with many contributors, despite following overheads rated from low to high effort:

Project configuration

TypeScript exposes hundreds of compiler options, it seems flexible to machine but intimidating to human. Most developers will copy recommended configs somewhere, understand some common options and call it a day.

You can always go back to check tsconfig reference when something doesn’t work as expected.

New syntax old habits

TypeScript knows the JavaScript language and will generate types for you in many cases. Be aware that many dynamic design patterns in JavaScript make it difficult for types to be inferred automatically.

Pretty sure you’ll bring your OOP knowledge from previous statically typed language like Java to TypeScript, but be aware following differences:

  • JavaScript is prototype-based object-oriented. How JavaScript allows you to create hierarchies of objects and to have inheritance of properties and their values if different from class-based traditional OOP.
  • Functions are first-class citizens, and functional composition is preferred over class hierarchy.
  • In TypeScript, every type is just a set, and you work with types in a set-theoretic way. Not a single exact type mapping one-to-one between runtime and compile-time.
  • TypeScript’s type system is stripped at compile-time, information about the instantiation of a generic type parameter is not available at runtime.

Type declarations

TypeScript’s type system aims to make it as easy as possible to write typical JavaScript code without bending over backwards to get type safety.

TypeScript uses the type any whenever it can’t tell what the type of an expression should be. To take advantages of type system, you’ll need type declarations literally everywhere including your own codes and 3rd-party libraries.

TypeScript needs JavaScript’s ecosystem to survive. If you’re a library developer, you should learn how to write declaration file to match how your library is consumed.

As consumer, best to use packages written in TypeScript or included declaration files. Otherwise, downloading the corresponding @types package from DefinitelyTyped, type declaration packages should always have the same name as the package name on npm, but prefixed with @types/.

Beyond JavaScript

Beside adding a type system layer on top of JavaScript, TypeScript also has developed it own features to better reflect as a powerful static typed programming language compares to other traditional ones.

Keep in mind these features will be stripped off or transpiled to JavaScript at compile-time.

Typescript is a superset of JavaScript so you have more power in what you can do. Beside the basic types and utility types, here the non-exhaustive list:

  • Enums - not a type-level extension of JavaScript, define a set of named constants, used to document intent, or create a set of distinct cases.
  • Namespaces - a TypeScript specific way to organize code, are simply named JavaScript objects in the global namespace, can span multiple files.
  • Triple-Slash Directives - are single-line comments containing a single XML tag, contents of the comment are used as compiler directives.
  • Abstract Classes - serve as a base class for subclasses which do implement all the abstract members, can also contain abstract methods and abstract fields that hasn’t had an implementation provided.
  • Generics - one of the main tools in the toolbox for creating reusable components, you can write generic types, generic classes, and generic constraints.