Vue/Typescript How to find right type of object used for style = { }

user_1513187 0
Viewed 1426

I use this approach for style in my vue ts project.

    private styleTableObject: CSSStyleSheet = {
      width: '100%',
      height: '76%'
    }

I am forced to the any type.

    private styleTableObject: any = {
      width: '100%',
      height: '76%'
    }

Error logs:

Type '{ width: string; height: string; }' is not assignable to type 'CSSStyleSheet'.
  Object literal may only specify known properties, and 'width' does not exist in type 'CSSStyleSheet'.

If a use any type from visual code helper i got error logs:

 Type '{ width: string; height: string; }' is not assignable to type 'StyleSheet'.
  Object literal may only specify known properties, and 'width' does not exist in type 'StyleSheet'.

219:13 Type '{ width: string; height: string; }' is missing the following properties from type 'CSSStyleDeclaration': alignContent, alignItems, alignSelf, alignmentBaseline, and 382 more.
vue.js typescript
3 Answers

Use Partial<CSSStyleDeclaration> instead

Partial<T>

Constructs a type with all properties of T set to optional. This utility will return a type that represents all subsets of a given type

From: https://www.typescriptlang.org/docs/handbook/utility-types.html#partialt

So your code will look like this

private styleTableObject: Partial<CSSStyleDeclaration> = {
    width: '100%',
    height: '76%'
}
user_123972500

So that is helpful, this seems to work:

const style: Partial<CSSStyleDeclaration> = {};
const arrowStyle: Partial<CSSStyleDeclaration> = {};

const data = ref({
 strokeWidth: 0.108,
 style: style,
 arrowStyle: arrowStyle,
});

But is there a way to do it without the separate variables right when defining const data?

user_27188560

Vue 3 provides its own type for CSS property objects. Note Partial<CSSStyleDeclaration> will cause type checking errors in your template (i.e. with Volar enabled):

import type { CSSProperties } from 'vue'

const styleTableObject: CSSProperties = {
  width: '100%',
  height: '76%'
}

<div :style="styleTableObject" />
user_45004610
Related