flowtype：如何使用內部函數接管泛型類型？

Question

我正在使用流型。
我猜下面兩個代碼是一樣的，但是上面的代碼出錯了。

下面兩個代碼有什么區別？
以及如何在不指定getMergedState<State>情況下在getMergedState函數的參數中使用泛型T類型

它得到一個錯誤：（屬性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' });

試流

編輯：
我簡化了代碼以顯示流程的鏈接，但犯了一些錯誤。

原始代碼：

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

嘗試流程

主要的變化是將T子類型化為對象（ T: {} ），指定useMergeState的返回類型（ [T, $Shape<T> => void] ），並在useMergeState ( T ) 中指定setState的返回類型。 （我還為 Try Flow 添加了從 react 的導入。）如果您使用未出現在State類型定義中的屬性調用setState ，或者如果值類型不合適（例如，您將數字設置為text值）。