在react项目中使用typescript

1.安装typescript，可以全局或者在项目下安装，这里在当前项目下安装：

yarn add typescript --save

2.安装常用模块的类型定义文件@types，如：react、react-dom

yarn add @types/react @types/react-dom --save

需要安装类型定义文件的模块，如果没有安装，项目编译时会有错误提示，里面含有 @types/xxx，可以按照提示安装

3.修改.js文件后缀为 .tsx

tsconfig.json文件里面定义了typescript管理的文件范围，编译器默认包含当前目录和子目录下所有的TypeScript文件（.ts, .d.ts 和 .tsx）

"compilerOptions": {
  // 是否编译js文件，设置为true时typescript会去查找后缀为.js的文件，如果只想编译.ts、.d.ts 和.tsx文件，则设置为false
   "allowJs": false,
}
include": [
   "src"
 ]

表示 src 目录下的.ts、.d.ts 和.tsx文件（如果tsconfig.json中allowJs设置为true那么还包含.js和.jsx文件）由typescript管理

4.声明变量的类型

注：这里使用type做示例，interface与type相同作用基本，可自己详细了解

①class组件

import {withRouter, RouteComponentProps} from 'react-router-dom';

type PathParamsType = {
  // type whatever you expect in the this.props.match.params.*
}
type PropsType = RouteComponentProps<PathParamsType> & {
  // your props here
  name: string, // 必传的参数，string类型
  sex: boolean,// 必传的参数，number类型
  age?: number, // 可选参数，传的话必须是number类型
  [propName: string]: any // 兼容以上声明属性之外的属性，任意类型any，没有的话这个组件不支持传入name、sex、age以外的参数
}

class MyComponent extends React.Component<PropsType> {
   render() {
     return (<span>测试</span>)
   }
}
export default withRouter(MyComponent);

②function组件

import {RouteComponentProps} from 'react-router-dom';

type PathParamsType = {
    // type whatever you expect in the this.props.match.params.*
}
type PropsType = RouteComponentProps<PathParamsType> & {
  name: string, // 必传的参数，string类型
}
function Auth(props: PropsType) {
    return (
        <div>
            <h2>你的权限不够，请使用admin登录</h2>
       </div>
    );
}

export default Auth;

③.函数

/**
 * 判断参数是哪种类型
 * @param {any} obj
 * @param {string} type
 */
function checkType(obj: object, type?: string) {
  return Object.prototype.toString.call(obj).toLowerCase() === `[object ${type}]`
}