Question

我正在尝试使用泛型键入组件的道具，但是流程没有捕获错误。基本上，我想要一个包含两个道具fetch和cb的组件。无论fetch返回什么类型，都应该是cb的返回类型。

// @flow
import React, { Component } from 'react';

type Props<T> = {
  fetch: () => Promise<T>,
  cb: T => T,
};

class Client<T> extends Component<Props<T>> {

  componentDidMount() {
    const { fetch, cb } = this.props;
    fetch().then(cb);
  }

  render() {
    return (<div />)
  }
}

const App = () => (
  <Client
    fetch={ () => Promise.resolve(1) } 
    cb={ n => 'sfd' } />
 );

在底部，我将一个函数传递给fetch，该函数解析为number，但cb返回string并且没有流错误。为什么呢？

这是repl。

大声笑，这甚至不是react的事情。一个简单的函数将无法检查类型：

const fun = <T>(a: () => T, b: T => T): T => b(a());
fun(() => 2, n => 'qwe');

Answer 1

如果功能你错了。它应该分配给变量：

function f<T>(a: () => T, b: T => T): T {
    return b(a());
}

const r: number = f(() => 2, n => ""); // error

try it

但是在组件道具的情况下...也许它希望参数化，但我找不到一种方法来参数化组件。

Answer 2

正如 James Kraus 在评论中所说的那样，流程正在推断您的 T 的类型 Comment。没有什么可以阻止泛型成为和类型，除非您限制其中一个函数或使用具体类型对泛型函数进行参数化，否则流程将继续推断和类型。

与 Kirill 所写的非常接近，但也许更容易理解限制的来源是：

number|string

这里你会在第二个函数中得到一个错误，因为我们已经告诉了 flow

<块引用>

这个泛型必须是数字，强制执行！

然后它完成它的工作。

反应组件道具中的流动泛型

2 个答案: