React项目从Javascript到Typescript的迁移经验总结

遇到这种情况，需要我们在tsconfig.json中lib这个配置项加入一个dom库，如下：

{  
    "compilerOptions":{  
        "lib":[  
            "dom",  
            ...,  
            "esNext"  
        ]  
    }  
}  

文件中的标红问题

关于这个问题，我们需要分两种情况来考虑，第一种是.ts的文件，第二种是.tsx文件。下面来看一下具体是哪些注意的点（Ps：以下提到的注意的点并不能完全解决文件中标红的问题，但是可以解决大部分标红的问题）：

第一种：.ts文件

这种文件在你的项目比较少，比较容易处理，根据实际情况去加一下类型限制，没有特别需要讲的。

第二种：.tsx文件

这种情况都是react组件了，而react组件又分为无状态组件和有状态组件组件，所以我们分开来看。

无状态组件

对于无状态组件，首先得限制他是一个FunctionComponent（函数组件），其次限制其props类型。举个🌰：

import React, { FunctionComponent, ReactElement } from 'react';  
import {LoadingComponentProps} from 'react-loadable';  
import './style.scss';  
interface LoadingProps extends LoadingComponentProps{  
  loading:boolean,  
  children?:ReactElement  
}  
const Loading:FunctionComponent<LoadingProps> = ({loading=true,children})=>{  
  return (  
    loading?<div className="comp-loading">  
      <div className="item-1"></div>  
      <div className="item-2"></div>  
      <div className="item-3"></div>  
      <div className="item-4"></div>  
      <div className="item-5"></div>  
    </div>:children  
  )    
}  
export default Loading;  

其中你要是觉得FunctionComponent这个名字比较长，你可以选择用类型别名“SFC”或者“FC”。

有状态组件

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!