javascript - 组件前面的语法是什么？

我正在查看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>
    );
  }
}

最佳答案

看下面的代码：

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的状态类型。使用打字稿时，必须提供propTypes和stateType。
您可以通过使用关键字any避免提供类型，但是如果您确实想利用打字稿，我强烈建议您不要遵循这种“邪恶”的做法。

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