Vue3+ts；枚举(enum)；Partial全部可选/Pick选一部分/配置 svg 图标/unplugin-vue-components组件自动按需加载

项目的创建

使用 create-vue 脚手架创建项目。

1.执行创建命令

pnpm create vue
# or
npm init vue@latest
# or
yarn create vue

2.选择项目依赖内容。

✔ Project name: … //项目名
✔ Add TypeScript? … No / `Yes`
✔ Add JSX Support? … `No` / Yes
✔ Add Vue Router for Single Page Application development? … No / `Yes`
✔ Add Pinia for state management? … No / `Yes`
✔ Add Vitest for Unit Testing? … `No` / Yes
✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes
✔ Add ESLint for code quality? … No / `Yes`
✔ Add Prettier for code formatting? … No / `Yes`

Scaffolding project in /Users/zhousg/Desktop/patient-h5-100...

Done. Now run:

  cd //项目名
  pnpm install
  pnpm lint
  pnpm dev

项目目录结构调整

./src
├── assets        # 静态资源，图片...
├── components    # 通用组件
├── composable    # 组合功能通用函数 - 新增的
├── icons         # svg 图标
├── router        # 路由
│   └── index.ts
├── services      # 接口服务 API - 新增的
├── stores        # 状态仓库
├── styles        # 样式 				- 新增的
│   └── main.scss
├── types         # TS 类型			- 新增的
├── utils         # 工具函数			- 新增的
├── views         # 页面				- 新增的
├── App.vue        # 根组件
└── main.ts       # 入口文件

默认生成的路由相关代码解析

import {
    createRouter,
    createWebHistory
} from 'vue-router'

// createRouter 创建路由实例
// createWebHistory() 是开启history模块
// createWebHashHistory() 是开启hash模式

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path
// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts 添加配置 base: my-path，路由这就会加上 my-path 前缀了

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: []
})

export default router

用户状态仓库

准备用户信息的类型，types/user.d.ts。

/* 用户信息 */
export type User = {
  /* token令牌 */
  token: string
  /* 用户ID */
  id: string
  /* 用户名称 */
  account: string
  /* 手机号 */
  mobile: string
  /* 头像 */
  avatar: string
}

2.设置和删除用户信息，stores/user.ts。

import type { User } from '@/types/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('cp-user', () => {
    // 用户信息
    const user = ref < User > ()
    // 设置用户，登录后使用
    const setUser = (u: User) => {
        user.value = u
    }
    // 清空用户，退出后使用
    const delUser = () => {
        user.value = undefined
    }
    return {
        user,
        setUser,
        delUser
    }
})

数据的持久化

使用 pinia-plugin-persistedstate 实现 Pinia 仓库状态持久化，且完成测试。

安装。

pnpm i pinia-plugin-persistedstate
# or
npm i pinia-plugin-persistedstate
# or
yarn add pinia-plugin-persistedstate

2.使用 main.ts。

++ import persist from 'pinia-plugin-persistedstate'
const app = createApp(App)
// 注意使用的方式
++ app.use(createPinia().use(persist))

3.配置 stores/user.ts。

import type { User } from '@/types/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'

export default defineStore(
    'cp-user',
    () => {
        // 用户信息
        const user = ref<User>()
        // 设置用户，登录后使用
        const setUser = (u: User) => {
            user.value = u
        }
        // 清空用户，退出后使用
        const delUser = () => {
            user.value = undefined
        }
        return { user, setUser, delUser }
    },
++    {
++        persist: true
++    }
)

4.测试 App.vue。

<script setup lang="ts">
    // #1
    import useUserStore from './stores/user'
    // #2
    const store = useUserStore()
</script>

<template>
    <!-- #3 -->
    <p>{{ store.user }}</p>
    <!-- 如果这校验失败，可以修改 .eslintrc.cjs 中的 printWidth -->
    <button @click="store.setUser({ id: '1', mobile: '1', account: '1', avatar: '1', token: '1' })">
        登录
    </button>
    <button @click="store.delUser()">退出</button>
</template>

抽取 Pinia 代码(纯代码优化)

抽取 Pinia 实例代码

stores/index

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

import { useUserStore } from './user'

export const useStore = () => {
  return {
    userStore: useUserStore()
  }
}
// 创建 Pinia 实例
const pinia = createPinia()
// 使用 Pinia 插件
pinia.use(persist)
// 导出 Pinia 实例，给 main 使用
export default pinia

main.ts

