TypeScript深度剖析:React 项目中应用 TypeScript?

一、前言

单独的使用 TypeScript 并不会导致学习成本很高,但是绝大部分前端开发者的项目都是依赖于框架的

例如与 VueReact 这些框架结合使用的时候,会有一定的门槛

使用 TypeScript 编写 React 代码,除了需要 TypeScript 这个库之外,还需要安装 @types/react@types/react-dom

bash 复制代码
npm i @types/react -s

npm i @types/react-dom -s

至于上述使用 @types 的库的原因在于,目前非常多的 JavaScript 库并没有提供自己关于 TypeScript 的声明文件

所以,ts 并不知道这些库的类型以及对应导出的内容,这里 @types 实际就是社区中的 DefinitelyTyped 库,定义了目前市面上绝大多数的 JavaScript 库的声明

所以下载相关的 JavaScript 对应的 @types 声明时,就能够使用使用该库对应的类型定义

二、使用方式

在编写 React 项目的时候,最常见的使用的组件就是:

  • 无状态组件
  • 有状态组件
  • 受控组件

无状态组件

主要作用是用于展示 UI,如果使用 js 声明,则如下所示:

javascript 复制代码
import * as React from "React";

export const Logo = (props) => {
  const { logo, className, alt } = props;

  return <img src={logo} className={className} alt={alt} />;
};

但这时候 ts 会出现报错提示,原因在于没有定义 porps 类型,这时候就可以使用 interface 接口去定义 porps 即可,如下:

typescript 复制代码
import * as React from "React";

interface IProps {
  logo?: string;
  className?: string;
  alt?: string;
}

export const Logo = (props: IProps) => {
  const { logo, className, alt } = props;

  return <img src={logo} className={className} alt={alt} />;
};

但是我们都知道 props 里面存在 children 属性,我们不可能每个 porps 接口里面定义多一个 children,如下:

csharp 复制代码
interface IProps {
  logo?: string;
  className?: string;
  alt?: string;
  children?: ReactNode;
}

更加规范的写法是使用 React 里面定义好的 FC 属性,里面已经定义好 children 类型,如下:

javascript 复制代码
export const Logo: React.FC<IProps> = (props) => {
  const { logo, className, alt } = props;

  return <img src={logo} className={className} alt={alt} />;
};
  • React.FC 显式地定义了返回类型,其他方式是隐式推导的
  • React.FC 对静态属性:displayName、propTypes、defaultProps 提供了类型检查和自动补全
  • React.FC 为 children 提供了隐式的类型(ReactElement | null)

有状态组件

可以是一个类组件且存在 propsstate 属性

如果使用 TypeScript 声明则如下所示:

typescript 复制代码
import * as React from "React";

interface IProps {
  color: string;
  size?: string;
}
interface IState {
  count: number;
}
class App extends React.Component<IProps, IState> {
  public state = {
    count: 1,
  };
  public render() {
    return <div>Hello world</div>;
  }
}

上述通过泛型对 propsstate 进行类型定义,然后在使用的时候就可以在编译器中获取更好的智能提示

关于 Component 泛型类的定义,可以参考下 React 的类型定义文件 node_modules/@types/React/index.d.ts,如下所示:

css 复制代码
class Component<P, S> {
  readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;

  state: Readonly<S>;
}

从上述可以看到,state 属性也定义了可读类型,目的是为了防止直接调用 this.state 更新状态

受控组件

受控组件的特性在于元素的内容通过组件的状态 state 进行控制

由于组件内部的事件是合成事件,不等同于原生事件,

例如一个 input 组件修改内部的状态,常见的定义的时候如下所示:

typescript 复制代码
private updateValue(e: React.ChangeEvent<HTMLInputElement>) {
    this.setState({ itemText: e.target.value })
}

常用 Event 事件对象类型:

  • ClipboardEvent<T = Element> 剪贴板事件对象
  • DragEvent<T = Element> 拖拽事件对象
  • ChangeEvent<T = Element> Change 事件对象
  • KeyboardEvent<T = Element> 键盘事件对象
  • MouseEvent<T = Element> 鼠标事件对象
  • TouchEvent<T = Element> 触摸事件对象
  • WheelEvent<T = Element> 滚轮事件对象
  • AnimationEvent<T = Element> 动画事件对象
  • TransitionEvent<T = Element> 过渡事件对象

T 接收一个 DOM 元素类型

三、总结

上述只是简单的在 React 项目使用 TypeScript,但在编写 React 项目的时候,还存在 hooks、默认参数、以及 store 等等......

TypeScript 在框架中使用的学习成本相对会更高,需要不断编写才能熟练

系列文章

TypeScript深度剖析:TypeScript 中类的理解?应用场景?

TypeScript深度剖析:Vue项目中应用TypeScript?

TypeScript 深度剖析:TypeScript 的理解?与 JavaScript 的区别?

TypeScript深度剖析:React 项目中应用 TypeScript?

TypeScript深度剖析:TypeScript 中命名空间与模块的理解?区别?

TypeScript深度剖析:TypeScript 中接口的理解?应用场景?

TypeScript深度剖析:TypeScript 中高级类型的理解?有哪些?

TypeScript深度剖析:TypeScript 中泛型的理解?应用场景?

TypeScript深度剖析: TypeScript 中函数的理解?与 JavaScript 函数的区别?

TypeScript深度剖析: TypeScript 中枚举类型的理解?应用场景?

TypeScript深度剖析:装饰器的理解?应用场景?

TypeScript深度剖析: typescript 的数据类型有哪些?

相关推荐
栈老师不回家5 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙11 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠15 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
马剑威(威哥爱编程)33 分钟前
MongoDB面试专题33道解析
数据库·mongodb·面试
小远yyds35 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
独行soc3 小时前
#渗透测试#SRC漏洞挖掘#深入挖掘XSS漏洞02之测试流程
web安全·面试·渗透测试·xss·漏洞挖掘·1024程序员节