Introduction to TypeScript

What is TypeScript and why do we use it?

At its core, TypeScript is a superset of JavaScript. This means that any valid JavaScript code is also valid TypeScript. TypeScript introduces static typing, which allows you to define the types of variables, function parameters, and return values. This additional layer of type information helps spot errors during development, making your code more reliable.

Basic examples (10 minutes)

There are many basic data types in JavaScript, including but not limited to string, number, boolean, undefined, and null. JavaScript already has dynamic types, which means variable types are determined at runtime.

TypeScript supports static types, which means variable types are known at compile time. Here are some examples of how we might specify static types in TypeScript:

let name: string = "Luke";
let age: number = 30;
let isTrainee: boolean = true;
let completedCourses: string[] = ['ITD', 'ITP', 'Piscine']

TypeScript also supports type inference. This means that TypeScript can determine (infer) the type of variables based on their initial value:

let name = "Luke"; // inferred as string
let age = 30; // inferred as number
let isTrainee = true; // inferred as boolean
let completedCourses = ['ITD', 'ITP', 'Piscine'] // inferred as string[]

age = "Thirty" // TypeScript will error here: "Type 'string' is not assignable to type 'number'".

Notice how not everything needs to be explicit. TypeScript is very smart and will be able to effectively type many things itself. In fact, it will often find incorrect typing before you do.

In our previous examples we said completedCourses is of type string[]. TypeScript lets us be even more specific by leaning on literal types:

type Course = 'ITD' | 'ITP' | 'Piscine' | 'SDC'

let completedCourses: Course[] = ['ITD', 'ITP', 'Piscine']

In our example above we are defining our own type Course which permits a number of specific strings. It uses the union type operator | somewhat similarly to how we might use the logical OR operator ||. We are stating that a variable of type Course may be 'ITD' OR 'ITP' OR 'Piscine' OR 'SDC'.

We can also define an object type. For example, maybe we want to wrap our earlier fields within an object:

type Course = 'ITD' | 'ITP' | 'Piscine' | 'SDC'

type User = {
  id: number;
  name: string;
  age: number;
  isTrainee: boolean;
  completedCourses: Course[]
};

const myTrainee: User = {
  id: 0,
  name: 'Luke',
  age: 30,
  isTrainee: true,
  completedCourses: ['ITD', 'ITP', 'Piscine']
}

If we tried to create a User but didn’t give them a name, TypeScript would tell us. If we did the same in JavaScript, nothing would tell us we missed anything, but when we tried to get a User’s name, we’d get undefined. Even this probably wouldn’t be an error - we may only find out when our UI tries to use this data and says “undefined, aged 30, has done ITD, ITP, and Piscine”.

TypeScript also supports optional properties. For example our User type might have an optional address property that can be left out from instances of the User type:

type Course = 'ITD' | 'ITP' | 'Piscine' | 'SDC'

type User = {
  id: number;
  name: string;
  age: number;
  isTrainee: boolean;
  completedCourses: Course[]
  address?: string; // equates to string | undefined
};

// myTrainee doesn't have an address property but it is still a valid User
const myTrainee: User = {
  id: 0,
  name: 'Luke',
  age: 30,
  isTrainee: true,
  completedCourses: ['ITD', 'ITP', 'Piscine']
}

Objects can become complicated data as they grow but TypeScript makes maintaining our code far easier!

A more complex example (10 minutes)

Let’s have a look at this example JavaScript code which fetches a user by its ID from a hypothetical API:

async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

const user = fetchUser(0);

What is a user? What does this data look like? We might have the answer in our head but TypeScript gives us the ability to define it in code. Let’s have a look at the same example but in TypeScript:

type Course = 'ITD' | 'ITP' | 'Piscine' | 'SDC'

type User = {
  id: number;
  name: string;
  age: number;
  isTrainee: boolean;
  completedCourses: Course[]
  address?: string;
};

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

const user: Promise<User> = fetchUser(0);

Here we have specified that once our user has been fetched, it is of type User. We know it is an object and we know the type of every property in the object.

Since we have to await the user being fetched, Promise<> tells us that our user will be a Promise until our API request has completed, at which point our user will be a User.

Fixing TypeScript errors (30 minutes)

Setup

• Breakout into groups of ideally 2, and no more than 3 trainees.
• Ideally each group should have a single fork of the exercise repository from where every member collaborates.
• Each member should clone the forked repository to a local project.
• Navigate to the introduction-to-typescript directory.
• Follow the instructions in the README.md to setup the project and run the exercise.

Fixing errors

Now that you’ve got the project running locally, your job is to complete the exercises in order while ensuring all tests pass for each exercise.

There are TypeScript type examples within src/examples should you need a hint but feel free to also do your own research.

Designate a driver while the rest of your group guides the driver towards solutions. Aim to swap out drivers at least every 10 minutes.

Takeaways (10 minutes)

Now that you have experience with TypeScript, what do you think of it? Are you able to answer:

• When would you choose to use TypeScript over JavaScript?
• Would you prefer to use JavaScript or TypeScript?
• Would you prefer your coworkers to use JavaScript or TypeScript?
• Why would you use TypeScript if JavaScript is more flexible?

Additional reading

If you would like to further your TypeScript knowledge, there are many great tutorials online.

Total TypeScript is one such resource and has several free exercises. https://www.totaltypescript.com/tutorials/beginners-typescript

W3schools also has their own short and free exercises. https://www.w3schools.com/typescript/typescript_exercises.php