Vue+TypeScript项目实践（一）

目前Vue CLI已经内置了TypeScript工具支持。在3.X未来的的计划中，也会增加对TypeScript更多的支持。

一.使用 TypeScript 创建工程

1. vue create vue-ts 选择Manually Select Features

Select.png

3. 然后选择自己想要的相关配置，例如 Tslint+Prettier

二.基于类的组件

安装官方维护的 vue-class-component 装饰器，可以使用基于类的API。例如

import Vue from 'vue'
import Component from 'vue-class-component'
import home from "../views/home.vue";//导入组件

@Component({
  components: { home },
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // 初始 data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // 生命钩子lifecycle hook
  mounted () {
    this.greet()
  }

  // 计算属性computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // 方法method5
  greet () {
    alert('greeting: ' + this.msg)
  }
}

如果想使用@Emit、@Inject、@Model、@Prop、@Provide、@Watch等装饰器,可以安装 vue-property-decorator,使用方式见文档。
npm i -S vue-property-decorator

如果想在项目中使用Vuex,可以安装vuex-class,使用方式见文档
npm install --save vuex-class

三.使用第三方库

在项目中我们经常会使用到一下第三方库，例如组件拖拽的库 Vue.Draggable，首先安装库
npm i -S vuedraggable
然后在组件中导入

import draggable from "vuedraggable";
@Component({
  components: { draggable }
})

这个时候编辑器可能会报下面的错。提示你安装声明依赖或者自己添加一个声明文件

Could not find a declaration file for module 'vuedraggable'. 'd:/demo/test/node_modules/vuedraggable/dist/vuedraggable.umd.min.js' implicitly has an 'any' type.
  Try `npm install @types/vuedraggable` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuedraggable';`ts(7016)

因为当从 npm 安装第三方库时，还要同时安装这个库的类型声明文件。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件
如果没有这个库的声明文件的话，我们需要手动声明这个库。src目录下新建一个types目录,然后在types 目录下新建一个 index.d.ts文件

//index.d.ts
declare module "vuedraggable";

这时vuedraggable库就可以正常使用。