创建项目

首先使用create-react-app脚手架，并指定参数typescript，创建一个基于TypeScript项目

$ npx create-react-app myproject --typescript

注：使用npx可以避免程序安装，npx会将脚手架下载至一个临时目录，使用完毕会进行删除，这样可以保证每次使用的脚手架都是最新的

创建页面

在 src文件夹下创建一个pages目录，在pages下创建两个页面pageA和pageB

import React from 'react'


class PageA extends React.Component{
    render(){
        return(
            
PageA
        )
    }
}


export default PageA

import React from 'react'


class PageB extends React.Component{
    render(){
        return(
            
PageB
        )
    }
}


export default PageB

使用路由

先安装react-router-dom @types/react-router-dom

npm install  react-router-dom @types/react-router-dom

在src下的App.tsx中从react-router-dom中引入BrowserRouter和Route，并引入页面，再配置对应路由与对应页面组件

import React from 'react'
import {BrowserRouter,Route} from 'react-router-dom'
import PageA from './pages/pageA'
import PageB from './pages/pageB'
const Root=()=>{
    
    return <BrowserRouter>
        <Route path='/' component={PageA} exact></Route>
        <Route path='/pageA' component={PageA} ></Route>
        <Route path='/pageB' component={PageB} ></Route>
    </BrowserRouter>
}


export default Root

在页面从react-router-dom中引入Link就可以实现路由跳转

import React from 'react'
import {Link} from 'react-router-dom'
class PageA extends React.Component{
    render(){
        return(
            <div>
                <div>PageA</div>
                <Link to='/pageB' >跳转pageB</Link>
            </div>
        )
    }
}


export default PageA

import React from 'react'
import {Link} from 'react-router-dom'


class PageB extends React.Component{
    render(){
        return(
            <div>
                <div>pageB</div>
                <Link to='/pageA' >跳转pageA</Link>
            </div>
        )
    }
}


export default PageB

此时运行npm start启动项目，就可以访问对应路由的页面并实现页面间的跳转

接口定义

在src下新建一个interface文件夹，用于管理所有接口定义，在interface文件夹中创建对应接口文件，在这里定一个后端接口请求的入参和返回数据出参数据类型，后续相关数据会根据这个定义来进行约束

export interface userInfoRequest{ //请求入参
    name:string | undefined,
    id:number | undefined
}
interface userInfo{ 
    id:number,
    key:number,
    name:string,
    sexy:string,
    adderss:string,
    level:string
}
export type userInfoResponse=userInfo[] | undefined  //请求返回

搭建mock环境

在src同级目录下新建文件夹mock，在mock文件夹中新建目录user，在user目录下新建json文件，将mock数据写入

安装http-server,在package.json中配置运行脚本mock

在终端运行npm run mock就能运行mock服务

请求数据

安装axios，并在src下创建一个constan，用于存放常量，在constant目录下新建urls.ts文件，将接口路径配置进去

//urls.ts
export const GET_USERINFO_URL='/api/user/getUserInfo'

在页面中使用axios请求接口，此时会出现接口404，因为此时我们访问的本地端口是3000，而mock服务是http://localhost:4001，所以需要将接口请求代理到http://localhost:4001，使用npm安装http-proxy-middleware，在src下新建setupProxy.js,将接口请求代理到http://localhost:4001

//setupProxy.js
const proxy= require('http-proxy-middleware').createProxyMiddleware;


module.exports=function(app){
    app.use(proxy('/api/**',{
        target:'http://localhost:4001',
        pathRewrite(path){
            return path.replace('/api','/')+'.json'
        }
    }))
}

重新启动项目，接口请求正常

页面数据展示

安装antd UI库,使用antd库中的Table组件展示接口请求返回的mock数据

而此刻编译器报错，因为组件的state中没有定义userList这个字段，于是使用ts中的接口对state进行定义

import React from 'react'
import {Link} from 'react-router-dom'
import {Table} from 'antd'
import axios from 'axios'
import {GET_USERINFO_URL} from '../../constant/urls'
import {userColumns} from './columns'
import {userInfoResponse} from '../../interface/user'
interface State{ //定义一个State接口
    userList:userInfoResponse
}
class PageA extends React.Component<State>{
    state:State={ //使用State接口约束state
        userList:[]
    }
    componentWillMount(){


        axios.get(GET_USERINFO_URL).then((res)=>{
            this.setState({
                userList:res.data.data
            })
        })
    }
    render(){
        return(
            <div>
                <div>PageA</div>
                
                <Link to='/pageB' >跳转pageB</Link>
                <Table columns={userColumns} dataSource={this.state.userList} className='table'></Table>


            </div>
        )
    }
}


export default PageA

于是页面就能正常显示数据了~