Enhancing Type Safety with TypeScript’s `keyof` and `typeof`

1. typeof Operator

In TypeScript, the `typeof` operator works similarly to JavaScript’s `typeof`, but it’s used within the type system to obtain the type of a variable or object. This allows you to capture the type and use it elsewhere. For example:

const example = { a: 1, b: 2, c: 3 };
type ExampleType = typeof example;
// ExampleType has the type { a: number; b: number; c: number; }

In the above example, `ExampleType` reflects the type of the `example` object. This makes it possible to utilize the object’s structure as a type.

2. keyof Operator

The `keyof` operator converts all keys of a given type into a union of string literal types. This is particularly useful when extracting all keys of an object type to use as a type. For example:

type ExampleKeys = keyof ExampleType;
// ExampleKeys has the type "a" | "b" | "c"

In the example above, the `ExampleKeys` type is a union of the keys “a”, “b”, and “c” from the `ExampleType`.

3. Combining keyof and typeof

Now let’s explore how to combine `keyof` and `typeof` to dynamically define the key types of an object. This approach enhances type safety and increases code flexibility.

const systemColor = {
    red: '#FF0000',
    green: '#00FF00',
    blue: '#0000FF'
};

export type SystemcolorKeyType = keyof typeof systemColor;
// SystemcolorKeyType is "red" | "green" | "blue"

In this example, the `SystemcolorKeyType` type is defined as a string literal type that can be one of the keys in the `systemColor` object. This ensures that TypeScript recognizes only these keys as valid values.

4. Practical Example

Let’s now look at a practical example that utilizes these concepts. Suppose we want to define a function that takes a color and returns its corresponding value.

const systemColor = {
    red: '#FF0000',
    green: '#00FF00',
    blue: '#0000FF'
};

export type SystemcolorKeyType = keyof typeof systemColor;

function getColorCode(color: SystemcolorKeyType): string {
    return systemColor[color];
}

// Correct usage
console.log(getColorCode('red'));   // "#FF0000"
console.log(getColorCode('green')); // "#00FF00"
console.log(getColorCode('blue'));  // "#0000FF"

// Incorrect usage (compile error)
console.log(getColorCode('yellow')); // Error: Argument of type '"yellow"' is not assignable to parameter of type 'SystemcolorKeyType'.

This function takes a `SystemcolorKeyType` as an argument and returns the corresponding value from the `systemColor` object. If an invalid color key is provided, a compile-time error is raised, preventing mistakes early in the development process.

Conclusion

TypeScript’s `keyof` and `typeof` are powerful tools for safely and flexibly handling object type keys. They enhance type safety and maintainability, especially in large projects or collaborative environments. By leveraging these operators, you can significantly improve the stability and readability of your code. As you continue with your projects, consider actively utilizing these two operators to maximize their benefits.