Canvas要素のタイプが正しくありません

Question

キャンバス要素の正しい型を見つけようとしています。 私は何をしても動作しません。私はすべての可能なHTML要素型を試しましたが、フローは互換性がないと言います。だから私canvas要素をHTMLCanvasElement変数に割り当てるのはなぜですか？

アイデア？

nodeパラメータは、canvas要素を含むdiv要素です。本当にシンプルです。タイプを取り除くと、すべてが機能します。

export class Graph extends Component { 
     draw = (node: HTMLDivElement) => { 
     let canvas: HTMLCanvasElement = node.firstChild 
     if (canvas){ 
      canvas.width = parseInt(getComputedStyle(node).getPropertyValue('width')) 
      canvas.height = parseInt(getComputedStyle(node).getPropertyValue('height')) 
     } 
     let chart = new Chart(canvas, { 
      type: this.props.type, 
      data: this.props.data 
     }) 
     } 
     render =() => (
     <div ref={this.draw} className='graph'> 
      <canvas /> 
     </div> 
    ) 
    } 

私は、フローリンターからこれらのエラーを取得：

Node This type is incompatible with HTMLCanvasElement 
null This type is incompatible with HTMLCanvasElement 
undefined This type is incompatible with HTMLCanvasElement 

おかげ

P.S.それはインフェルノです - 反応しません。したがって、refは関数であり、文字列ではありません。ちょうどこれを修正する人々を避けるために。

Answer 1

HTMLDivElementはフローの内部で定義されていないように見えます： https://github.com/facebook/flow/blob/v0.43.1/lib/dom.js#L2811

HTMLDivElementとHTMLCanvasElementは種類（HTMLElementの両方の子供を）兄弟しているので、当然の流れは、それはあなた以来HTMLCanvasElementにHTMLDivElementをキャストしようとする危険なだと言うだろう一般に、型指定されたシステムではこれをしたくない。

あなたはFlowのタイプのシステムに勝利し、node.firstChildをanyにキャストすることでこれを回避できます。これは通常推奨されていませんが、HTMLDivElementはあなたに何かを与えておらず、それが何であるかを間違いなく知っているので、この場合許容されるようです。

let canvas: HTMLCanvasElement = (node.firstChild: any) 

feel free to also view the flowtype.org/try link