CODEWITHSUNDEEP
typescriptvue.js
Nikola Lukic
Nikola Lukic

Reputation: 4244

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

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.

Upvotes: 9

Views: 5246

Answers (3)

Owl
Owl

Reputation: 6853

EDIT 2024: This answer was written in 2020. I've stopped using Vue and moved on to another framework, so this answer might be incorrect / irrelevant. Check answer from kyis for more up to date information

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%'
}

Upvotes: 11

kyis
kyis

Reputation: 231

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" />

Upvotes: 8

GeeWhizBang
GeeWhizBang

Reputation: 857

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?

Upvotes: 1

Related Questions