React项目中应用TypeScript
说说如何在React项目中应用TypeScript?
一、前言:
使用 TypeScript
编写 React
代码,除了需要 TypeScript
这个库之外,还需要安装 @types/react
、@types/react-dom
npm i @types/react -s || yarn add @types/react -s
npm i @types/react-dom -s || yarn add @types/react-dom -s
至于上述使用 @types
的库的原因在于,目前非常多的 JavaScript
库并没有提供自己关于 TypeScript
的声明文件
所以,ts
并不知道这些库的类型以及对应导出的内容,这里 @types
实际就是社区中的 DefinitelyTyped
库,定义了目前市面上绝大多数的 JavaScript
库的声明
所以下载相关的 JavaScript
对应的 @types
声明时,就能够使用使用该库对应的类型定义
二、使用方式
在编写 React
项目的时候,最常见的使用的组件就是:
- 无状态组件
- 有状态组件
- 受控组件
无状态组件:
主要作用是用于展示 UI
,如果使用 js
声明,则如下所示:
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
即可,如下:
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
,如下:
interface IProps {logo?: string;className?: string;alt?: string;children?: ReactNode;
}
更加规范的写法是使用 React
里面定义好的 FC
属性,里面已经定义好 children
类型,如下:
export const Logo: React.FC<IProps> = (props) => {const { logo, className, alt } = props;return <img src={logo} className={className} alt={alt} />;
};
有状态组件:
可以是一个类组件且存在 props
和 state
属性
如果使用 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>;}
}
上述通过泛型对 props
、state
进行类型定义,然后在使用的时候就可以在编译器中获取更好的智能提示
关于 Component
泛型类的定义,可以参考下 React 的类型定义文件 node_modules/@types/React/index.d.ts
,如下所示:
class Component<P, S> {readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;state: Readonly<S>;
}
从上述可以看到,state
属性也定义了可读类型,目的是为了防止直接调用 this.state
更新状态
受控组件:
受控组件的特性在于元素的内容通过组件的状态 state
进行控制
由于组件内部的事件是合成事件,不等同于原生事件,
例如一个 input
组件修改内部的状态,常见的定义的时候如下所示:
private updateValue(e: React.ChangeEvent<HTMLInputElement>) {this.setState({ itemText: e.target.value })
}
三、总结
上述只是简单的在 React
项目使用 TypeScript
,但在编写 React
项目的时候,还存在 hooks
、默认参数、以及 store
等等…
基于hexo搭建的一个博客:https://nanxiangscholar.github.io/
简单的在 React
项目使用 TypeScript
,但在编写 React
项目的时候,还存在 hooks
、默认参数、以及 store
等等…
基于hexo搭建的一个博客:https://nanxiangscholar.github.io/
欢迎访问!
React项目中应用TypeScript相关推荐
- 了解CSS in JS(JSS)以及在React项目中配置并使用JSS
目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...
- React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
- react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...
- [react] 在React项目中你用过哪些动画的包?
[react] 在React项目中你用过哪些动画的包? react-transition-group 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
- react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线 在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...
- react前端显示图片_如何在react项目中引用图片?
如何在react项目中引用图片?本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法,希望对需要的小伙伴提供一些参考. 在react项目中插入图片以及背景图片的方法共有2种: 1.im ...
最新文章
- 《JavaScript高级程序设计(第3版)》教程大纲
- 刘忠范院士:新型研发机构建设成了口号
- js如何使浏览器允许脚本异步加载
- 吴恩达机器学习Ex1
- 从技术角度谈游戏国际化的一些建议:版本管理和文本翻译
- 思考问题的“六顶帽子”
- ruby与python_Ruby对比Python的优势和劣势
- 经验总结 | PyCharm 详细使用指南!
- 学者:比特币暴涨有合理性但仍应警惕其风险
- ejb 2.1 jboss_带有Eclipse IDE,EJB Project和JBoss 6.0 AS的JMS 1.1生产者和使用者示例
- TouchSlide - 大话主席
- PHP字体向右移动,CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享...
- JQuery源码分析 --- 运动animate 基本原理
- oracle中decode函数,行转列
- ssh框架 mysql 配置文件_SSH框架与配置文件的简单搭建
- windows系统部署docker文档
- Springboot配置suffix指定mvc视图的后缀
- ida “ failed to load pdb info. 不支持此接口” “DIA: No such interface supported”问题
- 【绘画素材】日系插画“人物表情”素材参考!告别脸部僵硬~
- 计算机网络中的搜索引擎是指根据一定的策略,搜索引擎的常用使用技巧
热门文章
- 统计书中单词出现次数, 然后把数据生成pdf
- 如何让程序暂停指定的时间?
- android计时器暂停问题
- 微信小程序设置全局请求URL 封装wx.request请求
- 基于Python绘制雷达图(非常好的学习例子)
- [Excel 与 股票] Excel 生成日线图
- 图像压缩的王者:Image Optimizer V5.1 汉化修正绿色版
- 【单目3D目标检测】SMOKE论文解析与代码复现
- SURF特征点检测--SurfFeatureDetector、SurfDescriptorExtractor和FlannBasedMatcher
- 深耕5G,芯讯通持续推动5G应用百花齐放