reactjs – 如何检查提供给React组件的属性是否是带有Flow的Immu

发布时间：2020-12-15 09:35:32 所属栏目：百科来源：网络整理

导读：尝试在我的项目中设置Flow,但是不太了解如何使用Immutable记录.我想静态检查组件道具,这是我在做的方式： // @flowimport React from "react";import {render} from "react-dom";import * as I from "immutable";const Person = I.Record({ name: null,});ty

尝试在我的项目中设置Flow,但是不太了解如何使用Immutable记录.我想静态检查组件道具,这是我在做的方式：

// @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")
);

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

解决方法

这实际上是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>;
}

如果将此decleration添加为本地decleration,您将无法再直接访问属性(就像使用data.name一样),但必须使用get函数,如data.get(‘name’) .与增加的类型savety相比,IMO这个定义的缺点很小.现在可悲的是,由于语言中的其他限制,值的类型没有进行类型检查,如illustrated in this example.

遗憾的是,Flow中的stronly类型不可变数据结构没有很好的解决方案.完美所需的功能几乎就是Flow的路线图.

TL; DR

由于语言的限制,记录没有进行类型检查.但是您可以使用上面提供的声明来改进类型检查.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!