The Basics of TypeScript

What is TypeScript and why should you try it?

Rohit Malhotra
Nov 22, 2019 · 6 min read
Photo by Arnold Francisca on Unsplash

Typescript is a superset of JavaScript that compiles to plain JavaScript. As the name suggests, typescript gives us a way to write JavaScript with type safety as you can with other strongly typed languages, like C# or Java.

JavaScript is a valid typescript with types being optional, so one can easily migrate JavaScript projects to typescript and progressively factor in type safety.

It gives us compile-time type safety and vastly better IntelliSense in IDEs. This helps you to catch bugs early and boost productivity.

Say goodbye to schema-less objects. Say hello to self-documented input and output objects.


Type Annotations

All variables, function arguments and function return types are defined using type annotations in typescript as shown below:

Primitive types

The JavaScript primitive types ie number, string, boolean can all be used as built-in types in typescript.

Arrays

If we want to define a variable as an array, we can simply postfix [] with any valid type annotation. This allows us to safely do manipulation of the array objects without worrying about assigning an array member with the wrong type. This is demonstrated below:

Interfaces/User-defined types

We can define the schemas complex objects in JavaScript with the help of types or interfaces as shown below:

Types and interfaces can both be used to define types. They can both be extended/implemented by classes. Detailed differences in interface and type can be read here.

Optional properties

We can simply postfix ? to the variable we know is optional as described below:

Inline annotations

Instead of creating a new type or interface for every object, we can define its structure inline as demonstrated below:

Special types

  • any → We can define the type of a variable as any indicating that anything can be assigned to it. One should avoid using this since this defeats the purpose of defining types.
  • null and undefined → Unless strictNullChecks flag in ts compiler options is true , we can assign null/undefined to any other type.
  • :void → This used when a function does not have a return type.

Generics

Some functions/algorithms do not depend on the actual type of the object. For example, a function takes a list of items and a predicate to return a filtered list based on the predicate.

This way we get type safety in the returned list as well. In fact, since JavaScript already has a filter function for arrays, internally typescript uses generics to define its structure.

Union type

In some cases, we want a variable to be one of multiple types, for eg, a string or a number . We can simply define it like this:

Intersection type

In some cases, we want to merge the properties of two objects into a new object. Intersection type allows us to do this in a type-safe way, as demonstrated below:

Tuple type

In JavaScript, we generally use arrays as a tuple. We can simply define that tuple as :[typeOfElement1, typeOfElement2] in typescript.

Enums

An enum is a collection of related values. JavaScript does not support enum as a data type., but typescript does.


Functions

We can define the arguments and return type of functions as shown below:

Even if we don’t define the return type of a function, typescript is smart enough to infer the return type on its own. So, the following also works:

But it is always recommended to define return types to avoid mistakes like this:

Optional parameters

We can define a parameter as optional:

Alternatively, we can have default values for parameters:

Function overloading

Typescript allows us to declare overloads. This is useful for documentation and safety purposes. But since JavaScript does not support function overloading, we have to implement a single generic function for all overloads.

Declaring functions

There are two ways to declare a function without an implementation.

The only difference in shorthand and longhand declarations comes if we want to declare function overloads. For example:


Namespaces

Namespaces can be used for logical grouping of functions as demonstrated below:

This logical grouping can also be achieved through file-based modules and is recommended over namespaces.


Classes

The only difference between ES6 classes and typescript classes is that typescript gives us type safety and access specifiers for class variables.

Access specifiers provide just compile-time safety, since compiled JavaScript does not support them — same as type safety.


Conclusion

Typescript gives us a way to write JavaScript with compile-time type safety while also supporting constructs like enums, access specifiers that are not supported in JavaScript.

References: https://basarat.gitbooks.io/typescript/

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Why Do Incompetent Managers Get Promoted?

1.3K

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade