booboothefool booboothefool -4 years ago 117
React JSX Question

How to set up Flow type declarations - lint up with error "not defined"?

I just got started with typed JS and currently am just exporting/importing my types around. After looking a few things up, I think the proper solution seems to be the idea of "declarations".

After reading [https://flowtype.org/docs/declarations.html#pointing-your-project-to-declarations], I attempted the ".flowconfig"-style.

decls/types.js

declare type Post = {
feed: Connection,
}

declare type Connection = {
edges: Array<Edge>,
pageInfo: PageInfo,
}

declare type Edge = {
cursor: number,
node: Node,
}

declare type PageInfo = {
endCursor: number,
hasNextPage: boolean,
}

declare type Node = {
id: string,
createdAt: number,
}


Then I added the
decls/
directory to my
.flowconfig
[libs]
.

.flowconfig

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow
flow/
decls/


However all of the types lint up with error not defined e.g. 'Connection' is not defined.

Is there something I missed?

Answer Source

Since you are using ESLint, you need to add the eslint-plugin-flowtype extension and minimally enable the define-flow-type rule in order for ESLint to not mark Flow types as undefined.

ESLint config:

{
  "plugins": [
    "flowtype"
  ],
  "rules": {
    "flowtype/define-flow-type": 2
  }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download