美文网首页Vue技术vue收藏
Vue3+TS Day35 - type、typeof、infe

Vue3+TS Day35 - type、typeof、infe

作者: 望穿秋水小作坊 | 来源:发表于2021-12-29 14:16 被阅读0次

    一、基础知识补充

    1、思考在login-account.vue文件中export default defineComponent({}) ,导出的是对象{} ,如果在外部通过ref拿到还是对象{}吗?(这个很重要,但是可能要学完回顾源码的时候才能理解了)

    image.png

    2、type关键字是JavaScript中的还是TypeScript中的?有什么用?

    • 【type】 属于TypeScript中的关键字
    • 【作用】给类型起一个新名字,可以作用于原始值(基本类型),联合类型,元组以及其他任何你需要手写的类型
    • 【注意】起别名不会新建一个类型,只是创建了一个新名字来引用那个类型。给基本类别起名字通常没什么用。类型别名常用于联合类型。
    type Second = number; // 基本类型
    let timeInSecond: number = 10;
    let time: Second = 10;  // time的类型其实就是number类型
    type userOjb = {name:string} // 对象
    type getName = ()=>string  // 函数
    type data = [number,string] // 元组
    type numOrFun = Second | getName  // 联合类型
    

    3、typeof 呢?

    • 【typeof】是JavaScript中的操作符
    • 【typeof操作符】返回一个字符串,表示操作数的类型。
    • 它的返回值可能是 "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" 其中一种

    4、理解TypeScript中的 extends 条件类型?

    • 【注意】extends 运用在type 和class中时,完全是两种作用效果。
    • 【extends】是条件类型是一种条件表达式进行类型的关系检测。
    const num: number = 1; // 可被分配
    const str: string = 2; // 不可被分配
    
    • 而条件类型的判断逻辑,和上面的的 ”可被分配“ 相同逻辑:
    type A = 'x';
    type B = 'x' | 'y';
    
    type Y = A extends B ? true : false; // true
    

    5、TypeScript中的infer关键字呢?

    • 【类型推导 infer】是作为 extends 条件类型的自语句使用,使用 infer 声明一个类型变量,在条件类型判定为 true 时生效。
    type ExtractArrayItemType<T> = T extends (infer U)[] ? U : T;
    
    // 条件判断都为 false,返回 T
    type T1 = ExtractArrayItemType<string>;         // string
    type T2 = ExtractArrayItemType<() => number>;   // () => number
    type T4 = ExtractArrayItemType<{ a: string }>;  // { a: string }
    
    // 条件判断为 true,返回 U
    type T3 = ExtractArrayItemType<Date[]>;     // Date
    

    6、理解instanceType?在vue目前主要用在哪里?

    • 【vue中的instanceType用法】父组件用ref获取子组件时,通过 instanceType获取子组件的类型
    • 【instanceType作用】该类型的作用是获取构造函数类型的实例类型。
    // 源码实现:
    // node_modules/typescript/lib/lib.es5.d.ts
    
    type InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any;
    
    
    // 复制代码看一下官方的例子:
    class C {
        x = 0;
        y = 0;
    }
    
    type T20 = InstanceType<typeof C>;  // C
    type T21 = InstanceType<any>;  // any
    type T22 = InstanceType<never>;  // any
    type T23 = InstanceType<string>;  // Error
    type T24 = InstanceType<Function>;  // Error
    

    二、项目代码注意点

    1、如果在开发环境,网络请求出现了跨域访问怎么办?

    • 可以通过本地代理绕过跨域问题
    // 在 vue.config.js 文件中配置devServer
    module.exports = {
      // 1.配置方式一: CLI提供的属性
      outputDir: './build',
      // publicPath: './',
      devServer: {
        proxy: {
          '^/api': {
            target: 'http://152.136.185.210:5000',
            pathRewrite: {
              '^/api': ''
            },
            changeOrigin: true
          }
        }
      },
      // 2.配置方式二: 和webpack属性完全一致, 最后会进行合并
      configureWebpack: {
        resolve: {
          alias: {
            components: '@/components'
          }
        }
      }
    }
    

    2、如果在生产环境,网络请求出现了跨域访问怎么办?

    • 可以通过Nginx来解决

    3、父组件如何调用子组件的方法?

    • 通过给子组件添加ref调用,然后借助<InstanceType<typeof LoginAccount>>保证代码安全
        const accountRef = ref<InstanceType<typeof LoginAccount>>()
    
        const handleLoginClick = () => {
          accountRef.value?.loginAction(isKeepPassword.value)
        }
    

    4、vuex的内容是存储在内存中的,浏览器一刷新,vuex的数据就被清空了,怎么办?

    • 写一个 actions,【loadLocalLogin】在页面初始化的时候调用一下
    • 尽量保证vuex中state的所有修改都源自mutation流程
    // store/login/index.ts
    loadLocalLogin({ commit }) {
          const token = localCache.getCache('token')
          if (token) {
            commit('changeToken', token)
          }
          const userInfo = localCache.getCache('userInfo')
          if (userInfo) {
            commit('changeUserInfo', userInfo)
          }
          const userMenus = localCache.getCache('userMenus')
          if (userMenus) {
            commit('changeUserMenus', userMenus)
          }
        }
    
    // store/index.ts
    export function setupStore() {
      store.dispatch('login/loadLocalLogin')
    }
    
    // main.ts
    import store from './store'
    import { setupStore } from './store'
    
    const app = createApp(App)
    setupStore()
    app.mount('#app')
    

    5、未登录用户默认跳转到登陆页面要怎么做?

    • 使用路由守卫
    import { createRouter, createWebHistory } from 'vue-router'
    import { RouteRecordRaw } from 'vue-router'
    import localCache from '@/utils/cache'
    
    const routes: RouteRecordRaw[] = [
      {
        path: '/',
        redirect: 'main'
      },
      {
        path: '/login',
        component: () => import('../views/login/login.vue')
      },
      {
        path: '/main',
        component: () => import('../views/main/main.vue')
      }
    ]
    
    const router = createRouter({
      routes,
      history: createWebHistory()
    })
    
    router.beforeEach((to) => {
      if (to.path !== '/login') {
        const token = localCache.getCache('token')
        if (!token) {
          return '/login'
        }
      }
    })
    
    export default router
    
    

    6、如何写一个本地缓存管理util?

    // cache.ts
    
    let counter = 0
    class LocalCache {
      constructor() {
        console.log(`LocalCache被调用了${counter++}次`)
      }
    
      setCache(key: string, value: any) {
        window.localStorage.setItem(key, JSON.stringify(value))
      }
    
      getCache(key: string) {
        let value = window.localStorage.getItem(key) ?? ''
        if (value) {
          value = JSON.parse(value)
        }
        return value
      }
    
      deleteCache(key: string) {
        window.localStorage.removeItem(key)
      }
    
      clearCache() {
        window.localStorage.clear()
      }
    }
    
    export default new LocalCache()
    
    

    相关文章

      网友评论

        本文标题:Vue3+TS Day35 - type、typeof、infe

        本文链接:https://www.haomeiwen.com/subject/aikvqrtx.html