Flow中如何继承类函数类型？RouterState实例方法类型导出问题

问题回顾 #

你实现了一个基于unstated的RouterState容器类，其中mutationPush是实例方法。当你尝试在Props类型里直接引用RouterState.mutationPush时，Flow报错：

[flow] Cannot get RouterState.mutationPush because property mutationPush is missing in statics of RouterState [1]. (References: [1]) [Flow] mutationPush: any

这是预期行为，因为mutationPush是实例方法而非静态方法。你曾尝试在类内导出类型别名，但使用时Flow只显示别名，不展开具体的函数签名，达不到直观的类型提示效果。

解决方案：独立定义+关联类型 #

要解决这个问题，我们可以先单独定义方法的具体类型，再将其关联到类的实例方法上，同时导出这个独立类型。这样既能绕开实例方法无法直接静态引用的问题，又能让Flow显示完整的函数签名。

1. 先定义并导出独立的方法类型

在类的外部（或内部顶部）明确定义mutationPush的函数类型，同时导出供外部使用：

// @flow
import { Container } from 'unstated';

// 先定义并导出具体的函数类型
export type MutationPushType = (pathname: string, data?: Object | null) => void;

2. 在类中关联该类型

在类里声明mutationPush方法时，直接引用这个预定义的类型：

type State = {
  history: Object[],
  pathname: string,
  data: Object | null
};

class RouterState extends Container<State> {
  state = {
    history: [{ pathname: '/onboarding/sign-in', data: null }],
    pathname: '/onboarding/sign-in',
    data: null
  };

  // 用预定义的类型标注实例方法
  mutationPush: MutationPushType = (pathname, data = null) => {
    if (pathname !== this.state.pathname) {
      const history = [...this.state.history, { pathname, data }];
      this.setState({ history, pathname, data });
    }
  };
}

export default RouterState;

3. 外部使用该类型

现在你可以在组件的Props类型中直接导入并使用这个类型了：

import type { MutationPushType } from './RouterState';

type Props = {
  push: MutationPushType
};

为什么之前的尝试不生效？ #

你之前直接在类内导出mutationPush类型的方式，本质是创建了一个和方法同名的类型别名，Flow在提示时只会显示别名，不会自动展开成具体的函数签名。通过先定义独立的类型再关联，就能让Flow正确展示完整的函数签名，同时解决实例方法类型无法静态引用的问题。

内容的提问来源于stack exchange，提问作者Ilja