React类组件JS转TS时出现Type 'string'不可分配给类型'Position'如何解决

这个报错的根本原因是：TypeScript 中 React 内置的样式类型CSSProperties对position字段做了取值限制，仅接受'static' | 'absolute' | 'relative' | 'fixed' | 'sticky'这几个固定字符串值，而你的 props 没有显式定义类型，被 TS 自动推断为了宽泛的string类型，两者类型不匹配就抛出了错误。

你可以按下面的方法修复：

• 方案1：显式定义组件Props类型（推荐长期使用） #

  直接复用React内置的CSS类型定义props，从根源上解决类型不匹配的问题：

  import React, { Component, CSSProperties } from 'react';
  
  // 声明组件的Props类型
  interface YourComponentProps {
    position?: CSSProperties['position'];
    left?: CSSProperties['left'];
    top?: CSSProperties['top'];
    height?: CSSProperties['height'];
    width?: CSSProperties['width'];
    // 你组件其他的props字段可以在这里补充定义
  }
  
  // Class Component声明时绑定Props类型
  class YourComponent extends Component<YourComponentProps> {
    render(){
      return(
        <span style={{
          position: this.props.position,
          left: this.props.left,
          top: this.props.top,
          height: this.props.height,
          width: this.props.width
        }} />
      )
    }
  }
  

  如果你的组件支持传入全量的自定义样式，还可以简化Props定义，不用逐个声明样式字段：

  interface YourComponentProps {
    customStyle?: Partial<CSSProperties>;
    // 其他props字段
  }
  
  // 使用时直接传入样式对象即可
  render(){
    return <span style={this.props.customStyle} />
  }
  

• 方案2：类型断言快速修复（适合临时调试场景） #

  如果你暂时不想定义完整的Props类型，可以用类型断言直接告诉TS当前的position值符合类型要求：

  render(){
    return(
      <span style={{
        position: this.props.position as CSSProperties['position'],
        left: this.props.left,
        top: this.props.top,
        height: this.props.height,
        width: this.props.width
      }} />
    )
  }
  

内容的提问来源于stack exchange，提问作者Yongjun Park