DEV Community

Typescript Partial<T>, where have you been my whole life?

Nick Raphael on November 25, 2019

Oh boy, how did I not know about Partial until now? This is something all Typescripters need to know. I'll use the example based on the official ...

Read full post

emptyother • Nov 26 '19

I normally use Partial<T> interface when making class constructors.

class MyClass {
    myProp = 0; // Default values are applied first.
    constructor(cfg: Partial<MyClass> = {}) {
        extend(this, cfg); // Method that shallow-copies properties from cfg to this, overwriting any defaults.
    }
}

Paul Cook • Dec 3 '19

I do the same except with Object.assign with partials like so:

export class User {
    id: number;
    name: string;
    profile = new Profile();

    constructor(options?: Partial<User>) {
        Object.assign(this, options);
    }
}

Works really nicely for creating and updating data.

onChangeUser(event: FormChangeEvent<UserForm>): void {
    this.user = new UpsertUser({
        ...this.user,
        ...event.value,
        profile: new Profile({
            ...this.user.profile,
            ...event.value.profile
        })
    });
}

Rather than having a web of Object.assign everywhere you actually see and work with the shape of your data.

Daniel Lo Nigro • Nov 26 '19

Your extend method just looks like Object.assign :)

emptyother • Nov 27 '19 • Edited

Completely forgot that one exists. Symptom of working too much with an old IE11-supported javascript framework. :P

Keff • Dec 3 '19 • Edited

Nice, I didn't know about Partial, nice find, will be useful!

Yup it could be used, but take into account that Object.assign doesn't merge nested objects.

let objA = { b: { name: 'Train' } };
let objB = { b: { description: 'A vehicle that does not like to go uphill :)' } };

let merged = Object.assign(objA, objB);
> { b: { description: "A vehicle that does not like to go uphill :)" } }

Nick Raphael • Nov 26 '19

Interesting pattern. I may have to play with it. Thanks!

Nick Taylor • Dec 2 '19 • Edited

Yeah Partial<T> is great. Another good one is Readonly<T>. It's a neat way to make things read-only, from a TS perspective even if under the hood (read JS), things are not truly read-only.

Here's a TypeScript Playground example for those interested.

For reference, here's the full list of built-in Utilitiy Types. Lots of great stuff in there.

Looking forward to your next post!

Matheus Genteluci • Nov 26 '19

It's also interesting to use the Omit<> type, which in most cases is actually a better fit because you can actually say which attibutes are not gonna be present.

Nick Raphael • Nov 26 '19

Shoutout to Fiona Tran for bringing Partial to my attention.

The Reverand • Nov 27 '19 • Edited

This a much faster way to type Pick<T,any> :) thanks!

Sai Deep Konduri • Nov 26 '19 • Edited

This partial pattern is completely awesome.. thanks @nick

Nick • Jan 14 '20

Watch out...

Jesse Reese • Nov 27 '19

Partial’s are tight!

Omer Hamerman • Nov 27 '19

INCREDIBLE!
Thank you for that!!

Omar Gaston Chalas • Dec 3 '19

wow, I didn't know about partial either, thanks for sharing

Hemal • Dec 3 '19

Excellent! Just getting into Typescript and little tips like this are immensely helpful.

Thank you 👍

Zack Sheppard • Dec 18 '19

This is great - also the first I'm learning about it!

Danielg212 • Jun 25 '20

why not simply use optional parameters ?

interface Todo {
    title?: string;
    description?: string;
 }

Benjamin Ashbaugh • Mar 27 '21

Just because something should be optional in a parameter for example doesn't mean it should be optional everywhere, as would happen if you set it optional in the interface