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

Question

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.

Answer 1

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