Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers

    Rares MateiRares Matei

    Using the optional “+” sign together with mapped type modifiers, we can create more explicit and readable type declarations. We can also use the “-” (minus) sign to remove optional declarations from properties.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    Instructor: 00:00 If I have this interface, I can use mapped type modifiers to make all of its properties read-only. A type like this can be extremely useful for assigning as a piece of state to my Redux app, for example, because state needs to be immutable.

    00:17 I should not be able to reassign any of its properties, once the object has been created. Mapped type modifiers were a great addition to the language, as they make it easy to augment existing types and apply bulk changes to all of their properties.

    00:33 Now, if I declare two pets here, one mutable and the other read-only, and then I try some mutations on them, you'll notice that I can reassign the age just fine for the first one, but not for the second one.

    00:47 In this case, TypeScript is telling me that the age is a read-only property. That's normal, because I have marked all of its properties as read-only in here. The read-only status is not the only thing I can change in mapped type modifiers.

    01:01 I can also mark all of the properties as optional. I can make all of them strings, or I can make each of them as a union of their original type and the string. The possibilities are kind of endless. With this syntax, I can only add new things to my existing types.

    01:18 I can add a read-only flag, or I can add an optional flag. What if there's an existing optional flag and I want to remove it? What if my original type had a new property -- let's call it favorite park -- that was optional? Then I wanted this type to also remove all of the optionals from this one?

    01:36 Since TypeScript 2.8, I can now add a minus sign before the symbol I want to remove. In this case, I want to remove any optional status from all of the properties. You'll notice that the moment I added the minus sign here, TypeScript immediately started throwing errors down here.

    01:54 That's because we're suddenly missing a required property in this new object. If I just add it, the error goes away. Because we now have this flexibility with the minus sign to also remove things from our types, a plus sign has also been added to this feature. I can be more explicit about what I'm adding and what I'm removing.

    02:15 Now, it's more clear for other developers reading this type that I'm taking the original iPad interface, I'm removing all of the optional modifiers, and I'm adding the read-only flag to all of them.