为啥在 Typescript 泛型中使用 '&'

Posted 2023-03-13

【中文标题】为啥在 Typescript 泛型中使用 \'&\'

【英文标题】：Why use '&' in Typescript generic为什么在 Typescript 泛型中使用 '&'

【发布时间】：2019-03-08 09:50:27

【问题描述】：

我是 Typescript 的新手。在下面的代码中，我看到使用带有“&”的泛型。我不明白这是什么意思？我认为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 个接口用 & 连接在一起。 它是如何工作的？

【问题讨论】：

这就是所谓的类型交集。 typescriptlang.org/docs/handbook/advanced-types.html

What does the ampersand (&) mean in a TypeScript type definition?的可能重复

【参考方案1】：

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