reactjs - Kiểu 'string' không thể gán cho kiểu '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"'

Tôi nhận được lỗi sau trong ứng dụng của mình (npm 5.4.2, react 15.4, typescript 2.5.3, webpack 2.2.1, webpack-dev-server 2.4.1).

Điều này sẽ hiệu quả:

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

Điều này sẽ không biên dịch:

const mystyle = {
    position: 'absolute'            
} 

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

Lỗi biên dịch là:

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.

Nhưng sự khác biệt là gì? Tôi có thể sửa nó bằng:

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

nhưng đây có phải là một giải pháp tốt không?

Tôi không gặp vấn đề này với các thuộc tính style/css khác.

Tôi đã tìm thấy một vấn đề tương tự trên github: https://github.com/Microsoft/TypeScript/issues/11465 nhưng nếu tôi hiểu đúng, đó là một lỗi typescript trong phiên bản trước.

Bất cứ sự giúp đỡ nào cũng được trân trọng.

Câu trả lời #1

Đây là một giải pháp tạm thời, nhưng nó ổn. Một số giải pháp khác là:

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

Bạn có thể kiểm tra lại khi vấn đề này sẽ được giải quyết. Khoảng TS 2.6 tôi đoán, dựa vào các cột mốc.

Câu trả lời #2

Sử dụng kiểu React.CSSProperties:

import React, { CSSProperties } from "react";

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

Sau đó chỉ cần sử dụng kiểu như bình thường:

<div style={myStyles} />

Câu trả lời #3

Bạn có thể khiến TypeScript suy luận các giá trị literal trên toàn bộ đối tượng bằng cách sử dụng một tuyên bố const:

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

Bằng cách này, nếu bạn thêm nhiều thuộc tính hơn vào mystyle, nó cũng sẽ hoạt động cho chúng.

Câu trả lời #4

Câu trả lời của superluminary sẽ không hoạt động nếu bạn có các đối tượng style lồng nhau. Trong trường hợp này bạn có thể tạo một loại:

import React, { CSSProperties } from 'react';

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

Và sử dụng nó như sau:

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

Và sau đó:

<div style={styles.someStyle} />