How to make a Pick property Partial

Question

I have this function

function someThing(someArg: Pick<HTMLElement, 'id' | 'style'>) {...}

However, I only want to add some styles to someArg.style, not all the style from CSSStyleDeclaration. Otherwise, the input of the function will be huge.

So I expect to have something like Pick from Partial<CSSStyleDeclaration> not Pick from CSSStyleDeclaration

How can I do that?

Answer 1

Since your type is more complicated than just Picking some properties from an existing type, you might want to spell it out in its own interface:

interface SomeArg {
  id: HTMLElement['id'],
  style: Partial<HTMLElement['style']>
}

function someThing(someArg: SomeArg) { }

someThing({id: "id", style: {
  zIndex: "1"
}})

I'm using lookup types to make it clear that the id and style properties are related to those from HTMLElement, but you could use just string and Partial<CSSStyleDeclaration> instead.

If you really need to use something like Pick that allows subproperties to be Partial you can make a mapped type to do it, but I can't tell from your question if you need something programmatic.

UPDATE

I guess you do want it to be programmatic (although for just two properties I wouldn't bother, myself) so here's a way to define PickPartial so that you are picking from Partial properties instead of the properties themselves. I assume you don't need it to be recursive (you don't need each of the subproperties to themselves be Partial):

type PickPartial<T, K extends keyof T> = {[P in K]: Partial<T[P]>};

function someThing(someArg: PickPartial<HTMLElement, 'id'|'style'>) { }
someThing({id: "1", style: {
  zIndex: "1"
}})

Note that while this technically makes id the type Partial<string>, that is fine because mapped types do not modify primitives.. Partial<string> is just string. So the type of someArg is the same as the SomeArg interface I spelled out above.

---

Hope that helps. Good luck!