Types & Annotations

Learning the basic types and how to annotate your variables and functions

Written by Andrew Lee Jenkins12 min read1 activity

Pixl presents

Typing everything as any is giving up with extra steps. Learn the basic types, inference, and why unknown is safer.Typing everything as any is giving up with extra steps. Learn the basic types, inference, and why unknown is safer.

Pixl slides a fork into a wooden drawer marked with a fork silhouette, beside knife and spoon drawers — A type annotation says what belongs in each variable

Picture your kitchen drawers. One says "forks," one says "knives," one says "spoons." You'd never toss a fork in the knife drawer, because the label already told you what goes where.

Type annotations are those labels. They tell you (and TypeScript) EXACTLY what kind of data belongs inside each variable.

The Basic Types#

TypeScript has a small handful of core types that cover most of what you'll ever do. Let's start with the ones you'll touch every single day.

Primitive Types#

// String - text values
let firstName: string = "Alice";
let greeting: string = `Hello, ${firstName}!`;
 
// Number - both integers and decimals
let age: number = 25;
let price: number = 9.99;
let negative: number = -10;
 
// Boolean - true or false
let isLoggedIn: boolean = true;
let hasPermission: boolean = false;

Arrays#

Arrays hold lists of values. You just tell TypeScript what kind of items go in the list.

// Two ways to declare array types
let scores: number[] = [95, 87, 92];
let names: Array<string> = ["Alice", "Bob", "Charlie"];
 
// TypeScript prevents mixing types
let ages: number[] = [25, 30, "thirty-five"]; // Error!

Special Types#

// null and undefined
let nothing: null = null;
let notAssigned: undefined = undefined;
 
// any - turns off type checking (avoid when possible)
let mystery: any = "could be anything";
mystery = 42; // No error, but you lose type safety
 
// unknown - safer than any, requires checking before use
let userInput: unknown = getUserInput();
// Must check type before using
if (typeof userInput === "string") {
  console.log(userInput.toUpperCase()); // OK after check
}

Type Annotations Syntax#

A type annotation goes right after the variable name, with a colon in between.

// The pattern: let variableName: type = value;
let city: string = "Portland";
let temperature: number = 72;
let isRaining: boolean = false;
let tags: string[] = ["weather", "forecast"];

You can label function parameters and return types too.

// Parameters and return type annotated
function add(a: number, b: number): number {
  return a + b;
}
 
// Arrow function syntax
const multiply = (x: number, y: number): number => {
  return x * y;
};

Type Inference: TypeScript's Smart Guessing#

Good news time. You don't have to write annotations on everything... TypeScript is smart enough to figure out a LOT of types by itself.

// TypeScript infers these types automatically
let name = "Alice";       // TypeScript knows this is a string
let count = 42;           // TypeScript knows this is a number
let active = true;        // TypeScript knows this is a boolean
let items = [1, 2, 3];   // TypeScript knows this is number[]
 
// You still get full type safety
name = 123; // Error! Type 'number' is not assignable to type 'string'

The `any` Trap vs `unknown` Safety#

Pixl peers warily into a closed wooden box through a little window, beside a tray of jumbled cutlery — With unknown you check what is inside before you use it

When you're not sure what type something is, any looks REAL tempting. Here's the catch though. any switches off type checking completely, which kinda defeats the whole point of using TypeScript in the first place.

// BAD: any disables type safety
function processData(data: any) {
  // No errors, but no help either
  data.nonExistentMethod(); // No error! But will crash at runtime
}
 
// GOOD: unknown is safe
function processDataSafely(data: unknown) {
  // Must narrow the type before using
  if (typeof data === "string") {
    console.log(data.toUpperCase()); // Safe!
  } else if (typeof data === "number") {
    console.log(data.toFixed(2)); // Safe!
  }
}

Using any is like peeling the labels off your kitchen drawers. Everything goes everywhere, and sooner or later you reach for a fork and grab a knife instead (ouch).

Type Aliases: Creating Custom Names#

You can also make your own named types for more complicated shapes.

// Create a reusable type
type Score = number;
type Username = string;
type Coordinates = [number, number];
 
let playerScore: Score = 1500;
let player: Username = "GameMaster42";
let position: Coordinates = [10, 25];

This gets WAY more useful once you start using it with object types, which is exactly where the next lesson goes.

TL;DR#

The basic types are string, number, boolean, arrays, null and undefined
An annotation is a colon after the variable name, like let x: number = 5
TypeScript can infer types for you when you give a variable a starting value
Skip any because it turns off type checking, and reach for unknown when you're not sure
You can annotate function parameters and return types to keep them safe
Type aliases let you make your own reusable type names

What's Next?#

You've got the basic types down. Real apps though are full of objects with a bunch of properties on them... so next up you'll learn how to describe the shape of an object with interfaces, which is one of the best things TypeScript has going for it.

This lesson ends with a short activity.