More on Interfaces and Generics

We’ve already talked about interfaces in TypeScript, some with our discussion on Custom Data Types. However, we can go further with what they can do.

So we previously had an interface that looked something like:

interface Student {
    stuNum: number;
    name: string;
    major: string;
    active: boolean;
}

However, we might not want, or even need, all of those properties. Therefore, we can make some of them optional, but putting a question mark (?) after the property name. You can see this here:

interface Student {
    stuNum: number;
    name: string;
    major?: string; // this property is optional
    active?: boolean; // so is this one
}

Read Only Properties

We can apply a readonly keyword before a property name, to make it so it cannot be changed.

interface Student {
    readonly stuNum: number; // this value never changes, and we prevent it now
    name: string;
    major: string;
    active: boolean;
}

This is very helpful if we have values that never change, such as an id. We can have multiple read-only properties if necessary.

It should be noted that properties can have the read-only attribute removed, so this doesn’t completely protect your data, nor does it limit your options.

Extending Interfaces

Interfaces can be extended, similar to how Classes can be extended in an Object Oriented language.

Consider our previous Student Interface. We want to add an address, but some might live on campus in a dorm, while others might live off campus. Extending the interface allows us to not have to duplicate our work.

interface StudentInDorm extends Student {
    dorm: string;
    roomNum: string;
}

interface StudentOffCampus extends Student {
  street: string;
  aptNo?: string;
  city: string;
  state: string;
  postalCode: string;
}

You can even extend multiple interfaces, however, as we know from C++, that can create challenges, so we’ll try to avoid that when possible – unlike Java which forces you to only have a single inheritance.

Interfaces and Generics

We can even create an Interface which has a generic associated with it. So if you have an item which you don’t know the type of data, you can use a Generic, which will allow you to be consistent with the data that you use.

interface Container<Type> {
    contents: Type:
}

Aliases and Generics

We can also create an alias (custom type) with a generic, such as:

type Container<Type> = {
  contents: Type;
};

Since type aliases, unlike interfaces, can describe more than just object types, we can also use them to write other kinds of generic helper types.

type OrNull<Type> = Type | null;
 
type OneOrMany<Type> = Type | Type[];
 
type OneOrManyOrNull<Type> = OrNull<OneOrMany<Type>>;

Of course, you want to be careful not to go too crazy with something like this, as it can get confusing, and too ambiguous, resulting in the typeless mess of JavaScript.

The Array Type

Arrays are a type within TypeScript. In face, the [] is a shorthand for Array<type>. So if you think of string[] as a type for a variable, it’s the same as saying Array<string>.

Modern versions of JavaScript also provide for generic data structures. Examples include Map<K, V>, Set<T>, and Promise<T>. All this really means is that because of how Map, Set, and Promise behave, they can work with any sets of types.

TypeScript gives us a ReadonlyArray. This means the data cannot be changed when passed to a function. We know this to be an issue with C++ where arrays are passed by reference, and you can use the const keyword to make them read-only. Well, in TypeScript you can use a different type, and get the same effect.

function foo(values: ReadonlyArray<string>) {
    // do things here
}

More on Interfaces and Generics was originally found on Access 2 Learn