DEV Community

Cover image for How the TypeScript Partial Type Works
Johnny Simpson
Johnny Simpson

Posted on • Originally published at fjolt.com

How the TypeScript Partial Type Works

The Partial type in TypeScript is a utility type which does the opposite of Required. It sets all properties in a type to optional.

Let's look at how it works. If you're interested in the opposite problem, try my article on how the Required type works in TypeScript.

Partial Type in TypeScript

In TypeScript, we can define a type as optional with a ? question mark. For example, in the below code, lastName is optional. Therefore, even though firstUser has the type User, we can leave out lastName as it is not required.

type User = {
    firstName: string,
    lastName?: string
}

let firstUser:User = {
    firstName: "John"
}
Enter fullscreen mode Exit fullscreen mode

Sometimes, the type we inherit or use has no optional types, but we know that in certain circumstances some properties might be missing. Take a look at the following example. Here, lastName is not optional anymore, but firstUser still doesn't have it:

type User = {
    firstName: string,
    lastName: string
}

let firstUser:User = {
    firstName: "John"
}
Enter fullscreen mode Exit fullscreen mode

This code throws an error, since it is expecting that firstUser of type User should have a property called lastName:

Property `lastName` is missing in type `{ firstName: string; }` but required in type `User`.
Enter fullscreen mode Exit fullscreen mode

If we want to avoid that error, we have to change firstUser's type to Partial<User>. That will tell TypeScript to set every property in the type User to optional:

type User = {
    firstName: string,
    lastName: string
}

let firstUser:Partial<User> = {
    firstName: "John"
}
Enter fullscreen mode Exit fullscreen mode

This is ultimately the same as redefining the User type to:

type User = {
    firstName?: string,
    lastName?: string
}
Enter fullscreen mode Exit fullscreen mode

The only difference is, we can now use both - if we want the type to have some missing properties, we can use Partial. If we don't, we can just use the normal User type:

type User = { 
    firstName: string, 
    lastName: string 
}
let firstUser:Partial<User> = { firstName: "John" } 
let secondUser:User = { firstName: "John", lastName: "Doe" }
Enter fullscreen mode Exit fullscreen mode

As with many other utility types in TypeScript, Partial is meant to work with interfaces or custom types defined as objects like our User type above. So it won't work on things like variables.

If you've enjoyed this quick guide, check out more TypeScript content here.

Discussion (1)

Collapse
ajinkyax profile image
Ajinkya Borade

Partial is my go to type in styled components.

const StyledButton = styled('button')<Partial<{isRed: boolean}>>`

${ ({isRed}) => isRed && 'color: red;' }
`
Enter fullscreen mode Exit fullscreen mode