web-dev-qa-db-ja.com

型 'string'は型 '"inherit"に割り当てられません| 「初期」| 「設定解除」| 「修正済み」| 「絶対」| 「静的」| 「相対」| 「ねばねば」

アプリケーションで次のエラーが発生します（npm 5.4.2、react 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 しかし、それを正しく理解すれば、それは旧バージョンのTypeScriptバグ。

任意の助けに感謝します。

reactjstypescriptwebpack
19
gfjr

これは回避策ですが、大丈夫です。他の解決策は次のとおりです。

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

この issue が解決されると、再度確認できます。マイルストーンで判断すると、TS 2.6あたりです。

32
Andy Theos

React.CSSPropertiesタイプを使用します。

import React, { CSSProperties } from "react";

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

次に、通常どおりスタイルを使用します。

<div style={myStyles} />
4
superluminary