web-dev-qa-db-fra.com

Le type 'chaîne' n'est pas assignable au type '"hérité" | "initial" | "non réglé" | "fixe" | "absolu" | "statique" | "relatif" | "gluant"'

J'obtiens l'erreur suivante dans mon application (npm 5.4.2, react 15.4, TypeScript 2.5.3, webpack 2.2.1, webpack-dev-server 2.4.1).

Cela fonctionnera:

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

Cela ne compilera pas:

const mystyle = {
    position: 'absolute'            
} 

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

L'erreur de compilation est:

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.

Mais quelle différence? Je peux le réparer avec:

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

mais est-ce une bonne solution?

Je n'ai pas ce problème avec d'autres propriétés de style/css.

J'ai trouvé un problème similaire sur github: https://github.com/Microsoft/TypeScript/issues/11465 mais si je comprends bien, c'était un bogue TypeScript dans une version plus récente.

Toute aide appréciée.

reactjstypescriptwebpack
19
gfjr

C'est une solution de contournement, mais c'est correct. Une autre solution est:

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

Vous pouvez vérifier quand cela problème sera résolu. Autour de TS 2.6 je suppose, à en juger par les jalons.

32
Andy Theos

Utilisez le type React.CSSProperties:

import React, { CSSProperties } from "react";

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

Ensuite, utilisez simplement le style comme d'habitude:

<div style={myStyles} />
4
superluminary