How to explain TypeScript generics in a simple way

Overview

In TypeScript we use generics to constrain the relevant types of functions. The functions here also include the constructor of the class, so the declaration part of a class can also use generics. So, what exactly are generics? What if we understand generics in a simple way?

What are Generics

Generics refers to a feature that does not specify a specific type in advance when defining a function, interface, or class, but specifies the type when it is used.

In layman's terms, generics are "parameters" in the type system, and their main function is to reuse types. As can be seen from the above definition, it will only be used in functions, interfaces and classes. It is different from the function parameters in the js program (although the meaning is the same), because typescript is a static type system, which is a system that performs type checking when js is compiled. Therefore, generic parameters are actually used at runtime during the compilation process. It is called a "parameter" because it has exactly the same characteristics as a function parameter.

function increse(param) {
  // ...
}

In the type system, we use generics like this:

function increase<T>(param: T): T {
  //...
}

When param is a type, T is assigned to this type, and in the return value, T is of this type for type checking.

Build system

You should know that the type system of typescript itself also needs programming, but its programming method is strange. You need to intersperse js code in its program code (the saying of interspersing js code in ts code is strange, because our intuitive feeling is that ts code is mixed in js code).

In programming, one of the most important forms is the function. In type programming in typescript, have you seen functions? No. This is because, where there are generics, there are functions, but the form of the function is split by the js code. Typescript needs to be compiled to get the final product. There are two things to do during the compilation process. One is to run the type programming code in memory to form a type checking system. That is to say, we can type check the js code. First, the typescript compiler gets a runtime checking system after running the ts programming code. This article comes from Fei Zige's podcast and runs this system to perform type assertions on the js code interspersed therein; the second is to output js. During the output process, the compilation system has run the type programming code, just like echo js code in php code, the php code has been run, and what is displayed is js code.

Looking at TypeScript from this perspective, you may be able to better understand why it is called a superset of JavaScript and why its compiled result is JS.

Popular understanding of generics

Now that we understand the logic of the ts compilation system, we can emotionally distinguish type programming from the business programming of js itself. The "generics" we are talking about only exist in the type programming part, which is the compiled runtime code of ts.

Let's look at a simple example:

function increase<T>(param: T): T {
  //...
}

What would happen if we separated the js code from this code and then used type description text to represent it?

//Declare function @type, parameter is T, return result is (T): T 
@type = T => (T): T

// Run the function to get a type F, which is of type (number): number
@F = @type(number)

// Require the increase function to conform to the F type, that is, the parameter is number and the return value is also number 
@@F
function increase(param) { 
  // ... 
} 
@@end

There is actually no such syntax as @@F. I made it up so that you can look at the type system from another perspective.

Once we understand that generics are a kind of "parameter", we might ask: where is the function of the type system? For js functions, you can easily point out the function declaration statement and parameters, but in ts, this part is hidden. However, we can easily see the shadow of type functions in some specific structures:

// Declare a generic interface. This is written just like declaring a function. We use the descriptive language to describe it. @type = T => (T): T
interface GenericIdentityFn<T> {
    (arg: T): T;
}

// This writing is a bit like a closure function. After declaring the function, it is run immediately. Description language: @@[T => (T): T](any)
function identity<T>(arg: T): T {
    return arg;
}

// Using a generic interface is like calling a function. We use a descriptive language to describe @type(number)
let myIdentity: GenericIdentityFn<number> = identity;

Let's rewrite the entire code above using the description text:

@GenericIdentityFn = T => (T): T

@@[T => (T): T](any)
function identify(arg) {
  return arg
}
@@end

@@GenericIdentityFn(number)
let myIdentity = identity
@@end

We declare two functions in the type system, @GenericIdentityFn and @some (anonymous function @[T => (T): T]). Although they are two functions, in fact, they are exactly the same, because TypeScript is a structural type, that is, when checking the type, it only determines whether the type of each node in the structure is the same, rather than having to keep the pointer of the type variable itself the same. @GenericIdentityFn and @some are called to modify identify and myIdentify respectively. When calling, they receive different parameters, so the final type checking rules are different. Identify only needs to ensure that the parameter and return value types are the same. As for the specific type, any is used. In addition to ensuring that the parameter return value type is the same, myIdentify also requires that the type must be number.

Generic Classes

In addition to generic interfaces, class classes can also be genericized, that is, "generic classes". With the help of generic classes, let's explore the steps of declaring and using generics.

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();

The generic interface in the previous article is written like a function because it is only used to constrain the type of the function. In fact, we can redescribe a generic interface and generic class using a description language. We use descriptive language to describe the red part above:

@GenericNumber = T => class {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

The @GenericNumber function takes T as a parameter and returns a class. The parameter T is used multiple times in the @type function body.

@GenericIdentityFn = T => interface { 
  (arg: T): T; 
}

We redescribe the previous interface GenericIdentityFn so that we can add other methods to the interface.

It can be noticed that even after the built-in basic types of typescript, such as Array, are declared as generic interfaces and generic classes, these interfaces and classes must pass in parameters through <> when used. In essence, because they are all functions, they just have different return values.

Other popular explanations of generic usage

Next we have to describe a complex type:

class Animal {
    numLegs: number;
}

function createInstance<A extends Animal>(c: new () => A): A {
    return new c();
}

Let’s not look at the new() part for now, let’s look at the extends syntax in the angle brackets. How should we understand it? In fact, the question we face is, at compile time, when does the content in the angle brackets of <A extends Animal> run, before or between them?

// @type = (A extends Animal) => (new() => A): A
@type(T)
// Still @type = A => (new() => A): A
@type(T extends Animal)

Because TypeScript is a static type system and Animal is an immutable class, it can be inferred that the content of the angle brackets has been run before the class is created.

@type = (A extends Animal) => (new() => A): A

That is to say, to use @type(T) to generate a type, first T must satisfy the structure of Animal, and then the required type can be obtained. If T no longer satisfies the structure of the Animal class, the compiler will directly report an error. This error is not in the type checking stage, but in the creation stage of the type system, that is, the running stage of the ts code. This situation is called a "generic constraint".

In addition, syntax like <A,B> is actually the same as function parameters.

@type = (A, B) => (A|B): SomeType

Let's look at the built-in basic type of ts: Array<number>

@Array = any => any[]

Conclusion

Generics in Typescript are actually parameters of type generation functions. The contents of this article are all imaginary and are only suitable for developing ideas when understanding ts. They are not suitable for real programming. This is hereby declared.

The above is how to explain TypeScript generics in detail. For more information about TypeScript generics, please pay attention to other related articles on 123WORDPRESS.COM!