Question

示例：

function useCallback(fn) {
  return fn;
}

type ApiData = {
  '/user': { user: any },
  '/post': { post: any },
};

function useApi<Path extends keyof ApiData>(
  path: Path,
  opts: {
    cb?: (data: ApiData[Path]) => void,
  },
) {}

useApi('/user', { cb: ({ user }) => null }); // ok
useApi('/user', { cb: ({ post }) => null }); // Property 'post' does not exist on type '{ user: any; }'
useApi('/user', { cb: useCallback(({ user }) => null) }); // ok
useApi('/user', { cb: useCallback(({ post }) => null) }); // should have error

TS游乐场：https://www.typescriptlang.org/play?noImplicitAny=false#code/GYVwdgxgLglg9mABCAzgUwMIEMA2OBGWEA1gBTBgCUiA3gFCKIBOaUITSFA3HQL510oATwAOaRAEERMACJYoWRAF5aDRAHIA9KjRN1ALlrJ0TQ1jBDEvADRqtIuCigGjDp2YtXbvHnVCRYBGM0KRgAHgAFeQALRDQADyg0MAATFERiNCE4YElpOQUAPlI1ERjDKKho20Y4ESgUQ3pGRgh8AH5DUhT5LENQgqwAbUrogF1qJULEADc4GBSarzpqGn46HVDSLR09ayM2rppgpitJ6bAQPDOuRE1NRDhiDfQtnZN1fePDxFJjtygZ2UFyuOBudweESYdV0wg0APUiBScDQ6TAcEBCRgTkeSGEYg0x12HiEt146heIWk220Hy+iB+OmweEIJFIfxOQKmiEueGovEot3uj2em2p710nwO+EMTNwBCIZA5AK5IL54OFKGicCuKUQ0SwM3EumhTAEQA

在此示例中，没有useCallback的情况下，TS能够自动确定回调参数的类型。但是，useCallback会失去该功能。

有趣的是，如果我需要设置cb属性，则TS能够推断参数的类型：

function useApi<Path extends keyof ApiData>(
  path: Path,
  opts: {
    cb: (data: ApiData[Path]) => void, // <- removed the "?"
  },
) {}

useApi('/user', { cb: useCallback(({ post }) => null) }); // Property 'post' does not exist on type '{ user: any; }'

如何让TS推断回调的参数？

Answer 1

与?可选运算符无关紧要

Typescript解析器正确推断出类型是什么。

由于您将useApi函数的第一个参数指定为'/user'，所以它将不起作用。

将其更改为

useApi('/post', { cb: useCallback(({ post }) => null) });

那行得通。

打字稿：通过React的useCallback传递推断的类型

1 个答案: