Vue3+Typescript 踏坑小记

学习文档

Vue3

Vue2 迁移

Typescript 入门教程

Vue Router 4

原生问题

1. setTimeout 类型问题：

请加入 window 开头表示是 web 的，不然编辑器要求使用 NodeJS.Timeout 类型，但是编译又编不过。

let timer: number = window.setTimeout(() => {
    ...
}, 17)

setInterval 等同理。

2. Map

优先使用 Map 对象来实现需求，而不是普通对象，不然在类型判断上比较难搞。

const modeMaps = new Map([
    ['clickable', 'RightOutlined'],
    ['closable', 'CloseOutlined']
])

而不是：

const modeMap = {
    'clickable': 'RightOutlined',
    'closable': 'CloseOutlined',
}

Eslint 配置

1. 使用以下标准，不然有未知问题。

extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
]

2. 还有关闭要优先定义的规则，不然有些相互引用的业务没法满足这规则。

rules: {
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
}

Vue Props

1. 函数类型

官方有介绍。

2. 枚举类型

mode: {
    type: String as PropType<'clickable' | 'closable'>,
    default: 'default'
},

3. validator 或者 default 是函数的情况下，使用 =>，不然会导致 setup 的 props 参数Typescript异常

shape: {
    validator: value => value.length >= 2,
    default: () => []
}

PS：如果是引用的函数，被引用的函数也要确保是 => 形式的

Vue Watch

1. 监控 props.xxx ，推荐使用 getter 函数的形式

watch(() => props.xxx, () => {
    ...
})

如果 props.xxx 是对象或者数组

watch(() => props.xxx, () => {
    ...
}, {
    deep: true
})

Vue ref

1. 引用DOM

setup() {
    const root = ref(null)
    ...

    onMounted(() => {
        console.log(root.value) // HTMLElement
    })

    return {
        root
    }
}

在 Typescript 中，应该这么写：

setup() {
    const root = ref()
    ...

    onMounted(() => {
        console.log(root.value as HTMLElement) // HTMLElement
    })

    return {
        root
    }
}

2. 引用组件

import FooComponent from 'path/to/FooComponent.vue'

setup() {
    const foo = shallowRef>()
    ...

    onMounted(() => {
        console.log(foo.value as ComponentPublicInstance) // ComponentPublicInstance
    })

    return {
        foo
    }
}

vue-svg-loader 处理 Svg 图标

1. 安装依赖

npm i -D vue-svg-loader@beta vue-loader

注：是跟 vue 同步的 beta 版本

2. 在 vue.config.js 中配置

chainWebpack: config => {
    // svg
    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    svgRule
      .use('vue-loader-v16')
      .loader('vue-loader-v16') // or `vue-loader-v16` if you are using a preview support of Vue 3 in Vue CLI
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
}

3. 使用 markRaw 标记返回对象本身

import { markRaw, defineComponent } from 'vue'
import TaobaoSvg from './svgs/taobao.svg'

export default defineComponent({
  setup() {
    return {
      TaobaoSvg: markRaw(TaobaoSvg)
    }
  }
})

注：关于 markRaw