Extend a TypeScript interface to allow its keys to be null

Question

I'm using the CSS typings from csstype to set CSS style objects. However, I'd like to allow a CSS property to be null.

From what I understand, this should work:

import * as CSS from "csstype";

type CSSProperties = CSS.Properties<number | string>;

type CSSObject = CSSProperties & { [K in keyof CSSProperties]: CSSProperties[K] | null };

let k: CSSObject = {
  background: null
};

However, I get an error that Type 'null' is not assignable to type 'string | number | undefined'.. I essentially want CSSObject to have all the same keys as CSS.Properties, but with each key also allowing a null value.

Lazar Ljubenović · Accepted Answer · 2018-11-28 20:43:13Z

4

There's no reason to & the whole object with the "or null" part on the right (talking about your third line). I don't have 'csstype' at hand, so here's a quick demo with a random custom interface.

type OrNull<T> = { [K in keyof T]: T[K] | null }

interface Interface {
    a: number
    b: string
}

type InterfaceOrNull = OrNull<Interface>

const i: InterfaceOrNull = {
    a: null,
    b: null,
}

Playground here.

answered Nov 28, 2018 at 20:43

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy · Accepted Answer · 2018-11-28 20:57:30Z

0

Since it looks like CSS.Properties just expands the argument passed into it into the values of the object, you could simple add it to the CSS.Properties declaration:

import * as CSS from 'csstype';

type CSSProperties = CSS.Properties<number | string | null>;

let k: CSSProperties = {
  background: null,
  font: 'test',
  zIndex: 123,
  color: undefined
};

answered Nov 28, 2018 at 20:57

Jeremy

1801 gold badge1 silver badge11 bronze badges

Collectives™ on Stack Overflow

Extend a TypeScript interface to allow its keys to be null

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related