Fulfledge

Reuse a type

INPUT · Slides

What you will meet next

01 / 06

From here on, reading is enough

By now you can put types on the JavaScript you write yourself. Let us finish by peeking at five ways of writing this course did not cover.

The aim is not to master them. It is enough to think "ah, that thing" when you see them in someone else's code. No need to chase them down. Looking them up on the day you need them will do.

02 / 06

enum — give names to a set of choices

When there are a few fixed choices, this is a way of giving the whole set a name. You call them by name, as in Color.Blue.

What it wants to do is almost the same as the union of literal types you wrote in chapter 3 ("red" | "blue").

enum Color {  Red = "red",  Blue = "blue",}console.log(Color.Blue);

Result

blue

03 / 06

Tuple types — an array with a fixed order and count

Write [string, number] and you get an array type meaning "the first is a string, the second a number, two in all". Unlike an ordinary array type (string[]), the type is fixed per position.

You come across it where something "returns a name and an age as one set". Inside it is only an array, so it shows up in array form.

const pair: [string, number] =  ["Yui", 20];console.log(pair);

Result

["Yui", 20]

04 / 06

Intersection types — meet both shapes

Write A & B and you get a type meaning "it has the shape of A and the shape of B". Where the | of a union type was "either", & is "both".

It lets you build things up: make a few small shapes and add together only as many as you need.

type HasName = { name: string };type HasAge = { age: number };type Person = HasName & HasAge;const yui: Person = {  name: "Yui",  age: 20,};console.log(yui);

Result

{ name: "Yui", age: 20 }

05 / 06

Utility types — tools that make types from types

Using the angle brackets from the last lesson, there is a whole set of tools that make a new type out of one you already have. Here are two of the best known.

  • Partial<Person> … a Person where every item can be left out
  • Pick<Person, "age"> … a type with only age taken out of Person

There are several others. The point is not having to copy the same shape out again.

type Person = {  name: string;  age: number;};const a: Partial<Person> = {  name: "Yui",};const b: Pick<Person, "age"> = {  age: 20,};console.log(a);console.log(b);

Result

{ name: "Yui" }
{ age: 20 }

06 / 06

Abstract classes and static

There are two more words around classes we have not shown you.

  • abstract … a blueprint meant to be inherited from. You cannot new it as it stands; you line up methods with no body and make the children promise "provide these"
  • static … something you can use without making an instance. You call it straight off the class name, no new

Right then, let us write the simplest form of each once. Not so that you can use them, but so your hands remember the shape.

abstract class Animal {  abstract speak(): string;}class Cat extends Animal {  speak(): string {    return "meow";  }}class Currency {  static symbol: string = "yen";}console.log(new Cat().speak());console.log(Currency.symbol);

Result

meow
yen