typescript - Vue/Typescript 如何找到用于样式的正确类型的对象 = { }

Question

我在我的 vue ts 项目中使用这种方法来设计风格。

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

我是被迫的 any类型。

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

错误日志:

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'.

如果使用视觉代码助手中的任何类型，我会收到错误日志:

 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

使用 Partial<CSSStyleDeclaration>反而

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

发件人: https://www.typescriptlang.org/docs/handbook/utility-types.html#partialt
所以你的代码看起来像这样

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