reactjs - 如何检查提供给 React 组件的属性是否是 Immutable.js Record with Flow 的实例？

Question

尝试在我的项目中设置 Flow，但不太了解如何使用不可变记录。我想静态检查组件 Prop ，这是我的做法:

// @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 (
    <span>
      Name: {data.name}
    </span>
  );
};

render(
  <PersonInfo data={1} />, // I would expect to get some compile error here
  document.getElementById("app")
);

我还在项目中添加了 immutable.js.flow 和 .flowconfig。

Answer 1

这实际上是 Immutable.js 类型定义的问题。它总是返回 any类型。 基本上意味着记录没有经过类型检查。我探讨了记录定义如此松散的原因 here 。它的要点是，Flow 还不支持与对象的相交类型(记录的类型必须是)。 但是您可以使用 this answer 中描述的更严格的类型定义来覆盖 Record 类型。 .我复制了它:

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>;
}

如果您将此减速添加为本地减速，您将无法再直接访问属性(就像您对 data.name 所做的那样)，但必须使用 get 函数类似于 data.get('name')。在我看来，与添加的类型保存相比，这个定义的缺点相当小。现在遗憾的是，由于语言中的其他限制，值的类型没有进行类型检查，如 illustrated in this example .

遗憾的是，对于 Flow 中的强类型不可变数据结构还没有好的解决方案。不过，实现这一完美所需的功能几乎都在 Flow 的路线图上。

TL;DR

由于语言的限制，

记录不会进行类型检查。但是您可以使用上面提供的声明来改进类型检查。