Advanced types in TypeScript open up a plethora of possibilities to create complex type relationships that can greatly enhance the robustness of your code. In this post, we will delve into two such advanced type constructs — Module Types and Indexed Access Types — and explore how they work together to offer fine-grained control over types based on your JavaScript modules.
Let's consider the following snippet of TypeScript code:
type TConstantModule = typeof import("./Constants");
type TActions = TConstantModule[keyof TConstantModule];
This example might look daunting at first glance, but worry not! We will break it down piece by piece, to understand what each line does.
For reference, here is the ./Constants module used above:
/******************************** Module Types ********************************/
export const ADD_USER = "ADD_USER";
export const EDIT_USER = "EDIT_USER";
export const REMOVE_USER = "REMOVE_USER";
Module Types#
Firstly,
type TConstantModule = typeof import("./Constants");
Here TConstantModule is declared as a new type. But the interesting part is on the right-hand side of the assignment.
The typeof keyword is being used in conjunction with an import expression. This usage of typeof returns the type representation of an import. In other words, TConstantModule would be a type reflecting the structure (i.e., all the exported members) of the ./Constants module.
Essentially, this pattern allows you to express types that correspond directly to the module's exported structure.
Indexed Access Types#
Moving on to the next line,
type TActions = TConstantModule[keyof TConstantModule];
In this case, TActions is a new type being declared using an Indexed Access Type pattern T[K]. In our example, T is TConstantModule and K corresponds to keyof TConstantModule.
The keyof operator generates a string or numeric literal union of all keys of its operand (TConstantModule in our case). Consequently, it encompasses all potential keys (i.e., exported member names) of the TConstantModule type.
Therefore, TActions would represent a union type of all kinds of values that are exported from the ./Constants module. Meaning, if we attempt to access any property on a variable of type TActions, TypeScript will only allow properties that exist as keys in TConstantModule. Moreover, the value accessed will have a type equivalent to the respective key's type in TConstantModule.
Wrapping Up#
In summary, this code leverages TypeScript's advanced type system to create sophisticated type relationships based on the JavaScript modules system. Such capabilities empower developers with precise control over types across different modules, enhancing the static type-checking powers bestowed by TypeScript and potentially mitigating runtime errors.
Understanding and using such advanced types effectively can significantly improve your codebase's reliability and maintainability. So type away, with TypeScript!
Source: typescript-101