Typescript: The keyof operator

Este artículo fue originalmente escrito en https://matiashernandez.dev

A few primary concepts around Typescript help you build complex data shapes. One of that building blocks is the keyof operator.

This operator or keyword is the Typescript's anwser to the javascript Object.keys operator.

Object.keys returns a list of the properties (the keys) of an object. keyof do something similar but in the typed world only. It will return a literal union type listing the "properties" of an object-like type.

This operator is the base building block for advanced typing like mapped and conditional types.

The keyof operator takes an object type and produces a string or numeric literal union of its keys. - Typescript Handbook

type Colors = {
    primary: '#eee',
    primaryBorder: '#444',
    secondary: '#007bff'
    black: '#000',
    white: '#fff',
    whiteBorder: '#f2f2f7',
    green: '#53C497',
    darkGreen: '#43A17C',
    infoGreen: '#23AEB7',
    pastelLightGreen: '#F3FEFF',
}

type ColorKeys = keyof Colors; // "primary" | "primaryBorder" | "secondary" ....

function SomeComponent({ color }: { color: ColorKeys }) {
  return "Something"
}

SomeComponent({ color: "WhateverColor"})

SomeComponent({ color: "primary"})

The previous code sample is an snippet from a real web app. The Colors type describes a set of colors that can be used across the application.

The keyof operator is applied to the Colors type to retrieve a literal union of all the possible colors.

Literal union means that is a Union type made up of literal values like "primary" | "primaryBorder"

The union is then used to type the props of SomeComponent, allowing the color argument to be one of the colors defined in the type.

You can also use the keyof operator to build up more complex types or constraints alongside Generics and template literals, but that will be for another post.

There you go; the keyof operator can be small but is an essential piece in the big scheme that unlocks powerful operations when used in the right place.

✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo