An object that holds CSS attributes

Question

An object that holds CSS attributes

I am working on a function that takes an element from the page and adds CSS styles to its attribute. The argument passed to this function should ideally be an object with keys like height, minWidth, flexDirection, and so on.

function addStyle (el: HTMLElement, style: Style): void {
  for (const property in style) {
    el.style[property] = style[property]
  }
}

My issue lies in defining the type for this object. It's not practical to manually list every CSS property. I believe TypeScript should have a way to handle this automatically, but I'm unsure how to do it. This is my best attempt:

type Style = Partial<CSSStyleDeclaration>

...yet I encounter the error "

Type 'string | undefined' is not assignable to type 'string'

": TypeScript playground

This particular error can be addressed, but I'm concerned that it may indicate a mistake or confusion on my part.

Is there a standard method to define the type for an object containing CSS properties?

css typescript

Answer 1

Answer №1

It's a bit tricky to handle situations like this in TypeScript. When dealing with properties that may or may not exist on an object, TypeScript treats both scenarios – the property existing but containing undefined, and the property not existing at all – the same way.

For instance, let's say you want to type an object that might have a property called foo which is expected to be a string. You can't simply do { foo: string } because the property might not be there. One option is to use { foo: string | undefined }. Another possibility is { foo?: string }, although it's practically the same as the previous one. Unfortunately, there isn't a way to specify that a property may or may not exist, without potentially containing undefined.

A similar dilemma arises when working with CSSStyleDeclarations which involve numerous properties. While using

Partial<CSSStyleDeclaration>

is recommended, TypeScript doesn't make a distinction between partial types with properties possibly holding undefined values and those without these properties, requiring assertions for existence.

However, there is a workaround that avoids individual value references and assertions – leveraging Object.assign:

type Style = Partial<CSSStyleDeclaration>;
function addStyle(el: HTMLElement, style: Style) {
    Object.assign(el.style, style);
}

(Also, it's worth noting that specifying function return types in TypeScript isn't necessary if the compiler can infer them automatically – minimizing code clutter is often beneficial.)

Answer 2

It's a bit tricky to handle situations like this in TypeScript. When dealing with properties that may or may not exist on an object, TypeScript treats both scenarios – the property existing but containing undefined, and the property not existing at all – the same way.

For instance, let's say you want to type an object that might have a property called foo which is expected to be a string. You can't simply do { foo: string } because the property might not be there. One option is to use { foo: string | undefined }. Another possibility is { foo?: string }, although it's practically the same as the previous one. Unfortunately, there isn't a way to specify that a property may or may not exist, without potentially containing undefined.

A similar dilemma arises when working with CSSStyleDeclarations which involve numerous properties. While using

Partial<CSSStyleDeclaration>

is recommended, TypeScript doesn't make a distinction between partial types with properties possibly holding undefined values and those without these properties, requiring assertions for existence.

However, there is a workaround that avoids individual value references and assertions – leveraging Object.assign:

type Style = Partial<CSSStyleDeclaration>;
function addStyle(el: HTMLElement, style: Style) {
    Object.assign(el.style, style);
}

(Also, it's worth noting that specifying function return types in TypeScript isn't necessary if the compiler can infer them automatically – minimizing code clutter is often beneficial.)

Answer 3

Answer №2

This solution has worked well in my experience:

Subset<Exclude<CSSStyleDeclaration,
    'length'
    | 'parentRule'
    | 'getPropertyPriority'
    | 'getPropertyValue'
    | 'item'
    | 'removeProperty'
    | 'setProperty'
    | number>>

It is worth noting that you might need to utilize Object.assign() instead of a for loop, due to TypeScript simplifying the property type to a string.

Answer 4

This solution has worked well in my experience:

Subset<Exclude<CSSStyleDeclaration,
    'length'
    | 'parentRule'
    | 'getPropertyPriority'
    | 'getPropertyValue'
    | 'item'
    | 'removeProperty'
    | 'setProperty'
    | number>>

It is worth noting that you might need to utilize Object.assign() instead of a for loop, due to TypeScript simplifying the property type to a string.

Answer 5

Answer №3

Utilize the non-null assertion operator specifically designed for your use case, now with an added exclamation mark!

type Style = Partial<CSSStyleDeclaration>

function addStyle (el: HTMLElement, style: Style): void {
  for (const property in style) {
    el.style[property] = style[property]!;
  }
}

You can also opt to add || '' as an alternative.

type Style = Partial<CSSStyleDeclaration>

function addStyle (el: HTMLElement, style: Style): void {
  for (const property in style) {
    el.style[property] = style[property] || '';
  }
}

Answer 6

Utilize the non-null assertion operator specifically designed for your use case, now with an added exclamation mark!

type Style = Partial<CSSStyleDeclaration>

function addStyle (el: HTMLElement, style: Style): void {
  for (const property in style) {
    el.style[property] = style[property]!;
  }
}

You can also opt to add || '' as an alternative.

type Style = Partial<CSSStyleDeclaration>

function addStyle (el: HTMLElement, style: Style): void {
  for (const property in style) {
    el.style[property] = style[property] || '';
  }
}

An object that holds CSS attributes

Answer №1

Answer №2

Answer №3

Similar questions

Utilize ngClass for every individual section

Troubleshooting HTML Label Problems

Safari iOS does not properly support responsive images when using srcset and sizes

Changing the position of a Bootstrap popover dynamically from top to bottom

Creating dynamic grids in React.js by utilizing HTML

Words piling up one upon the other

Filter out all elements in an array except for one from a JSON response using Angular 2

Tips on how to remove a function from a union

Encountering an error when attempting to access an object property dynamically by using a passed down prop as a variable in Vue 2 & Vuex

Generate detailed documentation for the functional tests conducted by Intern 4 with automated tools

What is the most effective method for attaching text to an element without being affected by the spacing of other div elements

Properly managing variable overrides in an Angular library

The Bootstrap div is struggling to maintain its width on smaller screens

What is the best way to incorporate an opaque overlay onto an image along with text overlay on top of the image?

What is the process for setting the value of a TextField based on a Dropdown Selection?

Ways to modify and change color scheme of "vs-dark" or "vs" uiTheme palette

Tips for assigning array variables to elements in querySelectorAll [Pure JavaScript]

Creating a uniform height for images in a Bootstrap 4 carousel across various sizes and screen dimensions

Tips for aligning the dialog box in the center of the screen based on the current scroll position

What steps do I need to take in order to transform this code into a MUI component complete with