React + ts学习笔记

小薯片子

已于 2023-05-15 16:19:15 修改

阅读量1k

点赞数

分类专栏： react 文章标签： react.js 学习笔记 typescript 前端

于 2023-05-06 17:50:26 首次发布

本文链接：https://blog.csdn.net/luobo2345/article/details/130532475

版权

这篇博客详细介绍了在React中结合TypeScript进行开发的全过程，从环境配置（包括Node.js和TypeScript的安装）到在类组件和函数组件中使用TypeScript，再到深入探讨React中的useState、useRef和useMemo等Hook。此外，还讲解了事件处理、TypeScript的基本类型和泛型，最后讨论了泛型的约束，为开发者提供了一个全面的React+TS学习指南。

摘要由CSDN通过智能技术生成

前提准备：

环境配置

安装node.js

官网安装：当前使用版本18.15.0

安装新的react应用：

运行命令新建react-app

npx create-react-app study-ts-app

当前版本：

“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
如果出现如下问题，无法安装依赖

可以尝试运行npm i react,如果报错，执行推荐命令

运行命令：

sudo chown -R 502:20 "/Users/rcdl/.npm"

命令详解参考：https://blog.csdn.net/wangcheeng/article/details/128165359
然后继续执行create-react-app

安装typeScript

npm i typescript --save

“typescript”: “^5.0.4”,

在react中使用ts

参考：https://juejin.cn/post/7021674818621669389

在类组件

参数没有都可以被省略

// 使用方式：React.Component<P, S={}>{...}

// 示例：
import * as React from 'react'
interface IProps {
   
  name: string;
}

interface IState {
   
  age: number;
}

class Hello extends React.Component<IProps, IState> {
   
  state = {
   
    age: 18
  };

  render() {
   
    return (
      <div>
        {
   this.state.age}
        {
   this.props.name}
      </div>
    );
  }
}

export default Hello;

React.Component中P是props类型的定义，S是state类型的定义，都是泛型接口

React.PureComponent<P, S={
   } SS={
   }>{
   ...}

React.PureComponent前两个值含义相同，第三个值代表getSnapshotBeforeUpdate的返回值

在函数组件

在函数组件中，也可以接收一个参数（可省），参数表示props的类型，示例如下

interface IProps {
  name: string
}

const HelloFunction = (props: IProps) => {
  const {name} = props;

  return (
    <div className="App">
      <h1>hello world</h1>
      <h2>{name}</h2>
    </div>
  );
}

export default HelloFunction;

定义函数组件的第二种方式，React.FunctionComponent<P={}>来定义，也可以使用其简写React.FC<P={}>，参数可省，示例如下

interface IProps {
   
  name: string
}

const App: React.FC<IProps> = (props) => {
   
  const {
   name} = props;
  return (
    <div className="App">
      <h1>hello world</h1>
      <h2>{
   name}</h2>
    <