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
1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers

    Rares MateiRares Matei
    typescriptTypeScript
    ^3.0.0

    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.

    Code

    Code

    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
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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?

    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.

    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.

    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.