Typescript

How keyof works in Typescript

In Javascript and Typescript, we often run into situations where we have an object with a certain set of properties, and then another variable which matches one or many keys in that object. This can cause all sorts of issues, if the keys can be edited. For example, imagine the following situation:

let myUser = {
    name: "John Doe",
    email: "xyz@fjolt.com",
    age: 15
}

function getUserDetails() {
    let ourKeys = [ "name", "red", "age" ];
    let constructedObject = {};

    ourKeys.forEach(function(item) {
        constructedObject[item] = myUser[item];
    });

    return constructedObject
}

We could imagine that ourKeys may be coming from a database, or an API. For the purposes of explanation, I've put it in a simple array. When we run through each of these keys using our forEach loop, we output details from myUser into a new Object, called constructedObject.

The only issue is that red is not a key in myUser, but it is one in ourKeys. Ideally, the keys in ourKeys should match the keys in myUser.

Resolving mismatching keys using keyof

To resolve the issue described above, we use keyof. Let's reimagine our code in Typescript.

First, let's give our myUser object a custom type:

type User = {
    name: string,
    email: string,
    age: 15
}
let myUser:User = {
    name: "John Doe",
    email: "xyz@fjolt.com",
    age: 15
}

Now, let's define our type for ourKeys. Essentially, we want ourKeys to be either name, email or age. One way we can define this, is like so:

type UserKeys = "name" | "email" | "age"

This works, in theory, but it's not necessarily full proof - what if the User type changes down the line, and we forget to update UserKeys? We'll run into some issues. Instead, we can write the above line like this, which means the exact same thing:

type UserKeys = keyof User

This means UserKeys is a type which translates to "name" | "email" | "age" - but will always stay in sync with User. Now we've constructed our types, let's update our code:

type User = {
    name: string,
    email: string,
    age: number
}

type UserKeys = keyof User

let myUser:User = {
    name: "John Doe",
    email: "xyz@fjolt.com",
    age: 15
}

function getUserDetails() {
    let ourKeys:UserKeys[] = [ "name", "email", "age" ];
    let constructedObject:Partial<user> = {};
    
    ourKeys.forEach(function<k extends="" UserKeys="">(item:K) {
        if(typeof myUser[item] !== "undefined") {
            constructedObject[item] = myUser[item];
        }
    });

    return constructedObject
}
</k></user>

Now if ourKeys contains "red", we'll get an error - so it should always register the correct keys. As you can see, keyof makes writing our Typescript slightly easier, and reduces the maintenance burden. You can read more about typescript here.

More Tips and Tricks for Typescript

• How the TypeScript Parameters Type Works
• Typescript Tuples, and how they work
• How Intrinsic Type Manipulations work in TypeScript
• Ultimate Guide to Types in Typescript
• The Difference between TypeScript and Javascript
• The Difference between TypeScript Interfaces and Types
• How the TypeScript Pick Type works
• How TypeScript Default Parameters Work
• How the TypeScript Record Type Works
• TypeScript Optional Parameters