类型'string'不能分配给''inherit'|类型 "初始"| "未设置"| "固定"| "绝对"| "静态"| "亲戚"| "黏"'

Question

我的应用程序中出现以下错误(npm 5.4.2,反应15.4,typescript 2.5.3,webpack 2.2.1,webpack-dev-server 2.4.1).

这将有效:

<div style={{position: 'absolute'}}>working</div>

这不会编译:

const mystyle = {
    position: 'absolute'            
} 

<div style={mystyle}>not working</div>

编译错误是:

ERROR in ./src/components/Resource.tsx
(61,18): error TS2322: Type '{ style: { position: string; }; children: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ style: { position: string; }; children: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property 'style' are incompatible.
      Type '{ position: string; }' is not assignable to type 'CSSProperties'.
        Types of property 'position' are incompatible.
          Type 'string' is not assignable to type '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"'.
webpack: Failed to compile.

但有什么区别？我可以解决它:

const mystyle = {
    position: 'absolute' as 'absolute'            
} 

但这是一个很好的解决方案吗？

我对其他样式/ css属性没有这个问题.

我在github上发现了一个类似的问题:https: //github.com/Microsoft/TypeScript/issues/11465 但如果理解正确的话,那就是ealier版本中的打字稿错误.

任何帮助赞赏.

Answer 1

这是一种解决方法,但没关系.其他一些解决方案是:

const mystyles = {
   position: 'absolute',
} as React.CSSProperties;

您可以在解决此问题时查看.在TS 2.6附近我想,从里程碑来看.

Answer 2

您可以使用 const 断言让 TypeScript 推断整个对象的文字值：

const mystyle = {
    position: 'absolute'            
} as const;

这样，如果您向 中添加更多属性mystyle，它也将适用于它们。

Answer 3

如果您有嵌套的样式对象，superluminary的答案将不起作用。在这种情况下，您可以创建一个类型：

import React, { CSSProperties } from 'react';

export interface StylesDictionary{
    [Key: string]: CSSProperties;
}

并像这样使用它：

const styles:StylesDictionary  = {
    someStyle:{
        display:'flex',
        justifyContent:'center',  
    },
    someOtherStyle:{
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        
    }
}

进而：

<div style={styles.someStyle} />

Answer 4

使用React.CSSProperties类型：

import React, { CSSProperties } from "react";

const myStyles: CSSProperties = {
  position: 'absolute',
}

然后只需正常使用样式即可：

<div style={myStyles} />