vue中使用typescript的迷惑

一. 第三方插件库：vue-class-component
vue-class-component 是官方维护的TypeScript装饰器，写法比较扁平化

import  { Component, Vue, Watch, Prop  }  from 'vue-class-component'
import Header from '@/component/header.vue'
import MyMixin from './mixin.js'
 
Vue.mixin(MyMixin);
 
@Component({
    // component
    components:{ Header }
})
export default class App extends Vue {
    // initial data
    name:string = 'xiaowu'
 
    // computed
    get getMyName():string {
        return `my name is ${this.name}`
    }
 
    // props
    @Prop({
        default: '',
        type: [String, Number]
    })
    phone: [string, number];
 
    // method
    jumpPage():void{
        console.log('jump page')
    }
 
    // lifecycle hook
    mounted(){
        console.log('mounted !!)
    }
    // watch 
    @Watch('state', { deep: true })
    onStateChange(n: any, o: any) {
        console.log('state is change ')   
    }
}

二. vue-shims.d.ts
TypeScript并不支持Vue文件，所以需要告诉TypeScript*.vue文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件， 创建vue-shims.d.ts文件，可放在根目录下，和package.json同级

*.d.ts类型文件不需要手动引入，TypeScript会自动加载

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}
 

三. tsconfig.json
创建tsconfig.json文件，放在根目录下，和package.json同级

配置内容主要也看个人需求，具体可以去typescript的官网查看，但是有一点需要注意：

在Vue中，你需要引入 strict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any 类型。

{
  "include": [
    "src/*",
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    // types option has been previously configured
    "types": [
      // add node as an option
      "node"
    ],
    // typeRoots option has been previously configured
    "typeRoots": [
      // add path to @types
      "node_modules/@types"
    ],
    // 以严格模式解析
    "strict": true,
    // 在.tsx文件里支持JSX
    "jsx": "preserve",
    // 使用的JSX工厂函数
    "jsxFactory": "h",
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 启用装饰器
    "experimentalDecorators": true,
    "strictFunctionTypes": false,
    // 允许编译javascript文件
    "allowJs": true,
    // 采用的模块系统
    "module": "esnext",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 如何处理模块
    "moduleResolution": "node",
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": true,
    "lib": [
      "dom",
      "es5",
      "es6",
      "es7",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

四. ts 无法识别$ref

解决方法
① 直接在 this.$refs.xxx 后面申明类型如：

this.$refs.lyricsLines as HTMLDivElement;

ts 无法识别 require

解决方法：安装声明文件

yarn add @types/webpack-env -D

五. new Vue({ render: h => h(App) }).$mount(’#app’)

说明：render是一个方法，自带一个形参createElement，这个参数也是一个方法，是用来创建vue 节点的，也就是html模板的，然后渲染(render)到指定的节点上，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上

//render: h => h(App) 是下面内容的缩写：
render: function (createElement) {
    return createElement(App);
}
//进一步缩写为(ES6 语法)：
render (createElement) {
    return createElement(App);
}
//再进一步缩写为：
render (h){
    return h(App);
}
//按照 ES6 箭头函数的写法，就得到了：
render: h => h(App);

六. vue-class-component使用Mixins

声明mixin的示例：

// mixin.js
import Vue from 'vue'
import Component from 'vue-class-component'

// You can declare a mixin as the same style as components.
@Component
export default class MyMixin extends Vue {
  mixinValue = 'Hello'
}

使用mixin的示例：

import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.js'

// Use `mixins` helper function instead of `Vue`.
// `mixins` can receive any number of arguments.
@Component
export class MyComp extends mixins(MyMixin) {
  created () {
    console.log(this.mixinValue) // -> Hello
  }
}