React项目中应用TypeScript的实现

目次

• 1、媒介
  
• 2、操纵方法
  
  
  
  • 无形态组件
    
  • 有形态组件
    
  • 受控组件
    
  
  
• 3、总结
  

1、媒介


零丁的操纵typescript 其实不会招致进修本钱很下，可是尽年夜部分前端开辟者的项目皆是依靠于框架的
例如战vue、react 那些框架分离操纵的工夫，会有必然的门坎
操纵 TypeScript 编写 react 代码，除须要 typescript 那个库以外，借须要装置@types/react、@types/react-dom

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

复造代码

至于上述操纵@types的库的缘故原由正在于，今朝十分多的javascript库并出有供给自己闭于 TypeScript 的声明文件
以是，ts其实不明白那些库的规范和对应导出的内乱容，那里@types实践便是社区中的DefinitelyTyped库，界说了今朝市情上尽年夜大都的JavaScript库的声明
以是下载相关的javascript对应的@types声明时，就可以够操纵操纵该库对应的规范界说

2、操纵方法


正在编写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.         <img src={logo} className={className} alt={alt} />
   
8.     )
   
9. }

复造代码

但这时候间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. 
   
9. export const Logo = (props: IProps) => {
   
10.     const { logo, className, alt } = props
    
11. 
    
12.     return (
    
13.         <img src={logo} className={className} alt={alt} />
    
14.     )
    
15. }

复造代码

可是我们皆明白props里面存正在children属性，我们不成能每一个porps接心里面界说多一个children，以下：

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

复造代码

愈加标准的写法是操纵React里面界说好的FC属性，里面曾经界说好children规范，以下：

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

复造代码

     

• React.FC隐式天界说了返回规范，其他方法是隐式推导的     
  
• React.FC对静态属性：displayName、propTypes、defaultProps供给了规范查抄战自动补齐     
  
• React.FC为children供给了隐式的规范（ReactElement | null）
  

有形态组件


能够是一个类组件且存正在props战state属性
假设操纵typescript声明则以下所示：

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

复造代码

上述经由过程泛型对props、state停止规范界说，然后正在操纵的工夫就能够正在编译器中获得更好的智能提醒
闭于Component泛型类的界说，能够参考下 React 的规范界说文件 node_modules/@types/react/index.d.ts，以下所示：

1. class Component<P, S> {
   
2. 
   
3.     readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;
   
4. 
   
5.     state: Readonly<S>;
   
6. 
   
7. }

复造代码

从上述能够看到，state属性也界说了可读规范，目标是为了避免间接挪用this.state更新形态

受控组件


受控组件的特征正在于元素的内乱容经由过程组件的形态state停止掌握
因为组件内乱部的变乱是分解变乱，没有同等于本惹事件，
例如一个input组件修正内乱部的形态，常睹的界说的工夫以下所示：

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

复造代码

经常使用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 元素规范

3、总结


上述只是简朴的正在react项目操纵typescript，但正在编写react项目标工夫，借存正在hooks、默许参数、和store等等......
typescript正在框架中操纵的进修本钱相对会更下，须要不竭编写才气纯熟
到此那篇闭于React项目中使用TypeScript的完成的文章便引见到那了,更多相关React项目使用TypeScript 内乱容请搜索剧本之家从前的文章或持续浏览上面的相关文章期望各人当前多多撑持剧本之家！
                                                         
       以上所述是云社区专客手艺小编经心给各人收拾整顿的本常识相干引见；期望对亲们进修事情提拔有所协助。                                     若有任何疑问、相干分享交换等，可正在本文章底部留行或批评； 欢送IT手艺妙手亦或菜鸟们各持己见、万马齐喑，让云社区成为IT手艺更好的交换进修仄台；   正在此更万分感激各人对云社区专客网站的撑持！                                                                                                                                                                                                                                                                                            
滥觞：云社区转戴；            免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！