Get Started With TypeScript in 2019

2019-02-08 09:56 AM

104

TypeScript is gaining more popularity in the JavaScript community and there is no better time than 2019 to start using TypeScript in your ...

Based on the Stack Overflow Developer survey in 2018, TypeScript is more “loved” as a programming language than JavaScript. The reason TypeScript is so loved amongst JavaScript developers is because adding types to JavaScript allows you to spot errors before running your code. The errors provided by the TypeScript compiler will give a good indication of how an error can be fixed. Adding types to JavaScript also allows code editors to provide some more advanced features, such as code completion, project-wide refactoring, and automatic module importing.

Learning TypeScript might seem intimidating if you come to think of it as a completely new programming language. However, TypeScript is just an added layer to JavaScript and you by no means have to know every bit of syntax that comes along with TypeScript before you can start using it. TypeScript allows you to easily convert a JavaScript file by changing the file extension from .js to .ts and all the code will compile properly as TypeScript. You can configure TypeScript to be more restrictive if you want to enforce a larger percentage of type coverage in your TypeScript files, but that can be done once you get more familiar with the language.

This article aims to bring you up to speed with around 95% of the scenarios you will typically encounter in a standard TypeScript project. For that last 5%, well, Google is your friend and I’ve added links to useful TypeScript resources at the bottom of the article.

Setting Up TypeScript

Of course, to begin writing TypeScript that compiles correctly, a properly configured development environment is required.

1. Install the TypeScript compiler

To start off, the TypeScript compiler will need to be installed in order to convert TypeScript files into JavaScript files. To do this, TypeScript can either be installed globally (available anywhere in your file system) or locally (only available at the project level).

Commands to run from the command line to install TypeScript globally or locally on your computer

2. Make sure your editor is setup to support TypeScript

You’ll want to make sure your editor is properly configured to work with TypeScript. For example, you may need to install a plugin (such as atom-typescript if using the atom editor), in order to fully take advantage of TypeScript in your editor. If using VS Code, TypeScript support is built-in, so there are no extensions required 😎.

3. Create a**tsconfig.json**file

A tsconfig.json file is used to configure TypeScript project settings. The tsconfig.json file should be put in the project’s root directory. The file allows you to configure the TypeScript compiler with different options.

You can have the tsconfig.json contain an empty JSON object if you just want to get TypeScript to work, but if you need the TypeScript compiler to behave differently (such as output transpiled JavaScript files in a specific output directory), you can read more about which settings can be configured.

Note: You can also run the _tsc --init_ to generate a _tsconfig.json_ file with some default options set for you and a bunch of other options commented out

4. Transpile TypeScript to JavaScript

In order to transpile your TypeScript code to JavaScript, the tsc command needs to be run in the terminal. Running tsc will have the TypeScript compiler search for the tsconfig.json file which will determine the project’s root directory as well as which options to use when compiling the TypeScript and transpiling .ts files to .js files.

To quickly test that the setup works, you can create a test TypeScript file and then run tsc in the command line and see if a JavaScript file is generated beside the TypeScript file.

If you’d like for the TypeScript compiler to watch for changes in your TypeScript files and automatically trigger the transpilation of .ts to .js files, you can run the tsc -p. command in your project’s repository.

In VS Code, you can use ⌘⇧B to bring up a menu that can run the transpiler in either normal or watch modes (tsc:build or tsc:watch, respectively).

The VS Code build tasks menu that can be brought up using ⌘⇧B

Understanding Static and Dynamic Types

JavaScript comes with 7 dynamic types:

Undefined

Null

Boolean

Number

String

Symbol

Object

The above types are called dynamic since they are used at runtime.

TypeScript brings along static types to the JavaScript language, and those types are evaluated at compile time (without having to run the code). Static types are what predict the value of dynamic types and this can help warn you of possible errors without having to run the code.

Basic Static Types

Alright, let’s dive into the syntax of TypeScript. What follows are the most commonly seen types in TypeScript.

Note: I’ve left out the _never_ and _object_ types since, in my experience, they are not very commonly used.

boolean

The simple true and false values you’ve come to know and love.

let isAwesome: boolean = true;

boolean type annotation

string

Textual data surrounded in either single quotes ('), double quotes ("), or back ticks.

let name: string = 'Chris';
let breed: string = 'Border Collie';

string type annotation

If using back ticks, the string is called a template literal and expressions can be interpolated within them.

Declaring a tuple with 3 elements and then assigning values to the tuple

enum

An enum is a way to associate names to a constant value, which can be either a number or a string. Enums are useful when you want to have a set of distinct values that have a descriptive name associated with it.

By default, enums are assigned numbers that start at 0 and increase by 1 for each member of the enum.

any

If the type of a variable is not known and we don’t want the type checker to complain at compilation time, then the type of any can be used.

let whoKnows: any = 4; // assigned a number
whoKnows = 'a beautiful string'; // can be reassigned to a string
whoKnows = false; // can be reassigned to a boolean

Example of the any type

any will likely frequently be used when starting out with TypeScript. However, it’s best to try to reduce the usage of any since the usefulness of TypeScript decreases when the compiler isn’t aware of the types associated with variables.

void

When there is no type associated with something, the void type should be used. It is most commonly used when specifying the return value of a function that doesn’t return anything.

By default the null and undefined types are subtypes of all other types, meaning that a variable of type string can be assigned a value of null or undefined. This is often undesirable behavior and thus it’s usually recommended to set the strictNullChecks compiler option in a tsconfig.json file to true. Setting the strictNullChecks option to true makes it so that null and undefined need to be explicitly set as a type for a variable.

Type Inference

Fortunately, you don’ have to specify types absolutely everywhere in your code because TypeScript has what is called Type Inference. Type inference is what the TypeScript compiler uses to automatically determine types.

Basic Type Inference

TypeScript can infer types during variable initialization, when default parameter values are set, and while determining function return values.

// Variable initialization
let x = 10; // x is given the number type

Example of type inference where the x variable has an inferred type of number

In the above example, x is assigned a number, TypeScript associates the x variable with a type of number.

In the above example, the message parameter is assigned a default value which is of type string, so therefore the TypeScript compiler infers that message is of type string and therefore doesn’t throw a compilation error when the length property is being accessed.

What seems to be the best practice in terms of using an interface or a type alias is that you should generally just pick either interface or type in your codebase and be consistent. However, if writing a 3rd party public API that can be used by others, use an interface type.

If you want to get a more detailed comparison between the type alias and an interface, I would recommend this article by Matin Hochel.

Inline Annotations

Instead of creating a re-usable interface, it might be more appropriate to annotate a type inline instead.

There are situations where the specific type of a variable doesn’t matter, but a relationship between the types of different variables should be enforced. For those cases, generic types should be used.

The above example has a generic type T that corresponds to the type of the second argument passed to the fillArray function. The second argument passed to the fillArray function is a string, and therefore the created array will have all of its elements set to have a type of string.

It should be noted that it is by convention that single letters are used for generic types (e.g. T or K). However, there is nothing stopping your from using more descriptive names for your generic types. Here is the above example with a more descriptive name for the supplied generic type:

An intersection type uses the & symbol to combine multiple types together. This is different than the union type, as a union type says “the resulting type is one of the listed types” whereas the intersection type says “the resulting type is the combination of all listed types”.