飞跃高山与大洋的鱼飞跃高山与大洋的鱼
首页
先看
计算机
  • 数学
  • Linux
  • Arch
  • Manjaro
  • Ubuntu
  • CentOS
  • Kubernetes
  • Web
  • JavaScript
  • TypeScript
  • CSS
  • Canvas
  • Vue
  • Vite
  • NuxtJS
  • Webpack
  • Flutter
  • D3
  • Jest
  • WeApp
  • Utils
  • Nodejs
  • Nestjs
  • Golang
  • Nginx
  • Traefik
  • MySQL
  • MongoDB
  • Redis
  • Docker
算法
  • 像素风
  • Git
  • Github
  • VSCode
  • Chrome
  • Google
  • Bookmark scripts
  • 导航 🎉
  • VuePress 侧边栏插件
  • VuePress 官网
🚇 开往
首页
先看
计算机
  • 数学
  • Linux
  • Arch
  • Manjaro
  • Ubuntu
  • CentOS
  • Kubernetes
  • Web
  • JavaScript
  • TypeScript
  • CSS
  • Canvas
  • Vue
  • Vite
  • NuxtJS
  • Webpack
  • Flutter
  • D3
  • Jest
  • WeApp
  • Utils
  • Nodejs
  • Nestjs
  • Golang
  • Nginx
  • Traefik
  • MySQL
  • MongoDB
  • Redis
  • Docker
算法
  • 像素风
  • Git
  • Github
  • VSCode
  • Chrome
  • Google
  • Bookmark scripts
  • 导航 🎉
  • VuePress 侧边栏插件
  • VuePress 官网
🚇 开往
  • TYPESCRIPT

    • 更好维护的 TypeScript
    • 修改 axios response 返回类型
    • ESLint 在 TypeScript 未能好好工作
    • 扩展 Vue Router Meta 信息
    • TypeScript 类型挑战
    • TypeScript 常见问题

扩展 Vue Router Meta 信息

在实际应用中会在 meta 添加一些字段,方便做路由上的功能扩展。而 TypeScript 中要添加对应的类型提示首先想到对 RouteRecordRaw 做扩展:

export interface MenuMeta {
  // 标题
  title: string
  // 图标
  icon?: string
  // 在侧边栏中隐藏
  hideInMenu?: boolean
}

export type MenuRecordRaw = RouteRecordRaw & {
  meta?: MenuMeta & RouteMeta
  children?: MenuRecordRaw[]
}

对于部分原生方法需要重新指定类型,不够友好,后续在文档中看到路由元信息:

import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    // 路由名称
    title: string
    // 路由图标
    icon?: string
    // 从侧边栏隐藏
    hideInMenu?: boolean
  }
}
编辑文档!
上次更新:
贡献者: shanyuhai123
Prev
ESLint 在 TypeScript 未能好好工作
Next
TypeScript 类型挑战