TypeScript Basics

We'll be reviewing the basics of TypeScript in this lesson.

We'll cover the following

Since we’ll be using TypeScript with Deno, it’s important to get the basics down first.

What is TypeScript?

TypeScript is a typed superset of JavaScript that compiles into plain JavaScript. It brings you the latest ECMAScript features, along with optional type checking.

Types enable JavaScript developers to use highly-productive development tools and practices, such as static checking and code refactoring, when developing JavaScript applications.

Compiling your code

To install TypeScript on your system:

  • Make sure you have Node.js installed.
  • Fire up your terminal and run npm install -g typescript.
  • Make an app.ts file in your directory of choice(.ts is the file extension for TypeScript files) and copy the code below.
  • Run the code by typing tsc app.ts. This compiles your TypeScript into regular JavaScript. You can also run the examples below.
Press + to interact
app.ts
app.js
let message:string = "Hello World" 
console.log(message)

Type annotations

Let’s talk about :string. This is an example of a type annotation. Type annotations in TypeScript are lightweight ways to record the intended contract of the function or variable. In the above example, we intend that the message variable be of the type string. Let’s take a look at how we would add type annotations to a function.

Press + to interact
function myFunc(name: string): string {
  return "Hello "+name;
}
console.log(myFunc("Deno!"))

Here, the name argument of the myFunc is of the type string. We can even annotate the return type of a particular function. Since we’re returning a string here, we will add that annotation right after the function brackets. Now you know what type of data that particular function will take in its arguments and returns. So, let’s take a look at a few basic types that are accessible to us in TypeScript.

Basic types

Inbuilt types

Just like JavaScript, TypeScript has boolean, number, string`, and various arrays of these types. A few examples are given below:

Press + to interact
let article: number = 2; //could be binary, octal, hexadecimal
let isLearning: boolean = true;
let course: string = 'Deno'; //same for multiline strings as well
// Arrays
let count: number[] = [1, 2, 3];
let names: string[] = ['jake', 'raymond', 'amy']

Apart from these, there are a few other types as well.

Any

We may need to describe the type of variables that we do not know when we are writing an application. These values may come from dynamic content- e.g., from the user or a 3rd party library. In these cases, we want to opt-out of type checking and let the values pass through compile-time checks. To do so, we label these with the any type:

Press + to interact
let maybe: any = 10;
maybe = "I'm indecisive";
maybe = false; // well this is a boolean finally

The any type is a useful way of working with existing JavaScript code; it allows for gradual opt-in of type checking.

Void

void is the absence of any type at all. It is essentially the opposite of any. The return type of a function that doesn’t return anything could be void. However, assigning this in a variable doesn’t make much sense because you can only store null or undefined in that variable.

Press + to interact
function printer(): void {
    console.log("I print");
}
let nonsense: void = undefined; //or null (only if --strictNullChecks isn't 
                                //specified)

--strictNullChecks refers to a flag, which, when passed to the compiler, switches to a strict null checking mode. In this mode, null and undefined are not in the domain of every type.

Null and undefined

In TypeScript, both undefined and null actually have their own types, respectively named undefined and null. Much like void, they’re not extremely useful on their own but you can use them to annotate optionally.

Press + to interact
let maybeANumber: number | null = 5;
console.log(maybeANumber)
maybeANumber = null;
console.log(maybeANumber)

TypeScript quiz

Q

What do you think the type is for the following variable? let var: string | undefined

A)

string

B)

undefined

C)

Both string and undefined

D)

Either string or undefined