Liubko Liubko - 1 year ago 138
React JSX Question

How to check whether a property supplied to React component is an instance of Immutable.js Record with Flow?

Trying to setup Flow in my project, but don't really understand how to work with Immutable records. I want to statically check component props, here is how I'm doing it:

// @flow

import React from "react";
import {render} from "react-dom";
import * as I from "immutable";

const Person = I.Record({
name: null,

type Props = {
data: Person,

const PersonInfo = (props: Props) => {
const {data} = props;
return (
Name: {}

<PersonInfo data={1} />, // I would expect to get some compile error here

I also added
in the project and

Answer Source

This is actually an issue with the Immutable.js type definition. It always returns an any type. Basically meaning Records aren't typechecked. I went into the reason why records are so loosly defined here. The gist of it is, Flow doesn't support intersect-types with objects yet (which the type of a record would have to be). But you can override the Record type with the more restrictive type definition describedd in this answer. I copied it over:

declare class Record<T: Object> {
  static <T: Object>(spec: T, name?: string): Record<T>;
  get: <A>(key: $Keys<T>) => A;
  set<A>(key: $Keys<T>, value: A): Record<T>;
  remove(key: $Keys<T>): Record<T>;

If you add this decleration as a local decleration, you won't be able to access the properties directly anymore (like you did with, but will have to use the get function like this data.get('name'). IMO the downside of this definition is pretty minor, compared to the added type savety. Now sadly, due to other restrictions in the language, the types of the values aren't typechecked, as illustrated in this example.

Sadly there is no good solution for stronly typed immutable data structures in Flow yet. The features, required to make this perfect are pretty much on the roadmap for Flow though.


Records aren't typechecked, due to restrictions in the language. But you can improve typechecking by using the declaration provided above.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download