如何在 Typescript 中使用 React.js 组件

介绍

React 和 Typescript 结合在一起真是太神奇了。Typescript 提供了必要的工具来为应用中的 React 组件及其 props、状态和事件处理程序定义严格类型。本指南提供了开始使用 React 和 Typescript 的捷径，以及将两者结合起来的有用提示和智能策略。

建立新项目

开始使用新的 JavaScript 堆栈可能会有点令人沮丧。可用的选项非常多，您必须选择正确的工具，然后学习如何将它们成功编译在一起。

但是，当要将 React 与 Typescript 结合使用时，您可以轻松使用著名的 React 启动项目：create-react-app。因此，要创建一个新项目，您只需安装 create-react-app CLI，如下所示：

      npm install -g create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
    

就是这样。上述命令为您创建了一个新的 React 应用程序，使用 Typescript 包装在名为my-app 的新文件夹中。为了运行该应用程序，请转到my-app文件夹并运行npm start。

使用 React 的类型定义

React 提供了各种类型定义，您可以在应用程序中创建新的 React 组件时使用这些类型定义。

定义功能组件时使用React.SFC 。
```
const MyComponent: React.SFC = () => (<div>Hello!</div>)
```
A function defined by stateless functional component (SFC) returns a JSX element.



Use the React.ReactChild return type when you want to include other renderable elements, such as strings or numbers.
// This is not allowed
const MyComponent: React.SFC = () => 'Hello'

// This is allowed
const OnlyRenderable = (): React.ReactChild => 'Hello'
 


Use the React.CSSProperties type when you wish to define style objects.
const myStyle: React.CSSProperties = {
    backgroundColor: 'blue',
    border: '1px solid red'
}

const MyComponent: React.SFC = () => <div style={myStyle}>Hello</div>
 


You do not have to include any additional type definitions when you use class-based components since Typescript deduces the type from the class definition of the inherited React.Component.
class MyComponent extends React.Component {
   // The React.Component type is inferred
}

定义 Props 和 State 的类型

Typescript 最大的优点是它完全消除了 React 的PropTypes。现在，您可以简单地在 Typescript 中声明您的 prop 类型。例如，要为具有单个name属性的 React 组件创建 prop 接口，请检查以下内容：

      interface MyComponentProps {
  name: string
}
    

现在，你可以将接口用作React.SFC类型中的类型变量来断言组件的 prop 类型：

      const MyComponent: React.SFC<MyComponentProps> = ({ name }) => {
  return <div>Hello {name}</div>
}
    

同样，为基于类的组件添加 prop 和 state 类型：

      interface MyComponentState {
  // ...
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
      render() {
        return <div>Hello {this.props.name}</div>
      }
}
    

定义元素的事件处理程序

React 类型库同样为不同的事件处理程序类型提供类型声明。通常，事件处理程序类型定义依赖于两个主要问题的答案：

您正在使用哪种类型的事件？
您正在与哪种类型的元素进行交互？

如果您希望在div元素中包含onClick事件处理程序，则必须将元素类型设置为HTMLDivElement，并将事件类型设置为React.MouseEventHandler，如下所示：

      class MyComponent extends React.Component<MyComponentProps> {
  public myHandler: React.MouseEventHandler<HTMLDivElement> = (e) => {
    // do something
  }
  public render () {
    return <div onClick={this.myHandler}>Hello {this.props.name}</div>
  }
}
    

您可以在此处查看详细信息以及事件属性类型及其对应事件的完整列表。

结论

本指南是使用 React 和 Typescript 的良好起点。虽然没有涵盖 React 提供的所有类型，但您可以尝试这里学到的内容，并深入了解可能遇到的特殊情况。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文