2022-03-18
2149
#typescript
Yan Sun
96737
Mar 18, 2022 ⋅ 7 min read

How to use the keyof operator in TypeScript

Yan Sun I am a full-stack developer. Love coding, learning, and writing.

Recent posts:

Vite Adoption Guide Overview Examples And Alternatives

Vite adoption guide: Overview, examples, and alternatives

Vite is a versatile, fast, lightweight build tool with an exceptional DX. Let’s explore when and why you should adopt Vite in your projects.

David Omotayo
Nov 29, 2023 ⋅ 16 min read
Implementing Advanced Features With The Navigator.Share API

Implementing advanced features with the navigator.share API

Explore advanced capabilities for content sharing with the navigator.share API, including dynamic content sharing, custom share targets, and batch sharing.

David Omotayo
Nov 29, 2023 ⋅ 10 min read
Chas Peacock Leader Spotlight

Leader Spotlight: Scaling for the next phase of growth with Chas Peacock

We spoke with Chas to get his insights on building technology and internal processes for companies that are scaling quickly.

Jessica Srinivas
Nov 29, 2023 ⋅ 7 min read
Cypress Adoption Guide: Overview, Examples, Alternatives

Cypress adoption guide: Overview, examples, and alternatives

Cypress is one of today’s foremost tools for testing web applications. Let’s explore when and why you should adopt Cypress in your projects.

Paul Akinyemi
Nov 28, 2023 ⋅ 10 min read
View all posts

6 Replies to "How to use the <code>keyof</code> operator in TypeScript"

  1. Looks like you forgot to add the generics parts to the feature flags examples. Should probably be:

    “`typescript
    type OptionsFlags = {
    [Property in keyof T]: boolean;
    };
    // use the OptionsFlags
    type FeatureFlags = {
    darkMode: () => void;
    newUserProfile: () => void;
    };

    type FeatureOptions = OptionsFlags;

    “`

    Or you could hard code FeatureFlags as the T in OptionsFlags like `[Property in keyof FeatureFlags]`

  2. Hey there, I wonder why my comment about the errors in some of the examples above was never posted? The mapped type examples (before the utility types) don’t work because the generic arguments and params are missing. If you don’t believe me, copy and paste the code examples into the Typescript playground: https://www.typescriptlang.org/play where you can see the errors listed.

    This actually confused me for a good bit because I consider your articles very high quality, and I’m still a little new to some of the more advanced topics in the article (which I found to be an awesome resource).

    1. Hi there, thanks for reading and for pointing out that typo. We did publish your original comment — we do moderate our comments, so there is sometimes a delay between posting and publishing. We fixed the typo in the code, so it should be all set now. If you’re still getting errors, please let us know!

      1. I waited about a week, but no problem.

        Sigh. I looks like either your comments stripped out the tags, or I somehow forgot to fix it after copying and pasting… because my code also has the same typos…

        Not sure if you trusted my code (huge mistake!), but you still need to add the “arguments” part under “Using keyof with TypeScript mapped types”, and the example that comes after (the conditional one).

        type FeatureOptions = OptionsFlags; should be

        type FeatureOptions = OptionsFlags

        Haven’t checked any of the rest, just these two examples. Hopefully this isn’t being too pedantic, just wanted to help fix a normally trustworthy source.

        1. Ok I won’t bother you guys again, but it seems your comments system isn’t very friendly to code. Aside from the fact that it doesn’t accept markup (faulty assumption on my part), it’s also pretty liberally stripping all kinds of stuff (example angle brackets and whatever is inside). I noticed this also happened to me in a separate post and comment. In both cases, the my code examples where HTML or Typescript generics were involved were stripped out. So my above correction is wrong, but the mistakes in the article are still present (you still need to add the argument to the callers).

Leave a Reply