使用Vite创建React + TypeScript（pro和mobile，含完整的空项目结构资源可供下载）

PC端

安装指令：
npm create vite@latest react-ts-pro -- --template react-ts



Vite是一个框架无关的前端工具链，可以快速的生成一个React + TS的开发环境，并且可以提供快速的开发体验

说明：
1. npm create vite@latest固定写法（使用最新版本vite初始化项目）
2. react-ts-pro  项目名称（自定义）
3. -- --template react-ts   指定项目模板为react+ts

移动端（mobile）

1. 安装：
npm create vite@latest react-jike-mobile -- --template react-ts

2. 安装Ant Design Mobile
npm i --save antd-mobile

初始化路由（react-router-dom, 使用与我另一篇文章一模一样直接参考即可，ReactRouter使用详解（react-router-dom））

1. 安装
npm i react-router-dom

配置路径别名@（使用CRA可参考：cra(create-react-app)配置别名路径@ 以及Vscode联想路径配置）

1. 安装插件：
npm i @types/node -D


2. 修改vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// 配置别名路径，安装插件后才有path
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
    
  // 配置别名路径
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})


3. 修改tsconfig.json

{
  "compilerOptions": {
    // vscode联想配置
    "baseUrl": "./",
    "paths": {
      "@/*": [
          "src/*"
      ]
    }
  }
}

安装插件axios

npm i axios

http.ts封装代码如下：

// 封装axios

import axios from 'axios';

const httpInstance = axios.create({
    baseURL: 'http://geek.itheima.net',
    timeout: 5000
});


// 拦截器
httpInstance.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error)
    }
)


httpInstance.interceptors.response.use(
    response => {
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

export default httpInstance;

封装API模块-axios和ts的配合使用

场景：axios提供了request泛型方法，方便我们传入类型参数推导出接口返回值的类型
说明：泛型参数Type的类型决定了res.data的类型


具体演示代码如下：

import { http } from '@/utils';

// 假设后端返回的类型结构是这个
// {
//     data: {
//         channels: [
//             {
//                 id: 1,
//                 name: ''
//             }
//         ]
//     },
//     nessage: ""
// }

/**
 * channel列表查询
 */

// 1. 定义通用泛型(根据后端接口返回的数据来定义)
// data不是写死的，因此用通用的T（T代表泛型）
export type ResType<T> = {
    message: string
    data: T
}



// 2. 子项，定义具体特有的接口类型
type ChannelItem = {
    id: number
    name: string
}

// 整体类型：ChannelRes是data特有的类型
type ChannelRes = {
    channels: ChannelItem[]
}

// 请求频道列表
export function fetchChannelAPI() {
    http.request<ResType<ChannelRes>>({
        url: '/channels'
    })
}

/**
 * 文章列表查询
 */

type ListItem = {
    is_top: string,
    cover: {
        type: number
        image: string[]
    }
}

type ListRes = {
    results: ListItem[]
    pre_timestamp: string
}

// 传参类型
type ReqParams = {
    channel_id: string
    timestamp: string
}

export function fetchListAPI(params: ReqParams) {
    return http.request<ResType<ListRes>>({
        url: '/articles',
        params
    })
}





组件内使用代码如下：

方案一：
fetchChannelAPI().then(res => {
  console.log(res.data)
})

方案二（建议写法）：
useEffect(() => {
    const getLists = async () => {
        try {
            const res = await fetchListAPI();
            setLists(res.data);
        } catch (error) {
            throw new Error('fetch channel error')
        }
    }

    getLists();
}, [])

ts基础数据渲染写法

import { useEffect, useState } from 'react';
import { fetchChannelAPI, ChannelItem } from '@/apis/user';

type ChannelItem = {
    id: number
    name: string
}

function Home() {
  const [channels, setChannels] = useState<ChannelItem[]>([]);

  useEffect(() => {
    // const getChannels = async() => {
    //   try {
    //     const res = await fetchChannelAPI();
    //     setChannels(res.data);
    //   } catch (error) {
    //     throw new Error('fetch channel error')
    //   }
    // }

    // getChannels();
  }, [])

  return (
    <div>
      Home
    </div>
  )
}

export default Home;

ts基础数据渲染写法（自定义hook优化）

1. index.tsx代码如下：

import { useTabs } from './useTabs';

function Home() {
  const {channels} = useTabs();

  return (
    <div>
      Home
      <ul>
        {channels.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}

export default Home;


// 抽离出业务部分封装成useTab
2. useTabs.tsx代码如下：

import { useEffect, useState } from 'react';
import { fetchChannelAPI, ChannelItem } from '@/apis/user';

function useTabs() {
    const [channels, setChannels] = useState<ChannelItem[]>([]);

    useEffect(() => {
        const getChannels = async () => {
            try {
                const res = await fetchChannelAPI();
                setChannels(res.data);
            } catch (error) {
                throw new Error('fetch channel error')
            }
        }

        getChannels();
    }, [])

    return {
        channels
    }
}

export { useTabs };

详情模块 - 路由跳转

1. Home组件代码如下：

// import { useTabs } from './useTabs';

import { useNavigate } from "react-router-dom";

function Home() {
  // const {channels} = useTabs();

  const navigate = useNavigate();
  const goDetail = () => {
    navigate('/detail?id=159')
  }

  return (
    <div>
      Home
      {/* <ul>
        {channels.map(item => <li key={item.id}>{item.name}</li>)}
      </ul> */}
      <hr />
      <button onClick={goDetail}>Detail</button>
    </div>
  )
}

export default Home;



2. Detail组件代码如下：

import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";

function Detail() {
  const [params] = useSearchParams();

  useEffect(() => {
    const id = params.get('id');
    console.log(id);
  }, [])
  return (
    <div>
      Detail
    </div>
  )
}

export default Detail;