DEV Community

Cover image for Typescript Partial, where have you been my whole life?

Typescript Partial, where have you been my whole life?

nickraphael profile image Nick Raphael ・2 min read

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 docs...

Let's sasy you have a simple interface and instance...

interface Todo {
    title: string;
    description: string;

const todo1 = {
    title: 'organize desk',
    description: 'clear clutter',

How would we write a method that takes our instance of Todo and updates it with values from another Todo?

How about this?

function updateTodo(originalTodo: Todo, fieldsToUpdateTodo: any) {
    return { ...originalTodo, ...fieldsToUpdateTodo };

const todo2 = updateTodo(todo1, {
    description: 'throw out trash',

Not great. We had to type fieldsToUpdateTodo as any because if it was an Todo, we would need to set every property on the Todo interface. What if we only wanted to update description? Hence using any. I guess we could mark all properties in Todo as optional, but then we'd lose a lot of the typechecking that we love.

If we knew we only ever wanted to update description things are easier...

function updateTodoDescription(originalTodo: ITodo, description: string) {
    return { ...originalTodo, description: description };

But this pattern isn't scaleable if we had many properties and wanted to arbitrarily update properties.

Let's cut to the chase. How can Partial help? Turns out it's simple, barely an inconvenience...

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
    return { ...todo, ...fieldsToUpdate }; 

Wrapping an object in Partial marks all the properties on that object as optional.

We can then call our updateTodo like this...

const todo2 = updateTodo(todo1, {
    description: 'throw out trash',

We are not forced to set every property from the Todo interface. Our UpdateTodo method can then happily use the spread operator to merge the two Todo's.


Editor guide
emptyother profile image

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.
Enter fullscreen mode Exit fullscreen mode
daniel15 profile image
Daniel Lo Nigro

Your extend method just looks like Object.assign :)

emptyother profile image

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

Thread Thread
nombrekeff profile image
Manolo Edge

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 :)" } }

cookavich profile image
Paul Cook

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({
        profile: new Profile({

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

nickraphael profile image
Nick Raphael Author

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

nickytonline profile image
Nick Taylor (he/him)

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.

Readonly<T> example screenshot

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!

mgenteluci profile image
Matheus Genteluci

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.

nickraphael profile image
Nick Raphael Author

Shoutout to Fiona Tran for bringing Partial to my attention.

thereverandnd profile image
The Reverand

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

omerxx profile image
Omer Hamerman

Thank you for that!!

ogaston profile image
Omar Gaston Chalas

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

codermikky profile image
Sai Deep Konduri

This partial pattern is completely awesome.. thanks @nick

nick profile image
Nick Rameau

Watch out...

hizack profile image
Zack Sheppard

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

hemalr profile image

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

Thank you 👍

danielg212 profile image

why not simply use optional parameters ?

interface Todo {
    title?: string;
    description?: string;
messified profile image
Jesse Reese

Partial’s are tight!