Type Annotations

In TypeScript, we can explicitly define the type of a variable, ensuring the variable holds only values of that type. This is called type annotation. By doing so, we help TypeScript catch potential errors before running the code, making it safer and more predictable. But first, let's take a look at the basic types available in JavaScript.

JavaScript Types

You may not know it, but we already have some types available in JavaScript.

const name = "Bob";
console.log(typeof name); // string

const age = 30;
console.log(typeof age); // number

const cool = true;
console.log(typeof cool); // boolean

const count = BigInt(452947234234);
console.log(typeof count); // bigint

const phone = undefined;
console.log(typeof phone); // undefined

const stars = Symbol("***");
console.log(typeof stars); // symbol

const user = { name: 'Michele' };
console.log(typeof user); // object

const fn = function() {}
console.log(typeof fn); // function

Fun fact: In JavaScript, the type of null is actually object. This is an old bug that has been there since JavaScript's early days. It can't be fixed now, as it would break many existing programs.

Also, complex types like arrays, Maps, and Sets are treated as objects in JavaScript, but in TypeScript, they have their own specific types.

However, the problem with JavaScript is that it’s loosely-typed. This means we can change a variable's type during the program without TypeScript complaining:

let amount = 10;
console.log(typeof amount); // number

amount = "ten";
console.log(typeof amount); // string

In JavaScript, there is no way to enforce a variable to always have the same type, leading to potential mistakes. This is where TypeScript steps in, helping us define strict types for variables and functions.

Type Annotations

In TypeScript, we can annotate (declare) the type of a variable right when we create it. This helps prevent mistakes, making our code safer and more predictable.

Here are the 3 main primitive types you’ll use most often:

let age: number;
let name: string;
let isAdmin: boolean;

Once we specify a variable’s type, we cannot assign a value of a different type to it. For example:

let age: number;
age = 30; // OK
age = 'thirty'; // ERROR: Type 'string' is not assignable to type 'number'

Undefined variables

In JavaScript, a variable which doesn't have an initial value is initialized with undefined. Also, JavaScript doesn't stop us from using it immediately.

In TypeScript, we cannot use a variable before assigning a value, unless we explicitly specify that it may be undefined:

// Type: number OR undefined
let age: number | undefined;

console.log(age); // OK

Now that we have specified the variable's type, we can't assign a different type to it anymore.

// ERROR: type 'string' is not assignable to type 'number'.
age = 'ten';

The | character means "or", and the resulting type is called Union Type. We'll explore them in another chapter!