TLDR; My Favourite Parts of TypeScript

The following are the parts of TypeScript I use most on a day-to-day basis. My focus is on quick syntax wins for people coming to TypeScript from another language. TypeScript also includes the type safety and Object Oriented goodness of a strongly typed language. But those concepts can transfer over from other languages, and are a separate conversation.

Declaring Class Variables in Your Constructor

This is one of my favourite things about TypeScript. Constructor Assignment allows you to declare class variables inline as the constructor parameters.

Example:

Old Style:

Easy Type Safety with Union Types

Imagine a situation where you have conditional logic based on a string, and you want to ensure that the function only allows a couple of string values.

You now have some type safety:

You can even extract this to its own type:

Union Types are their own nuanced topic, and you can do a lot more with them. If you are using union types on objects, you can only access variables that are shared between the two objects. In other words, it’s like you’ve made an interface of shared attributes).

Partial Types

Partial Types let you make a type that is a subset of another type. This is great when you want to use a fragment of a model, but still want to inherit some of the type safety of the original model. For instance, say creditCard gets removed from your User model, a Partial<User> with a reference to creditCard would break as well.

I use partial types all the time in factory functions to build test data. Example:

Loosey Goosey Duck Typing 🦆 with Spread (…)

My Favourite part of TypeScript is blending in JavaScript techniques into my code. My favourite part of JavaScript technique is blending functional techniques into my code.

The spread (`…`) operator allows objects, arrays or strings to be expanded in place. This is used to achieve things like cloning an object/array, or copying and then modifying the object. When there is a duplicated attribute key, the later value is used

Duck Typing (from JavaScript) can be used to convert Object Literals into Class. In my above example, my object literal is interpreted as the class Partial<Customer> without needing to explicitly create a new class object (no new Customer(details)). You’ve probably done this already even if you aren’t aware of it. Because you aren’t instantiating a new object instance, you are also skipping any code in the class constructor.

Here is a more contrived example:

Referential Transparency

In the JavaScript / TypeScript world, people adopt a lot of functional paradigms into their code. React in particular tries to be as functional as possible (eg. Redux, or the movement to functions and hooks over classes). One common functional principle that is easy to adopt is Referential Transparency.

The value of a variable in a functional program never changes once defined.

The idea is that because you are always creating copies over modifying your variables, you avoid bugs due to accidental variable modification. Commonly, this is done by the use of the spread (`…`) operator to make a copy of the object. The spread operator along with duck typing makes this really easy.

Example of an accidental side effect:

This can happen when you create some high-level business logic which modifies a model as part of the logic. This creates code which has built-in temporal dependencies (i.e. the order code is called matters). Later on, some of that business logic gets reused, because we don’t want to duplicate our business logic. However, that code contains a hidden side effect (the direct object modification), which creates a bug. This situation can be avoided if referential transparency is used.