流：无法获取this.props.width，因为T中缺少属性宽度

Question

我在Flow项目上使用React Native进行类型检查。

参考：https://flow.org/en/docs/types/

我有两个文件：SvgRenderer.js和Cartoon.js，其中：

Cartoon extends SvgRenderer

下面有他们的源代码：

SvgRenderer.js

import React from 'react';
import Svg, { G } from 'react-native-svg';

export default class SvgRenderer<T> extends React.Component<T> {

  width: number;
  height: number;
  scaleFactor: number;

  constructor(props: T) {
    super(props);
  }
  ...
  config(originalSize: number[]) {
    switch (true) {
      case (this.props.width != undefined):
        this.scaleFactor = this.props.width / originalSize[0];
        this.width = this.props.width;
        this.height = originalSize[1] * this.scaleFactor;
        break;
      case (this.props.height != undefined):
        this.scaleFactor = this.props.height / originalSize[1];
        this.width = originalSize[0] * this.scaleFactor;
        this.height = this.props.height;
        break;
    }
  }
}

Cartoon.js

import React from 'react';
import SvgRenderer from './SvgRenderer';

type Props = {
  for: string,
  width?: number,
  height?: number,
};

export default class Cartoon extends SvgRenderer<Props> {

  firstBorder: string;

  constructor(props: Props) {
    super(props);
  }
  render() {
    return ...
  }
}

我的问题是当我跑步时：

$ npm run flow

我得到：

Error -------------------- src/helpers/SvgRenderer.js:32:24

Cannot get this.props.width because property width is missing in T [1].

     src/helpers/SvgRenderer.js
     29|     this.originalWidth = originalSize[0];
     30|     this.originalHeight = originalSize[1];
     31|     switch (true) {
     32|       case (this.props.width != undefined):
     33|         this.scaleFactor = this.props.width / this.originalWidth;
     34|         this.width = this.props.width;
     35|         this.height = this.originalHeight * this.scaleFactor;

Error -------------------- src/helpers/SvgRenderer.js:33:39

Cannot get this.props.width because property width is missing in T [1].

     src/helpers/SvgRenderer.js
     30|     this.originalHeight = originalSize[1];
     31|     switch (true) {
     32|       case (this.props.width != undefined):
     33|         this.scaleFactor = this.props.width / this.originalWidth;
     34|         this.width = this.props.width;
     35|         this.height = this.originalHeight * this.scaleFactor;
     36|         break;

如下图所示：

我不明白为什么Flow说（对于SvgRenderer）：

Cannot get this.props.width because property width is missing in T [1].

当我实际定义时：width里面：Cartoon，如下所示：

type Props = {
  for: string,
  width?: number,
  height?: number,
};

我知道：width和height可能是类型，但我需要这样。

关于如何按Flows顺序调整代码的任何想法都认为可以吗？

谢谢！

Answer 1

要允许访问width类型的height和T流，请确保T实际上具有此属性。这可以通过为泛型类型参数定义约束来完成：

type Dimensions = { width?: number, height?: number };

class SvgRenderer<T: Dimensions> extends React.Component<T> {
  // ...

  config(originalSize: number[]) {
    if (this.props.width != undefined) {
      this.scaleFactor = this.props.width / originalSize[0];
      this.width = this.props.width;
      this.height = originalSize[1] * this.scaleFactor;
      return;
    }

    if (this.props.height != undefined) {
      this.scaleFactor = this.props.height / originalSize[1];
      this.width = originalSize[0] * this.scaleFactor;
      this.height = this.props.height;
    }
  }
}

**还请注意略微更改的config方法（使用if语句代替switch/case）-这使流程能够精简width/height的类型（排除{{ 1}}），因此您可以执行算术运算（undefined）。无论如何，this.props.width / originalSize[0]毫无意义。

尝试工作示例here