flowtype：如何用内部函数接管泛型类型？答案

【问题标题】：flowtype: How to take over generic type with inner function?flowtype：如何用内部函数接管泛型类型？
【发布时间】：2020-05-02 13:21:39
【问题描述】：

我正在使用流式。
我猜以下两个代码是相同的，但上面的代码给出了错误。

以下两个代码有什么区别？
以及如何使用通用T 输入getMergedState 函数的参数而不指定getMergedState<State>

它得到一个错误：（T 中缺少属性 foo，但存在于对象字面量中）

type State = {| foo: string, bar: string |}

function getState<T>(initialState: T) {
  const getMergedState = (prevState: T, newState: $Shape<T>): T => ({
    ...prevState,
    ...newState
  });
  return [state, getMergedState];
}
const [state, getMergedState] = getState<State>({ foo: '1', bar: '2' });
const newState = getMergedState(state, { foo: '2' });

有效：

type State = {| foo: string, bar: string |}

function getState<T>(initialState: T) {
  const getMergedState = <K>(prevState: K, newState: $Shape<K>): K => ({
   ...prevState,
   ...newState
  });
  return [state, getMergedState];
}
const [state, getMergedState] = getState<State>({ foo: '1', bar: '2' });
const newState = getMergedState<State>(state, { foo: '2' });

try flow

编辑：
我简化了代码以显示流程的链接，但犯了一些错误。

原代码：

function useMergeState<T>(initialState: T) {
  const [state, setState] = React.useState<T>(initialState);
  const setMergedState = (newState: $Shape<T>) =>
    setState((prevState: T) => ({ ...prevState, ...newState }));
  return [state, setMergedState];
}

type State = {|
  text: ?string,
  text2: ?string
|};

const getInitialState = (): State => {
  return {
    text: null,
    text2: null
  };
};

const Example = () => {
  const [state, setState] = useMergeState<State>(getInitialState());
  return (
    <form>
      <input
        value={state.text}
        onChange={event => {
          setState({ text: event.target.value });
        }}
      />
    </form>
  );
};

【问题讨论】：

getState 的return 语句中的state 来自哪里？ initialState 应该在任何地方使用吗？
@user11307804 对不起，我添加了原始代码

标签： javascript flowtype

【解决方案1】：

我在 v0.116.0 上使用以下代码进行类型检查：

import * as React from "react";

function useMergeState<T: {}>(initialState: T): [T, $Shape<T> => void] {
  const [state, setState] = React.useState<T>(initialState);
  const setMergedState = (newState: $Shape<T>) =>
    setState((prevState: T): T => ({ ...prevState, ...newState }));
  return [state, setMergedState];
}

type State = {|
  text: ?string,
  text2: ?string
|};

const getInitialState = (): State => {
  return {
    text: null,
    text2: null
  };
};

const Example = () => {
  const [state, setState] = useMergeState<State>(getInitialState());
  return (
    <form>
      <input
        value={state.text}
        onChange={event => {
          setState({ text: event.target.value });
        }}
      />
    </form>
  );
};

Try Flow

主要变化是将T子类型化为对象（T: {}），指定useMergeState的返回类型（[T, $Shape<T> => void]），以及在useMergeState中指定setState的返回类型（@987654329） @)。（我还为 Try Flow 添加了从 react 中的导入。）如果您使用 State 类型定义中未出现的属性调用 setState，或者值类型不合适（例如，您设置一个数字作为text 的值）。

【讨论】：