import App from './App.vue'
import router from './router'
import pinia from './stores'

const app = createApp(App)

app.use(pinia)
app.use(router)
app.mount('#app')

stores 统一导出

统一导出，代码简洁，入口唯一， store/index 。

// 写法 1
// import { useUserStore } from './user'
// export { useUserStore }

// 写法 2
// export { useUserStore } from './user'

// 写法 3
export * from './user'

App.vue

import { useUserStore } from './stores'

vant 组件库使用

[vant]https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#dao-ru-suo-you-zu-jian-bu-tui-jian。

1.安装vant

# Vue3 项目，安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant

2.引入样式，main.ts。

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
import router from './router'
// 样式全局使用
import 'vant/lib/index.css'
import './styles/main.scss'

const app = createApp(App)

app.use(pinia)
app.use(router)
app.mount('#app')

3.组件按需使用，App.vue。

<script setup lang="ts">
    import {
        Button as VanButton
    } from 'vant'
</script>

<template>
    <van-button type="primary">按钮</van-button>
</template>

实现 Vant 组件的自动按需加载

1.安装

pnpm add unplugin-vue-components -D

2.配置，vite.config.ts。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// #1
++ import Components from 'unplugin-vue-components/vite'
// #2
++ import { VantResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // #3 自动导入的插件
++        Components({
++            // #5 默认 true，开启自动生成组件的类型定义文件，而 vant 已经自带类型了，无需生成
++            dts: false,
++            // #4 main.ts 已经引入了所有的 vant 样式，不需要自动导入样式，只需要自动导入组件即可
++            resolvers: [VantResolver({ importStyle: false })]
++        })
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

3.组件中直接使用即可。

移动端的适配(使用 vw 完成移动端适配)

安装(https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage#viewport-bu-ju)

npm install postcss-px-to-viewport -D
# or
yarn add -D postcss-px-to-viewport
# or
pnpm add -D postcss-px-to-viewport

2.配置 postcss.config.js (没有就自己创建)

// eslint-disable-next-line no-undef
module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            // 以设备宽度 375 为基准计算 vw 的值
            // 假如 100px 的 div
            // 375 宽度下，最终转换出的 vw 应该是：x / 100vw = 100px / 375px，x 等于 26.66vw
            // 而转换出来的 26.66vw 自然在不同的设备宽度下所表示的 div 宽度会不一样，例如 414 设备下
            // 26.66vw / 100vw = div 宽度 / 414px
            viewportWidth: 375,
        },
    },
};

3.重启项目

在这里插入图片描述

请求实例封装

1.基本模板准备，utils/request.ts

import axios from 'axios'

const instance = axios.create({
    // TODO 1. 基础地址，超时时间
})

instance.interceptors.request.use(
    (config) => {
        // TODO 2. 携带 token
        return config
    },
    (err) => Promise.reject(err)
)

instance.interceptors.response.use(
    (res) => {
        // TODO 3. 处理业务失败
        // TODO 4. 摘取核心响应数据
        return res
    },
    (err) => {
        // TODO 5. 处理 401 错误
        return Promise.reject(err)
    }
)

export default instance

2.基本封装。

import { useUserStore } from '@/stores'
import router from '@/router'
import axios from 'axios'
import { showToast } from 'vant'

// 1. 新 axios 实例，基础配置
const baseURL = 'https://XXXX/'   //基地址
const instance = axios.create({
    baseURL,
    timeout: 10000
})

// 2. 请求拦截器，携带 token
instance.interceptors.request.use(
    (config) => {
        const store = useUserStore()
        if (store.user?.token && config.headers) {
            config.headers['Authorization'] = `Bearer ${store.user?.token}`
        }
        return config
    },
    (err) => Promise.reject(err)
)

// 3. 响应拦截器，剥离无效数据，401 拦截
instance.interceptors.response.use(
    (res) => {
        // 后台约定，响应成功，但是 code 不是 10000，是业务逻辑失败
        if (res.data?.code !== 10000) {
            showToast(res.data?.message || '网络异常')
            return Promise.reject(res.data)
        }
        // 业务逻辑成功，返回响应数据，作为 axios 成功的结果
        return res.data
    },
    (err) => {
        if (err.response.status === 401) {
            // 删除用户信息
            const store = useUserStore()
            store.delUser()
            // 跳转登录，带上接口失效所在页面的地址，登录完成后回跳使用
            router.push(`/login?returnUrl=${router.currentRoute.value.fullPath}`)
        }
        return Promise.reject(err)
    }
)

