文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

面试官:说说如何在React项目中应用TypeScript

2024-12-02 21:52

关注

一、前言

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

例如和vue、react 这些框架结合使用的时候,会有一定的门槛

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

  1. npm i @types/react -s 
  2.  
  3. npm i @types/react-dom -s 

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

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

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

二、使用方式

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

无状态组件

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

  1. import * as React from 'react' 
  2.  
  3. export const Logo = props => { 
  4.     const { logo, className, alt } = props 
  5.  
  6.     return ( 
  7.          
  8.     ) 

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

  1. import * as React from 'react' 
  2.  
  3. interface IProps { 
  4.     logo?: string 
  5.     className?: string 
  6.     alt?: string 
  7.  
  8. export const Logo = (props: IProps) => { 
  9.     const { logo, className, alt } = props 
  10.  
  11.     return ( 
  12.          
  13.     ) 

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

  1. interface IProps { 
  2.     logo?: string 
  3.     className?: string 
  4.     alt?: string 
  5.     children?: ReactNode 

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

  1. export const Logo: React.FC = props => { 
  2.     const { logo, className, alt } = props 
  3.  
  4.     return ( 
  5.          
  6.     ) 

有状态组件

可以是一个类组件且存在props和state属性

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

  1. import * as React from 'react' 
  2.  
  3. interface IProps { 
  4.   color: string, 
  5.   size?: string, 
  6. interface IState { 
  7.   count: number, 
  8. class App extends React.Component { 
  9.   public state = { 
  10.     count: 1, 
  11.   } 
  12.   public render () { 
  13.     return ( 
  14.       
    Hello world
     
  15.     ) 
  16.   } 

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

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

  1. class Component { 
  2.  
  3.     readonly props: Readonly<{ children?: ReactNode }> & Readonly

  4.  
  5.     state: Readonly

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

受控组件

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

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

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

  1. private updateValue(e: React.ChangeEvent) { 
  2.     this.setState({ itemText: e.target.value }) 

常用Event 事件对象类型:

  • ClipboardEvent 剪贴板事件对象
  • DragEvent 拖拽事件对象
  • ChangeEvent Change 事件对象
  • KeyboardEvent 键盘事件对象
  • MouseEvent 鼠标事件对象
  • TouchEvent 触摸事件对象
  • WheelEvent 滚轮事件对象
  • AnimationEvent 动画事件对象
  • TransitionEvent 过渡事件对象
  • T接收一个DOM 元素类型

三、总结

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

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

参考文献

https://juejin.cn/post/6952696734078369828

https://juejin.cn/post/6844903684422254606

 

来源:JS每日一题内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