开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情 typescript刚开始使用效率很低，有一个痛苦期，特别是应用过程中各种报错。

vue-router

在路由中，由于路由拦截最终得到的routeArray，也是页面菜单导航生成的来源。所以实际开发中route中配置的页面对象有时候并不需要再菜单上显示，比如耳机页面，所以就要告诉menu组件不渲染该页面对象。就需要假如hidden属性。

router.ts

// 定义自己的route对象，新增redirect和hidden属性，
// hidden为了在菜单中是否显示router中的页面
export type MyRouteRecordRaw = RouteRecordRaw & {
  redirect?: string
  hidden?: boolean
}
// 定义RouteMeta对象。判断权限用。
declare module 'vue-router' {
  interface RouteMeta {
    title: string
    icon?: string
    affix?: boolean
    // roles 角色数组。用于筛掉不显示的route对象
    roles?: Array<string>
  }
}

const routes: MyRouteRecordRaw[] = [
  {
    path: '/',
    name: 'Login',
    component: () => import('@/pages/login/Login.vue'),
  },
    {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: '/',
    meta: {
      title: '数据统计',
      icon: 'dashboard',
      roles: ['admin'],
    },
  },
  ]

网络请求

我们按照不同业务新建不同API页面。比如登录，退出登录，和获取用户信息等。我们放在了user.ts中。

我们以Interface 的形式定义user.ts中用到的所有接口方法。每个方法实际interface的一个key。ILoginParams中定义接口方法所需要的参数，也可以在方法中单独定义。

api/apiType.ts

export interface ILoginParams {
  userName: string
  passWord: string | number
}
export interface IUserApi {

  login: (params: ILoginParams) => Promise<any>
  getInfo: () => Promise<any>
  logout: () => Promise<any>
}

关于user的所有接口定义。 api/user.ts

//login.ts
import http from '@/service/http'
// 导出apiType中定义的所有的类型，接口等。
import * as T from './apiType'

const loginApi: T.IUserApi = {
// 登录接口， 在IUserApi的interface接口中已经定义过params的参数类型，以及返回值。所以此处无需定义
  login(params) {
    return http.post('/login', params)
  },
  getInfo() {
    return http.get('api/getInfo')
  },
  logout() {
    return http.post('/logout/myLogOut')
  },
}

export default loginApi

调用接口

    async getUserInfo() {
      // 可以做异步
      const { data, code } = await loginApi.getInfo()
      this.roles = data
    }

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 N 天，点击查看活动详情

typescript在vue应用

vue-router

网络请求