Question

我遇到了一个问题，我必须在我的商店 / 视图 / 组件中重新键入/重新定义重复类型< / em>文件即想想一个视图，它接受一些商店值并且有一个改变该值的函数，并且该函数被传递给一个组件。

这里有很多类型的可重用性，我继续研究如何为此构建项目，但没有找到任何有用的东西。我找到的是$PropertyType实用程序类，这导致我采用以下方法

// @flow import React, {Component} import OtherComponent from "./OtherComponent" export type MyComponentProps = { something: string } export type MyComponentState = { something2: boolean } export type MyComponentActions = { check: ( something2: $PropertyType<MyComponentState, 'something2'>, something: $PropertyType<MyComponentProps, 'something'> ) => string } class MyComponent extends Component<MyComponentProps, MyComponentState> { state = { something: /* comes from somewhere else i.e store */ false } check: $PropertyType<MyComponentActions, 'check'> = (something2, something) => something2 ? "Default" : something render() { return <OtherComponent foo={this.check} /> } }

这是一个无用的示例，但它显示了我选择的模式，这种方式OtherComponent可以导入这些类型，即check函数，并在其中使用$PropertyType指定其foo道具类型。

它有效，但非常冗长，因此我想向社区寻求其他建议。

我的主要目标是能够并重新使用这些类型，而无需以干净的方式重新输入它们。

Answer 1

我不认为对此问题有一个普遍的答案，在这里我不能给您一个确切的答案。我现在已经与Flow进行了1.5年的广泛合作，并与React一起合作了一年。这里是一些处理类型的技巧。

1。使用类型推断

在推断类型时，Flow确实非常强大。结合以下技巧，您可以避免进行大量注释。流程只会弄清楚一切正常。您还可以使用typeof批注获取值的类型。

2。使用类型而不是组件的接口来为您的域建模

这已在评论中提到。使用类型为您的域建模。例如。如果您使用显示用户的组件，请对用户对象而不是组件的界面进行建模。然后，您可以将用户类型导入使用它的组件中。

type User = { id: string, name: string };
type ProfilePropType = { user: User };

class Profile extends Component<ProfilePropType> {
  // ...
}

3。使用状态管理

例如，

Redux可以帮助您使用此处的类型。这将为您的域类型提供结构，并减少传递的道具数量。另一个好处是GraphQL和Apollo客户端/中继。

4。以编程方式生成类型

我们在后端通过postloader从Postgres模式生成类型，而在前端通过GraphQL查询生成类型。目前，我们正在根据其文档为 react-semantic-ui 生成类型。在那之后，没有多少类型可以写自己了。可能有一些针对您的用例的工具。

最后一件事：

类型很冗长。有时候，明确一点是件好事。这个想法是，类型可以通过强迫您对事物进行明确化来减少您花费在寻找错误上的时间。重新定义事物通常是可以的。与使用$PropertyType相比，这还会导致更好的错误，因为Flow将为您提供两种不兼容的类型，而不是隐秘的消息。

使用流类型构建反应项目以获得最佳类型可重用性

1 个答案: