Question

我正在看Stripe的例子，并且遇到了一些我从未使用过的东西，之前这个部分叫做什么，所以我可以阅读它？

<{}, {stripe: null | StripeShape}>

下面是我正在看的完整示例。

export class App extends React.Component<{}, {stripe: null | StripeShape}> {
  constructor() {
    super();

    this.state = {
      stripe: null,
    };
  }

  componentDidMount() {
    // componentDidMount only runs in a browser environment.
    // In addition to loading asynchronously, this code is safe to server-side render.

    // You can inject a script tag manually like this,
    // or you can use the 'async' attribute on the Stripe.js v3 <script> tag.
    const stripeJs = document.createElement('script');
    stripeJs.src = 'https://js.stripe.com/v3/';
    stripeJs.async = true;
    stripeJs.onload = () => {
      // The setTimeout lets us pretend that Stripe.js took a long time to load
      // Take it out of your production code!
      setTimeout(() => {
        this.setState({
          stripe: window.Stripe('pk_test_...'),
        });
      }, 500);
    };
    document.body && document.body.appendChild(stripeJs);
  }

  render() {
    return (
      <StripeProvider stripe={this.state.stripe}>
        <Checkout />
      </StripeProvider>
    );
  }
}

Answer 1

请查看以下代码：

interface SearchBarProps {
  term: string;
  optionalArgument?: string;
}

interface SearchBarState{
  something: number;
}

class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
  constructor(props: SearchBarProps){
    super(props);

    this.state = {
      something: 23
    };
  }

  render() {
    const {something} = this.state;
    return (
      <div>{something}</div>
    )
  }
}

在class SearchBar extends React.Component<SearchBarProps, SearchBarState> {中，SearchBarProps和SearchBarState分别表示组件SearchBar的预期道具类型和状态类型。使用typescript时，必须提供propTypes和stateType 您可以避免使用关键字any来提供类型，但如果您真的想利用打字稿，我强烈建议您不要遵循这条“邪恶”路径。

在界面SearchBarProps中，optionalArgument成为可选参数，因为我们在其前面添加了问号?，因此即使<SearchBar term='some term' />也不会显示任何错误你没有明确地传递optionalArgument 希望这能解决你的问题！

Answer 2

您正在查看流程类型：

https://flow.org/

这是一个由Facebook开发的静态类型检查器，允许您键入JavaScript对象

Component前面的语法是什么？

2 个答案: