DEV Community

Cover image for Typescript: The keyof operator
Matías Hernández Arellano
Matías Hernández Arellano

Posted on • Originally published at


Typescript: The keyof operator

Este artículo fue originalmente escrito en

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"})
Enter fullscreen mode Exit fullscreen mode

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.

Footer Social Card.jpg
✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!