flowtype


Correct type for Canvas element


I am trying to figure out the correct types for canvas element.
Whatever I do - it does not work. I have tried all possible html element types but flow says they are incompatible. So why cant I assign canvas element to HTMLCanvasElement variable?
Any ideas?
The node parameter is a div element which contains canvas element. It is simple really. If I strip the types, everything works.
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>
)
}
I get these errors from flow linter:
Node This type is incompatible with HTMLCanvasElement
null This type is incompatible with HTMLCanvasElement
undefined This type is incompatible with HTMLCanvasElement
Thanks
P.S. It is Inferno - not React. So the ref is a function, not a string. Just to avoid people correcting this.
It looks like HTMLDivElement is not defined in Flow internals:
https://github.com/facebook/flow/blob/v0.43.1/lib/dom.js#L2811
HTMLDivElement and HTMLCanvasElement are sibling types (both children of HTMLElement), so naturally Flow will say it's unsafe to try to cast HTMLDivElement to HTMLCanvasElement since you generally never want to do this in any typed system.
You can beat Flow's type system and get around this by casting node.firstChild to any. This is usually not recommended, but seems acceptable in this case since HTMLDivElement doesn't give you anything and you definitely know what it is.
let canvas: HTMLCanvasElement = (node.firstChild: any)
feel free to also view the flowtype.org/try link

Related Links

what is the right location for .js.flow in flowtype?
how to declare modules that has other modules in Flowtype?
How should a disjoint union wrapper be structured for refinement to work?
how to specify a range of folders in ignore section of Flowtype .flowconfig?
Filtering out maybe types before accessing nullable property
flowtype - higher order functions - currying
Flowtype: array of possible strings cannot be empty?
Defining an object consisting of other object types in Flow
Idiomatic way to access properties of union type
how to set the status of err to avoid flowtype check warning?
How can I get inferred type data with flowtype command?
Flow bool, boolean and Boolean
how to reuse object type definition in class definition in flowtype
flow fails on union type even with if/else
Strange error message “inconsistent use of library definitions” in flowjs
Declare a function using a type alias

Categories

HOME
twitter-bootstrap
algolia
kendo-ui
macros
intellij-idea
virtual-machine
wifi
webvr
xamarin.forms
apache-storm
window.open
arcgis
spotfire
arguments
mingw
thermal-printer
aggregate-functions
cdn
annyang
velocity
aspectj
jetbrains
aggregate
hql
printf
glibc
spring-webflow
datazen-server
klipfolio
bootstrap-accordion
chartist.js
sha
workflow-foundation
ipython-parallel
scene7
dropdownbox
javafxports
kepserverex
pygraphviz
directadmin
mtm
vpython
binary-decision-diagram
firefox-developer-edition
html-entities
spring-ide
beanshell
jscoverage
sharpdevelop
wink
bipartite
apache-commons-cli
distcc
cosign-api
queuing
avi
shtml
jcalendar
cexception
datamodel
dynamics-nav-2013
matlab-engine
libgcrypt
taverna
jsoncpp
nmock
polarion
tokudb
android-networking
sicstus-prolog
autopep8
google-experiments
applinks
sony-xperia
qxorm
crystal-reports-7
xcode5
kss
sync
indic
lettuce
acrofields
nvcc
nop
svg-android
friendly-id
fade
octokit
static-class
source-depot
jython-2.5
vline
netzke
webpage-screenshot
erlide
umfpack
flexbuilder
response-time
silverlight-2.0
data-formats
retrospectiva
zend-acl
onresize
software-update
j++
weak-typing

Resources

Encrypt Message