reactjs - 有没有办法使用流来限制特定的字符串模式?
问题描述
我在 React webapp 上使用 Flow,我目前正面临一个用例,我要求用户以“HH:mm”格式输入某些时间值。有什么方法可以描述字符串遵循的模式?
我一直在寻找解决方案,但我同意在某一点上的普遍共识似乎是你不需要使用 Flow 来处理这种事情,倾向于使用验证函数并依赖 UI 代码来按照正确的模式提供代码。不过,我想知道是否有任何方法可以实现这一点,以使代码尽可能具有描述性。
解决方案
您想创建一个验证器函数,但使用不透明类型别名进行了增强:https ://flow.org/en/docs/types/opaque-types/
或者,更具体地说,具有子类型约束的不透明类型别名:https ://flow.org/en/docs/types/opaque-types/#toc-subtyping-constraints
您应该在定义 opaque 类型的同一文件中编写验证器函数。它将接受原始类型作为参数并返回一个类型为具有子类型约束的不透明类型的值。
现在,在不同的文件中,您可以将一些变量键入为不透明类型,例如在函数参数中。Flow 将强制您只传递通过验证器函数的值,但这些值可以像原始类型一样使用。
例子:
exports.js
:
export opaque type ID: string = string;
function validateID(x: string): ID | void {
if ( /* some validity check passes */ ) {
return x;
}
return undefined;
}
import.js
:
import type {ID} from './exports';
function formatID(x: ID): string {
return "ID: " + x; // Ok! IDs are strings.
}
function toID(x: string): ID {
return x; // Error: strings are not IDs.
}
推荐阅读
- spring-boot - 我想在 Spring Boot 中不使用 multipart 的情况下上传文件,如果我能得到你对此的宝贵建议,那就太好了
- python - 一起使用数据类和属性时的奇怪问题
- android - 颤动如何在屏幕中心滚动后制作ListView的项目
- spring-boot - 不同扩展实例上的 Kafka 状态存储
- dhtmlx - DHTMLX甘特图如何隐藏父任务?
- javascript - 从 AJAX 请求获取页面内容后,我可以选择标签元素但不能选择正文元素
- formatting - 缩进 Google Docs 中段落的第一行,但不在标题下
- c# - 安排在 ASP.NET MVC 中每天早上 8 点运行一个方法
- javascript - 我应该使用一个组件使用 ngif 进行编辑和查看,还是将它们划分为组件?
- node.js - 为我在 k8 中的 Angular 应用程序获取 502 Bad Gateway nginx/1.13.9