flowtype：如何接管具有内部功能的泛型？

Question

我正在使用 flowtype。
我猜下面两个代码是一样的，但是上面的代码报错了。

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

出现错误：（属性 foo 在 T 中缺失，但在对象字面量中存在）

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

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

原码：

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>
  );
};

Answer 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 的 return 类型 ([T, $Shape<T> => void])，并指定useMergeState (T) 中 setState 的 return 类型。（我还为 Try Flow 添加了 react 的导入。）如果您调用 setState 时使用的属性未出现在 State 类型定义中，或者值类型不合适（例如，您设置一个数字作为 text).

的值

flowtype：如何接管具有内部功能的泛型？

flowtype: How to take over generic type with inner function?

javascript

flowtype