TypeScript Quickstart (Coming Soon)

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

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

// Arrays
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

// Tuples
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

// Enums
enum Direction {}

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

main.ts

// Enums
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

// Enums
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

// Interfaces
interface User {}

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

main.ts

// Interfaces
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

// Interfaces
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

// Functions
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

// Functions
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

// Union
let value: string | number;

value = "Hello World";
value = 123;