Step into TypeScript (part 1)

Continuing my exploration of JavaScript has led me into the world of TypeScript. TypeScript is a free, open-source, typed programming language that is a superset of JavaScript.

TypeScript was released in October 2012 with version 0.8 and developed by Microsoft. A superset of JavaScript, TypeScript knows JavaScript and adds additional syntax to make a more fortified application. Also, being built on JavaScript, TypeScript can be transpiled into JavaScript and perform type inference so you do not have to add any additional code. Type inference is defined as "the ability to deduce, either partially or fully automatically, the type of an expression at compile time," with 'type' referring to data types (i.e. 'string', 'number', etc.).

TypeScript focuses highly on data types, hence the name and enhanced syntax and features we will go over. One of these features is defining types with interface declaration. Interfaces, in TypeScript, act as contracts that enforce consistent assignment of types. Interface declaration can be compared to JavaScript's subclassing, in the sense that you establish the structure and/or type of something. All of your JavaScript code will not always be inferred, so you use interfaces to ensure that TypeScript knows what values are to be expected. Let's take a look at an example.

These examples are provided by TypeScript's documentation.

const user = {
  name: "Allyn",
  id: 0,
};

Here we have an object called user that has properties of name and id. The properties of name and id can be inferred as a string and number respectively, but there's a way to enforce that these properties are consistently strings and numbers.

interface User {
  name: string;
  id: number;
}

By using interface declaration, you can ensure that name will always be a string and id a number. Think of this User interface as a blueprint for user objects. To make sure that JavaScript follows this blueprint, we create an 'instance' of a type by adding : TypeName in between the variable name and the assignment operator.

const user: User = {
  name: "Allyn",
  id: 0,
};

From a JavaScript perspective, this is comparable to subclassing. In fact, you can use interface declaration for classes too, since both JavaScript and TypeScript support classes.

TypeScript can use primitive JavaScript data types in interfaces, which include: booleans, null, and undefined. TypeScript adds to this list with types like any, never, and void. The any type is to signify that there aren't any restrictions to what type can be assigned, the never type is to determine what type will never be assigned, and the void type is used for having no type at all, undefined, and is commonly used in the context of function return values.

Out of the box, TypeScript uses primitive data types, but what about complex data types such as collections? Fortunately, TypeScript allows you to create your own type. The 2 most popular ways to create types are with unions, which can be recognized with a pipe |, or with generics, following this syntax: <variable>.

Unions can be used when a type can be one out of many types and are commonly used for defining options out of a set. In this example, color can be one out of many colors, and spice can be one of many numbers.

const ColorOptions = "green" | "yellow" | "pink" | "black";
const SpiceOptions = 1 | 3 | 5 | 7;

Generics act as variables for types and are commonly used to describe what type an array contains. For example, this NamesArray will consist of strings. Take note of the type keyword that creates an alias for the type. In this case, NamesArray is the alias for the array type.

type NamesArray = Array<string>;

In this example, provided by the TypeScript documentation, you can use generics in conjunction with interfaces to create types that have a predetermined consistency.

interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}

// This line is a shortcut to tell TypeScript there is a
// constant called `backpack`, and to not worry about where it came from.
declare const backpack: Backpack<string>;

const object = backpack.get();

Let's go through this code line by line. We start off by creating a backpack interface that consists of 2 methods: add and get, both refer to the Type variable that will be filled in later when the interface gets used. Next, our backpack variable gets 'string' passed in, meaning the obj is a string and the get method returns a string since both refer to the Type variable.

From what we've gone over, we can see how essential data types are for TypeScript. We can see that the syntax follows closely to JavaScript but the use of the language shifts to hone on consistency and avoiding errors. In my next post, I will go over the Structural Type System, Classes, and how TypeScript can be compared to JavaScript.