javascript - 使用流类型构建 react 项目以实现最佳类型可重用性

Question

我遇到了一个问题，我必须在我的store/view/components 文件，即考虑一个接受一些存储值并具有更改该值的函数的 View ，并将该函数传递给组件。

这里有很多类型的可重用性，我继续研究如何为此构建项目，但没有发现任何有用的东西。我找到的是 $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 Prop 类型时包含在其中。

它有效，但非常冗长，因此我想向社区征求替代建议。

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

Answer 1

我不认为这个问题有一个普遍的答案，我不能在这里给你一个明确的答案。我现在已经广泛使用 Flow 工作了 1.5 年，现在还与 React 一起工作了一年。以下是使用类型的一些技巧。

<强>1。使用类型推断

Flow 在推断类型方面非常强大。结合以下提示，您可以避免做很多注释。 Flow 只会弄清楚事情是否有效。您还可以使用 typeof 注释来获取值的类型。

<强>2。使用类型而不是组件的接口(interface)为您的域建模

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

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

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

<强>3。使用状态管理

例如，Redux 可以帮助您处理此处的类型。这将为您提供域类型的结构，并减少传递的 Prop 数量。另一个祝福是 GraphQL 和 Apollo Client/Relay。

<强>4。以编程方式生成类型

我们正在通过 postloader 从我们的 Postgres 模式生成类型在后端和前端为我们的 GraphQL 查询类型。目前我们正致力于从他们的文档中为 react-semantic-ui 生成类型。之后就没有多少类型可以自己写了。可能有一些工具适合您的用例。

最后一件事:

类型是冗长的。有时候直截了当是件好事。这个想法是，类型通过强制你明确说明事情来减少你花在搜索错误上的时间。通常可以重新定义事物。这也会导致比使用 $PropertyType 更好的错误，因为 Flow 会给你两种不兼容的类型，而不是神秘的消息。