TypeScript Quickstart (Coming Soon)

Caution

This tutorial is a work in progress. You can try it, but it might not be done yet.

Want to contribute to it? Visit our GitHub repo.

This tutorial assumes you’re already familiar with HTML, CSS, JS, and npm. It also assumes you know what TypeScript is for.

Local Setup

First, visit the TypeScript training ground repo. Press the green Code button and click Download ZIP. Unzip the file and then open it in your editor. Then, run this command in the terminal to install the packages listed in package.json.

npm install

Then run this command to start the dev server.

npm run dev

This command converts main.ts into main.js. It’ll update the file every time you save. Use Ctrl + C to stop this process.

Open the index.html file in your browser. The web page should say Hello World. You can also use the Live Preview extension to open up index.html on localhost:3000.

In your editor, you’ll see several files. However, for now you’ll mainly be working in main.ts.

Basic types

Basic types in TypeScript include string, number, and boolean, which add type safety to your variables.

To declare the type on a variable, add a colon after the variable name, a space, and then the type.

main.ts

// String, number, boolean
let text: string = "Hello World";
let age: number = 42;
let isDone: boolean = true;

Arrays

Arrays in TypeScript can be typed to hold only specific data types.

To declare the type on an array, add a colon after the variable name, a space, the type, and then a pair of square brackets.

main.ts

let fruits: string[] = ["apple", "banana", "cherry"];
let scores: number[] = [95, 82, 76];
let flags: boolean[] = [true, false, true];

Tuples

Tuples are fixed-length arrays where each element has a known, specific type.

To declare a tuple, add a colon after the variable name, a space, and a pair of square brackets. You would then list the types that the tuple would contain inside the square brackets.

main.ts

let coords: [number, number] = [10, 20];
let person: [string, number] = ["Alice", 30];

Enums

Enums are a set of named constants. They make your code more readable and type-safe.

To create one, type the word enum, the name of your enum, and then a pair of curly braces. In this example, we’re creating an enum called Direction.

main.ts

enum Direction {}

Then you can list out the constants inside the curly braces, separated by commas.

main.ts

enum Direction {
  Up,
  Down,
  Left,
  Right
}

Now you can use the Direction type with a variable. To use the constants, type the enum name, a period, and then the constant name.

main.ts

enum Direction {
  Up,
  Down,
  Left,
  Right
}

let move: Direction = Direction.Up;

Interfaces

Interfaces describe the structure of an object by specifying required properties and their types.

To create one, type the word interface, the name of your interface, and then a pair of curly braces. In this example, we’re creating an interface called User.

main.ts

interface User {}

Next, you can list out the properties inside the curly braces along with their types.

main.ts

interface User {
  name: string;
  age: number;
  isAdmin: boolean;
}

Now you can use the User type with an object. Make sure the object matches the properties listed in the interface.

main.ts

interface User {
  name: string;
  age: number;
  isAdmin: boolean;
}

let user1: User = {
  name: "John",
  age: 25,
  isAdmin: false
};

Functions

Functions in TypeScript can have typed parameters and return values for better predictability.

To add types to parameters, add colons after the parameters and add the types. To add types to the return values, add a colon after the closing parenthesis and add the type after that.

In this example, we’re adding a string type to the name parameter and a string type for the return value.

main.ts

function greet(name: string): string {
  return `Hello, ${name}`;
}

In the next example, we’re adding number types to both parameters and a number type for the return value.

main.ts

function greet(name: string): string {
  return `Hello, ${name}`;
}

function add(a: number, b: number): number {
  return a + b;
}

Union

Union types allow a variable to hold more than one type, increasing flexibility while maintaining type safety.

To create a union type, you use the pipe character. In this example, we’re creating a variable called value that can be a string or a number.

main.ts

let value: string | number;

value = "Hello World";
value = 123;

Type aliases

Type aliases let you create a reusable name for any type, including unions.

To define a type alias, you use the keyword type. In this example, the type ID can be a string or a number.

main.ts

type ID = string | number;
let userId: ID = 101;

Literal types

Literal types allow a variable to accept only a specific, predefined set of values.

To declare a literal type, you can use the pipe character. In this example, the direction can only be equal to the strings “up” or “down”.

main.ts

let direction: "up" | "down" = "up";