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

遇到这种情况，需要我们在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”。

有状态组件

对于有状态组件，主要注意三点：

1. props和state都要做类型限制
2. state用readonly限制“this.state=**”的操作
3. 对event对象做类型限制 

import React,{MouseEvent} from "react";  
interface TeachersProps{  
  user:User  
}  
interface TeachersState{  
  pageNo:number,  
  pageSize:number,  
  total:number,  
  teacherList:{  
    id: number,  
    name: string,  
    age: number,  
    sex: number,  
    tel: string,  
    email: string  
  }[]  
}  
export default class Teachers extends React.PureComponent<TeachersProps,TeachersState> {  
    readonly state = {  
        pageNo:1,  
        pageSize:20,  
        total:0,  
        userList:[]  
    }  
    handleClick=(e:MouseEvent<HTMLDivElement>)=>{  
        console.log(e.target);  
    }  
    //...省略部分代码  
    render(){  
        return <div onClick={this.handleClick}>点击我</div>  
    }  
}  

（编辑：ASP站长网）