TypeScript Basic Types: string, number, boolean, null, undefined and More

TypeScript's types mirror JavaScript's values. This lesson covers the primitive types and how to write annotations.

The primitive types#

const name: string = "Asha Rao";
const age: number = 21;
const isEnrolled: boolean = true;
const population: bigint = 1_400_000_000n;

console.log(name, age, isEnrolled, population);

Asha Rao 21 true 1400000000n

Annotation syntax#

The type goes after a colon, in three main places:

let score: number = 0;                          // variable

function greet(name: string): string {          // parameter and return type
  return `Hello, ${name}!`;
}

const shout = (text: string): string => text.toUpperCase() + "!";

score += 10;
console.log(greet("Ravi"), shout("go"), score);

Hello, Ravi! GO! 10

Type errors#

A variable keeps its type for its whole life. Assigning a different type is an error:

let score: number = 0;
score = "ten";

error TS2322: Type 'string' is not assignable to type 'number'.

Using a method that does not exist for the type is an error too:

const age: number = 21;
console.log(age.toUpperCase());

error TS2339: Property 'toUpperCase' does not exist on type 'number'.

void: functions that return nothing#

A function that does not return a value has the return type void:

function logVisit(page: string): void {
  console.log(`Visited ${page}`);
}

logVisit("/typescript");

Visited /typescript

null and undefined#

With strict mode on (as it should be), null and undefined are not allowed in other types unless you say so:

let middleName: string = null;

error TS2322: Type 'null' is not assignable to type 'string'.

To allow them, use a union type with |, covered in Union Types:

let middleName: string | null = null;
middleName = "Kumar";
console.log(middleName);

Kumar

This is one of TypeScript's most valuable checks: it forces you to handle "missing" values, the source of countless JavaScript errors like "Cannot read properties of undefined". See null, undefined and Strict Null Checks.

string, not String#

Use the lowercase types: string, number, boolean. The capitalised String, Number and Boolean refer to JavaScript's wrapper objects, which you almost never want:

const good: string = "text";
console.log(typeof good);

string

Practice#

const product = "Notebook";
let stock = 40;
const isAvailable = stock > 0;
function restock(amount) {
  stock = stock + amount;
}
restock("10");

const product: string = "Notebook";
let stock: number = 40;
const isAvailable: boolean = stock > 0;

function restock(amount: number): void {
  stock = stock + amount;
}

restock(10);
console.log(product, stock, isAvailable);

Notebook 50 true

Key takeaway#