vue中使用typescript

尝试使用typescript写vue项目,遇到了一些坑

每次遇到问题后,总是后悔为什么当初脑残要用ts

然后解决后,写着写着又觉得真香 😭….

vuex中state定义

给对象属性分配数据类型的时候,需要分模块定义每个属性的类型

第三方库的types定义

@types中不存在该包

许多第三方库并没有相应的类型定义,需要建立 xxx.d.ts 文件定义模块

1
2
3
4
5
// echats.d.ts
declare module 'vue-echarts' {
const ECharts: any
export default ECharts
}

@types中存在该包

比如lodash

1
yarn add lodash @types/lodash
1
2
3
// main.ts 中全局引入
import lodash from 'lodash'
Vue.prototype['$_'] = lodash
1
2
3
4
5
6
7
8
// lodash.d.ts
import Vue from 'vue'
import lodash from 'lodash'
declare module 'vue/types/vue' {
interface Vue {
$_: typeof lodash
}
}

引入js文件

一些常用函数的js文件,直接改ts,否则用js引入又要报没有类型定义的错误

vue-router中的大坑

组件内的路由守卫不能触发

解决办法:

  1. 需要路由守卫的组件使用 vue-class-componen 代替 vue-property-decorator

  2. 组件结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import Component from 'vue-class-component'
    Component.registerHooks([
    'beforeRouteEnter',
    'beforeRouteUpdate',
    'beforeRouteLeave'
    ])

    @Component({
    components: {
    Background
    }
    })
    export default class Home extends Vue {
    beforeRouteEnter (to: Route, from: Route, next: Function) {
    console.log('beforeRouteEnter')
    next()
    }
    }
  3. 网上能查到 在main文件中引入 ComponentComponent.registerHooks 的方法,但尝试后并不能生效,写在组件内部可行

遇到问题继续更新 つづく

好好写好各个类型定义,typescript还是挺香的