[TypeScript] Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers(代码

Posted 2021-02-04 Answer1215

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.

 

For example, we have an interface:

interface IPet { 
    name: string;
    age: number;
    favoritePark?: string
}

There is two required props and one favoriatePark as optional prop.

 

From TypeScirpt 2.8, we are able to gereate a new interface based on existing one, and add or remove props:

For example we want to remove all the optional props, we can use ‘-‘:

interface IPetRequired {
  [K in keyof IPET]-?: IPet[K]
}

‘-‘: remove

‘?‘: optional

‘-?‘: remove optional

 

We can also use ‘+‘ to indicate what we have added:

type ReadonlyPet = {
    +readonly [K in keyof IPet]?: IPet[K]
}

Here we added readonly type.