export { baseURL, instance }

请求函数封装

导出一个通用的请求工具函数，支持设置响应数据类型。(utils/request.ts接着写)

import axios, { type Method } from 'axios'
// 4. 请求工具函数
const request = (url: string, method: Method = 'get', submitData?: object) => {
    return instance.request({
        url,
        method,
        [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
    })
}

instance.request 的第二个泛型参数会被直接当做返回数据的类型。

const request = (url: string, method: Method = 'get', submitData?: object) => {
  // !第二个泛型参数会被直接当做返回数据的类型
    return instance.request<User, {
        code: string
        message: string
        data: User
    }>({
        url,
        method,
        [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
    })
}

request('/user').then((res) => {
    res.
})

User 类型肯定不能写死，继续封装 request 泛型函数。

// #1
const request = <T>(
    url: string,
    method: Method = 'get',
    submitData?: object
) => {
    // #2
    return instance.request<
        T,
        {
            code: string
            message: string
            data: T
        }
    >({
        url,
        method,
        [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
    })
}

// #3
request<User>('/user').then((res) => {
    res.data.account
})

继续抽离第二个泛型参数为一个泛型 type。

type Data<T> = {
    code: number
    message: string
    data: T
}
const request = <T>(url: string, method: Method = 'get', submitData?: object) => {
    return instance.request<T, Data<T>>({
        url,
        method,
        [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
    })
}

用户登录

准备页面结构，views/Login/index.vue。

<template>
    <div class="login-page">
        登录
    </div>
</template>

配置路由规则，router/index.ts。

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        { path: '/login', component: () => import('@/views/Login/index.vue') }
    ]
})
export default router

准备路由出口，App.vue。

<template>
    <router-view></router-view>
</template>

CSS 主题定制

如何定义和使用 CSS 变量

:root {    --main: #999;  }
a { color: var(--main)}

覆盖 vant 主题色， styles/main.scss 。

:root {
    --cp-primary: #16c2a3;
    --cp-plain: #eaf8f6;
    --cp-orange: #fca21c;
    --cp-text1: #121826;
    --cp-text2: #3c3e42;
    --cp-text3: #6f6f6f;
    --cp-tag: #848484;
    --cp-dark: #979797;
    --cp-tip: #c3c3c5;
    --cp-disable: #d9dbde;
    --cp-line: #ededed;
    --cp-bg: #f6f7f9;
    --cp-price: #eb5757;
    // 覆盖 Vant 主体色
    // 官方文档：ConfigProvider 全局配置
    --van-primary-color: var(--cp-primary);
}

测试主题色，views/Login/index.vue

<script lang="ts" setup>
    import {  Button as VanButton  } from 'vant'
</script>
<template>
    <div class="login-page">
        <van-button type="primary">按钮</van-button>
    </div>
</template>

CpNavBar 组件封装

掌握 van-nav-bar 组件，封装自己的nav-bar 组件。

在这里插入图片描述

components/CpNavBar.vue

<script setup lang="ts">
    import {
        useRouter
    } from 'vue-router'

    const router = useRouter()
    // #1 点击左侧返回
    const onClickLeft = () => {
        // 判断历史记录中是否有回退记录
        if (history.state?.back) {
            router.back()
        } else {
            router.push('/')
        }
    }

    // #2 接收 title 和 rightText
    defineProps < {
        title ? : string
        rightText ? : string
    } > ()

    // #3 右侧的点击，让外界决定做什么事情
    const emit = defineEmits < {
        (e: 'click-right'): void
    } > ()
    const onClickRight = () => {
        emit('click-right')
    }
</script>

<template>
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed :title="title" :right-text="rightText" @click-right="onClickRight"></van-nav-bar>
</template>

表单校验

在这里插入图片描述

提取表单校验规则（为了其他页面复用）

utils/rules.ts

// 表单校验
const mobileRules = [
  { required: true, message: '请输入手机号' },
  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
]

const passwordRules = [
  { required: true, message: '请输入密码' },
  { pattern: /^\w{8,24}$/, message: '密码需8-24个字符' }
]

export { mobileRules, passwordRules }

单个表单项校验

import { mobileRules, passwordRules } from '@/utils/rules'
const mobile = ref('13212345678')
const password = ref('13212345678')
const agree = ref(false)

+    <van-field v-model="mobile" :rules="mobileRules" placeholder="请输入手机号" type="tel"></van-field>
      <van-field
        v-model="password"
+       :rules="passwordRules"
        placeholder="请输入密码"
        type="password"
      >

整体表单校验

思路：按钮上 native-type="submit" + 表单 @submit 它会自动去校验填写了rules的字段。

设置button组件为原生 submit 类型按钮

<van-button 
  block round 
  type="primary" 
  native-type="submit"> 登 录 </van-button>

监听表单submit 事件

<van-form autocomplete="off" @submit="login">

import { mobileRules, passwordRules } from '@/utils/rules'
import { ref } from 'vue'
import { showToast } from 'vant'
const mobile = ref('13212345678')
const password = ref('13212345678')
const show = ref(false)
const agree = ref(false)

// 表单提交
const login = () => {
  if (!agree.value) return showToast('请勾选我已同意')
  // 验证完毕，进行登录
}

图标组件-配置 svg 图标

安装插件

pnpm install vite-plugin-svg-icons -D

配置插件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// #1
++ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// #2
++ import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        Components({
            dts: false,
            resolvers: [VantResolver({ importStyle: false })]
        }),
        // #3
++        createSvgIconsPlugin({
++            iconDirs: [path.resolve(process.cwd(), 'src/icons')]
++        })
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

从main.ts导入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './stores'
// mark
++ import 'virtual:svg-icons-register'
import 'vant/lib/index.css'
import './styles/main.scss'
const app = createApp(App)
app.use(pinia)
app.use(router)
app.mount('#app')

测试使用 svg 精灵地图(页面中)

<svg aria-hidden="true">
    <!-- #icon-文件夹名称-图片名称 -->
    <use href="#icon-login-eye-off" />
</svg>

图标组件-封装 svg 组件

components/CpIcon.vue

<script setup lang="ts">
    // 提供 name 属性即可
    defineProps < {
        name: string
    } > ()
</script>

<template>
    <svg aria-hidden="true" class="cp-icon">
        <use :href="`#icon-${name}`" />
    </svg>
</template>

<style lang="scss" scoped>
    .cp-icon {
        // 和 font-size 一样大
        width: 1em;
        height: 1em;
    }
</style>

类型 types/components.d.ts。

import CpNavBar from '@/components/CpNavBar.vue'
import CpIcon from '@/components/CpIcon.vue'

declare module 'vue' {
    interface GlobalComponents {
        CpNavBar: typeof CpNavBar
        CpIcon: typeof CpIcon
    }
}

有些图标可以根据 style 中 color 的值来设置颜色，图标是否有这个功能取决于 UI 做图片时否开启。
测试使用

<cp-icon  name="login-eye-on"></cp-icon>
<cp-icon  name="login-eye-off"></cp-icon>

切换密码可见

双向绑定数据，并实现切换密码可见功能，views/Login/index.vue。

在这里插入图片描述

// #1 定义表单数据
const mobile = ref('')
const password = ref('')
// #3 定义控制密码是否显示的变量
++ const show = ref(false)

<!-- #2 v-model 进行绑定 -->
<van-field v-model="mobile" placeholder="请输入手机号" type="tel"></van-field>
<!-- #4 把 show 作用于框的类型 -->
<van-field v-model="password" placeholder="请输入密码" :type="show ? 'text' : 'password'">
    <template #button>
     <!-- #5 把 show 作用于图标的类型 -->
     <!-- #6 榜单点击事件，控制 show 的切换-->
     <cp-icon @click="show = !show" :name="`login-eye-${show ? 'on' : 'off'}`"></cp-icon>
    </template>
</van-field>

手机号密码登录

定义登录的 API 函数

services/user.ts

import type { User } from '@/types/user'
import { request } from '@/utils/request'

// 密码登录
export const loginByPassword = (mobile: string, password: string) => request<User>('/login/password', 'POST', { mobile, password })

进行登录

views/Login/index.vue

import { loginByPassword } from '@/services/user'
import { useUserStore } from '@/stores'
import { useRoute, useRouter } from 'vue-router'
const store = useUserStore()
const router = useRouter()
const route = useRoute()
// 表单提交
const login = async () => {
    if (!agree.value) return Toast('请勾选我已同意')
    // 验证完毕，进行登录
    const res = await loginByPassword(mobile.value, password.value)
    store.setUser(res.data)
    // 如果有回跳地址就进行回跳，没有跳转到个人中心
    router.replace((route.query.returnUrl as string) || '/user') 
    showToast('登录成功')
}

短信登录-切换效果

在这里插入图片描述

添加短信登录登录的界面切换功能，添加 code 的校验。

views/Login/index.vue

// #1 定义一个切换的变量
const isPass = ref(true)

<div class="login-head">
    <!-- #2 控制标题 -->
    <h3>{{ isPass ? '密码登录' : '短信验证码登录' }}</h3>
    <!-- #4 给 a 链接绑定点击事件，修改 isPass -->
    <a href="javascript:;" @click="isPass = !isPass">
        <!-- #3 控制按钮内容 -->
        <span>{{ !isPass ? '密码登录' : '短信验证码登录' }}</span>
        <van-icon name="arrow"></van-icon>
    </a>
</div>

完成表单项切换

<van-field v-if="isPass" v-model="password" :rules="passwordRules" placeholder="请输入密码" :type="show ? 'text' : 'password'">
    <template #button>
     <cp-icon @click="show = !show" :name="`login-eye-${show ? 'on' : 'off'}`"></cp-icon>
    </template>
</van-field>
<van-field v-else placeholder="短信验证码">
    <template #button>
        <span class="btn-send">发送验证码</span>
    </template>
</van-field>

完成 code 校验

utils/rules.ts 补充定义校验规则

const codeRules = [
    { required: true, message: '请输入验证码' },
    { pattern: /^\d{6}$/, message: '验证码6个数字' }
]

export { mobileRules, passwordRules, codeRules }

使用规则 views/Login/index.vue

<script lang="ts" setup>
    import {  codeRules } from '@/utils/rules'
    const code = ref('')
</script>
<van-field v-else v-model="code" :rules="codeRules" placeholder="短信验证码">

短信登录-发送短信

实现点击按钮发送验证码和倒计时的功能。

可以先去定义 CodeType 的类型(types/user.d.ts)

// 短信验证码类型，登录|注册|修改手机号|忘记密码|绑定手机号
export type CodeType = 'login' | 'register' | 'changeMobile' | 'forgetPassword' | 'bindMobile'

封装 API 接口函数(services/user.ts)

import { request } from '@/utils/request'
import type { CodeType } from '@/types/user'
// 发送验证码
export const sendMobileCode = (mobile: string, type: CodeType) => request('/code', 'GET', { mobile, type })

给发送验证码按钮绑定点击事件和回调，校验是否正在倒计时(views/Login/index.vue)

<span class="btn-send" @click="send">发送验证码</span>

const time = ref(0)
const send = async () => {
    // 如果正在进行倒计时，此时 time.value 的值大于 0，不允许发送验证码
    if (time.value > 0) return
}

点击发送验证码时，单独校验手机表单项

<!-- 绑定 name 属性 -->
<van-field v-model="mobile" name="mobile" :rules="mobileRules" placeholder="请输入手机号" type="tel"></van-field>

import { type FormInstance } from 'vant'
const form = ref<FormInstance>()
const time = ref(0)
const send = async () => {
    if (time.value > 0) return
    // 验证不通过报错，阻止程序继续执行
    await form.value?.validate('mobile')
}

<!-- 把 form 变量和 van-form 的 ref 属性进行绑定 -->
<van-form autocomplete="off" @submit="login" ref="form">

发送短信验证码。

import {  sendMobileCode } from '@/services/user'

import { showToast } from 'vant'
const send = async () => {
    // ...
    await sendMobileCode(mobile.value, 'login')
    showToast('发送成功')
}

进行倒计时

      <van-field v-else v-model="code" :rules="codeRules" placeholder="短信验证码">
        <template #button>
          <span v-if="time === 0" class="btn-send" @click="send">发送验证码</span>
          <span v-else class="btn-send">{{ time }}秒后重新发送</span>
        </template>
      </van-field>

import { type FormInstance } from 'vant'  //
const form = ref<FormInstance>()   
const time = ref(0)
const send = async () => {
  // 如果正在进行倒计时，此时 time.value 的值大于 0，不允许发送验证码
  if (time.value > 0) return
  // 验证不通过报错，阻止程序继续执行
  await form.value?.validate('mobile') //调用表单实例的validate方法，验证手机号是否填写正确。
  await sendMobileCode(mobile.value, 'login')    //发送获取验证码的请求
  showToast('发送成功')
  const startTimer = () => {
    const duration: number = 10
    time.value = duration
    const timerInterval = setInterval(() => {
      time.value--
      if (time.value === 0) {
        clearInterval(timerInterval)
      }
    }, 1000)
  }
  startTimer()
}

短信登录-进行登录

1. 封装接口 API，services/user.ts。

// 短信登录
export const loginByMobile = (mobile: string, code: string) => request<User>('/login', 'POST', { mobile, code })

2. 合并短信登录，views/Login/index.vue。

const login = async () => {
  if (!agree.value) return showToast('请勾选我已同意')
  if (code.value !== '') {
    const res = await loginByCode(mobile.value, code.value)
    store.setUser(res.data)
  } else {
    // 验证完毕，进行登录
    const res = await loginByPassword(mobile.value, password.value)
    store.setUser(res.data)
  }
  // 如果有回跳地址就进行回跳，没有跳转到个人中心
  router.replace((route.query.returnUrl as string) || '/user')
  showToast('登录成功')
}

枚举基本语法

作用：表示一组明确可选的值，使用该类型后，约定只能使用这组常量中的其中一个，和字面量类型配合联合类型类似。

enums/index.ts

export {}
// 默认是从 0 开始自增的数值
// 也可以指定初始值，Up = 10，后面是从 10 开始自增
// 成员也可以是字符串，例如 Up = 'Up'，但是后面的值都需要使用字符串
enum Direction {
  Up,
  Down,
  Left,
  Right
}

// 使用枚举类型
const changeDirection = (direction: Direction) => {
  console.log(direction)
}

// 好处：不会传错且具有语义
changeDirection(Direction.Up)

枚举使用场景

枚举可用于给一组没有语义的可选值，给它们添加类型。

比如后台给的数据：

0 是男，1 是女；
1 是待付款，5 是已付款，8 是已完成

通过枚举可以让成员更加语义化，提高代码可读性。

export {}
// 性别
enum GenderType {
    Boy,
    Girl
}
const showGender = (gender: GenderType) => {
    if (gender === GenderType.Boy) {
        console.log('性别：男')
    }
}
showGender(GenderType.Boy)

// 订单状态
enum OrderStatus {
    UnPay = 1,
    Payed = 5,
    Complete = 8
}
const showOrderStatus = (status: OrderStatus) => {
    if (status === OrderStatus.Complete) {
        console.log('状态：已完成')
    }
}
showOrderStatus(OrderStatus.Complete)

既然枚举类型也可以当做值使用，所以它不能够写在 d.ts 文件中。

Partial全部可选/Pick选一部分

import { ConsultType, IllnessTime, ConsultLevel } from '@/enums'

export type Consult = {
    id: string
    type: ConsultType
    illnessType: ConsultLevel
    depId: string
    illnessDesc: string
    illnessTime: IllnessTime
    consultFlag: 0 | 1
    pictures: Image[]
    patientId: string
    couponId: string
}

// 全部可选，将所有的数据类型都变成可选的(?)
++ export type PartialConsult = Partial<Consult>

// 从PartialConsult中选一部分属性,生成新类型
++  export type ConsultIllness = Pick< PartialConsult, 'illnessDesc' | 'illnessTime' >


**枚举使用场景**

枚举可用于给一组**没有语义**的可选值，给它们添加类型。

比如后台给的数据：

- 0 是男，1 是女；
- 1 是待付款，5 是已付款，8 是已完成

通过枚举可以让成员更加语义化，提高代码可读性。

```js
export {}
// 性别
enum GenderType {
    Boy,
    Girl
}
const showGender = (gender: GenderType) => {
    if (gender === GenderType.Boy) {
        console.log('性别：男')
    }
}
showGender(GenderType.Boy)

// 订单状态
enum OrderStatus {
    UnPay = 1,
    Payed = 5,
    Complete = 8
}
const showOrderStatus = (status: OrderStatus) => {
    if (status === OrderStatus.Complete) {
        console.log('状态：已完成')
    }
}
showOrderStatus(OrderStatus.Complete)

既然枚举类型也可以当做值使用，所以它不能够写在 d.ts 文件中。

Partial全部可选/Pick选一部分

import { ConsultType, IllnessTime, ConsultLevel } from '@/enums'

export type Consult = {
    id: string
    type: ConsultType
    illnessType: ConsultLevel
    depId: string
    illnessDesc: string
    illnessTime: IllnessTime
    consultFlag: 0 | 1
    pictures: Image[]
    patientId: string
    couponId: string
}

// 全部可选，将所有的数据类型都变成可选的(?)
++ export type PartialConsult = Partial<Consult>

// 从PartialConsult中选一部分属性,生成新类型
++  export type ConsultIllness = Pick< PartialConsult, 'illnessDesc' | 'illnessTime' >