Der Typ 'string' kann nicht dem Typ '' erben '| zugewiesen werden "Anfang" | "nicht gesetzt" | "behoben" | "absolut" | "statisch" | "relativ" | "sticky" '

Question

Ich bekomme den folgenden Fehler in meiner Anwendung (npm 5.4.2, reagieren 15.4, typescript 2.5.3, webpack 2.2.1, webpack-dev-server 2.4.1).

wird diese Arbeit:

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

Dies kompiliert nicht:

const mystyle = { 
    position: 'absolute'    
} 

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

Der Compiler-Fehler ist:

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. 

Aber what't der Unterschied? Ich kann es beheben mit:

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

aber ist dies eine gute Lösung?

Ich habe dieses Problem nicht mit anderen Stil/CSS-Eigenschaften.

fand ich ein ähnliches Problem auf GitHub: https://github.com/Microsoft/TypeScript/issues/11465 aber wenn es richtig verstehen, es war in einer ealier Version ein Typoskript Fehler.

Jede Hilfe wird geschätzt.

Answer 1

Dies ist ein Workaround, aber es ist in Ordnung. Einige andere Lösung ist:

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

können Sie zurück überprüfen, wenn diese issue gelöst werden. Um TS 2.6 denke ich, nach Meilensteinen zu urteilen.