typescript - 为什么在 Typescript 泛型中使用 '&'

Question

我是打字稿的新手。在下面的代码中，我看到使用带有“&”的泛型。我不明白这是什么意思？我认为 2 个接口可以加入并喜欢 1 个接口工作？

import * as React from 'react';

export interface StatefulCounterWithDefaultProps {
 label: string;
 initialCount?: number;
}

interface DefaultProps {
 readonly initialCount: number;
}

interface State {
  readonly count: number;
}

export const StatefulCounterWithDefault: 
React.ComponentClass<StatefulCounterWithDefaultProps> =
class extends React.Component<StatefulCounterWithDefaultProps & 
 DefaultProps> {

static defaultProps: DefaultProps = {
  initialCount: 0,
};

readonly state: State = {
  count: this.props.initialCount,
};

componentWillReceiveProps({ initialCount }: StatefulCounterWithDefaultProps) {
  if (initialCount != null && initialCount !== this.props.initialCount) {
    this.setState({ count: initialCount });
  }
}

handleIncrement = () => {
  this.setState({ count: this.state.count + 1 });
}

render() {
  const { handleIncrement } = this;
  const { label } = this.props;
  const { count } = this.state;

  return (
    <div>
      <span>{label}: {count} </span>
      <button type="button" onClick={handleIncrement}>
        {`Increment`}
      </button>
    </div>
  );
}
};

在这段代码中：React.Component<StatefulCounterWithDefaultProps & DefaultProps> 2 个接口用 & 连接在一起。它是如何工作的？

标签： typescript

Answer 1

这些被称为交叉点类型。见https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types