在使用 TypeScript 的 React 中，我们可以使用两种主要方法来创建组件：功能组件和类组件。两种方法都允许使用 props 和 state，但使用的范例略有不同。 TypeScript 通过提供静态类型进一步增强了开发安全性，这使我们能够精确定义 props 和 state 的形状。

下面我们将看不同组件的示例，使用接口来定义类型，以保证代码的一致性和可读性。

F-1。 没有 props 和 state 的功能组件

在这种情况下，一个既不使用 props 也不使用 state 的简单功能组件如下所示：

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return 
Hello, DEV.to!
;
};

该组件仅显示静态文本。

F-2。 带 props 的功能组件

当我们想通过 props 传递数据时，我们使用接口来定义数据的形式：

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC = ({ name }) => {
  return 
Hello, {name}!
;
};

这里IMyProps包含用于显示个性化问候语的名称。

F-3。 具有状态的功能组件

在功能组件中使用状态时，我们使用React的useState hook：

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

该组件使用本地状态来跟踪计数器。

F-4。 具有 props 和 state 的功能组件

通过组合 props 和 state，我们可以拥有灵活的组件，通过 props 接收数据并在内部操作状态：

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

该组件使用initialCount作为道具，并使用内部状态进行动态计数器跟踪。

K-1。 没有 props 和 state 的类组件

React 中没有 props 和 state 的类组件看起来像这样：

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return 
Hello, DEV.to!
;
  }
}

这是一个显示静态文本的简单类组件。

K-2。 带 props 的类组件

当类组件接收 props 时，我们使用接口定义它们：

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

与功能组件一样，这里我们使用 props 来展示个性化数据。

K-3。 具有状态的类组件

对于有状态的类组件，我们在构造函数中定义状态：

• 构造函数中的空括号

如果你不使用 props，你可以简单地将构造函数中的括号留空：

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

• 显式指定 {} 作为 props 的类型

如果你想明确 props，你可以指定 {} 作为类型：

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

-> 在这两种情况下，TypeScript 和 React 都可以正常工作。如果你的组件不使用 props，你可以简单地在构造函数中使用空括号，但一定要在 super 调用中传递 {} 以避免初始化错误。

该组件使用状态来跟踪计数器变化。

K-4。 具有 props 和 state 的类组件

对于同时使用 props 和 state 的类组件，我们可以结合这两个概念：

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

该组件通过 props 接收初始计数器，并进一步在内部操作状态。

在 TypeScript 中使用接口可以带来更好的打字效果和更轻松的代码可读性，尤其是在处理更复杂的数据结构时。通过这些基本示例，您可以为使用 React 和 TypeScript 编写函数和类组件奠定基础。