reactjs - Tyyppi 'string' ei ole määritettävissä tyypille '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"'

Saan seuraavan virheen sovelluksessani (npm 5.4.2, react 15.4, typescript 2.5.3, webpack 2.2.1, webpack-dev-server 2.4.1).

Tämä toimii:

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

Tätä ei käännetä:

const mystyle = {
    position: 'absolute'            
} 

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

Käännösvirhe on:

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.

Mutta mikä ero sillä on? Voin korjata sen näin:

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

mutta onko tämä hyvä ratkaisu?

Minulla ei ole tätä ongelmaa muiden tyyli/CSS-ominaisuuksien kanssa.

Löysin samanlaisen ongelman GitHubista: https://github.com/Microsoft/TypeScript/issues/11465 mutta jos ymmärsin oikein, se oli TypeScriptin bugi aikaisemmassa versiossa.

Kaikki apu on tervetullutta.

Vastaus #1

Tämä on kiertotie, mutta se on okei. Jokin muu ratkaisu on:

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

Voit tarkistaa myöhemmin, milloin tämä ongelma ratkaistaan. Arviolta TS 2.6 tienoilla, jos katsoo virstanpylväitä.

Vastaus #2

Käytä React.CSSProperties-tyyppiä:

import React, { CSSProperties } from "react";

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

Sitten käytä tyyliä normaalisti:

<div style={myStyles} />

Vastaus #3

Voit saada TypeScriptin päättelemään kirjaimellisia arvoja koko objektista käyttämällä const-väittämää:

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

Näin ollen, jos lisäät lisää ominaisuuksia mystyle -tyyliin, se toimii myös niille.

Vastaus #4

Superluminaryn vastaus ei toimi, jos sinulla on sisäkkäisiä tyyliobjekteja. Tässä tapauksessa voit luoda tyypin:

import React, { CSSProperties } from 'react';

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

Ja käytä sitä näin:

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

Ja sitten:

<div style={styles.someStyle} />

Aiheeseen liittyviä artikkeleita