useAsync中Run函数参数中Promise的类型问题

Question

Nolan你好,

我在尝试自己实现的简化版useAync中遇到一个ts的类型问题，请求解答

我的useAsync实现如下

export const useAsync = () => {
  const [value, setValue] = useState(null);
	...
  const run = (promises: Promise<typeof value>) => {
	...
  };
...
};

在调用run函数时候，传入Promise<String> 类型，这样就会报错

Argument of type ‘Promise<string>’ is not assignable to parameter of type ‘Promise<null>’.

这是因为run中Promise是 <typeof value> 的类型，而value的初始值就是null导致的

请问有没有别的解法方法既可以限制Promise的类型跟value类型一致，又不是null类型呢？

这是我codesandbox中全部的实现的链接

Answer 1

Nolan 2021-01-28 08:57:36

实现这种效果只能用泛型，因为没法在定义useAsync的时候知道value到底是什么类型

• 提问者 Bokk #1

  我也尝试用泛型了， 但是也会报一个Generic type 'valueType' requires 1 type argument(s) 的错
  
  
  type valueType<T> = T | null;
  const [value, setValue] = useState<valueType>(null);
  const run = (promises: Promise<valueType>) => {}
  
  
  我的代码地址是
  https://codesandbox.io/s/useasync-g5b13?file=/src/Hook.tsx
  请求Nolan老师解答

• Nolan 回复 提问者 Bokk #2

  看的出来你的想法是：调用 run 的时候通过泛型判断 Promise<xx> 中的类型，然后TS会用这个类型来动态判断 useState 中的 valueType
  
  
  这里存在的问题是 TS 并不会这样工作，useState<valueType> 中的动态类型只能在声明useAsync的时候规定，所以泛型要像视频里那样加在useAsync身上

• 提问者 Bokk 回复 Nolan #3

  好的 谢谢老师
  
  不过如果useAsync 没有传参的话好像是不能成
  export const useAsync = <T>() => {}，所以有点疑惑