使用typescript构建Vue应用

使用typescript构建Vue应用

1、Vue项目初始化-引入typescript

使用typescript构建Vue应用和使用js同样，都是经过vue-cli去初始化并建立一个vue项目，只不过使用typescript构建的时候 要在脚手架问卷操做的时候勾选上typescript选项。

2、typescript Vue项目比较

使用typescript构建的Vue项目发生了一些变化:
① main.js变成了main.ts，可是main.ts中的内容和main.js的内容是如出一辙的。
② router.js变成了router.ts，可是router.ts中的内容和router.js中的内容也是如出一辙的。
③ store.js变成了store.ts，可是store.ts中的内容和store.ts中的内容也是如出一辙的。

由于typescript是javascript的超集，因此 ts彻底兼容js。

④ 新增了一个shims-vue.d.ts声明文件，这个文件的做用就是让typescript可以识别.vue文件，在引入"*.vue"文件的时候，会将其标识为一个Vue组件，才能对.vue文件进行类型校验，其具体内容以下:

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

⑤ 新增了一个shims-tsx.d.ts文件，其做用就是为了可以解析.tsx文件，对.tsx文件进行类型校验，其具体内容以下:

import Vue, { VNode } from 'vue'
declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

⑥ 固然还会新增一个ts.config文件，这个是typescript的配置文件，具体内容这里不做解释，请参考tsconfig文件详解

3、.vue文件内容格式与写法

使用typescript来写Vue应用，最主要的就是.vue文件，.vue文件写法上与js有些不一样而且 新增了一些装饰器，接着一步一步分析。

① 虽然.vue文件的格式和写法上有了不一样，但这不一样只是<script></script>部分发生了变化，<template></template>和<style></style>和原来是同样的，一个最简单.vue文件仍然可使用以下写法:
// HelloWorld.vue

<template>
    <div>
        hello world
    </div>
</template>

② 在写<script></script>部分，第一点不一样就是，<script>标签上要加上lang语言属性，表示其中的内容为ts，如:

<script lang="ts">
</script>

③ 默认export上的不一样，使用js的时候，咱们是直接经过export default {}导出一个Vue组件对象便可，可是使用ts的时候，咱们必须导出一个类class，类名为组件名，同时这个类必须继承Vue，如:

// import Vue from "vue";
import { Component, Vue } from 'vue-property-decorator'; // 引入Vue及一些装饰器
@Component
export default class App extends Vue { // 继承Vue并导出Vue组件

}

以上就是<sciprt>内容最基本的写法，上面继承的Vue不是直接从"vue"模块中引入，而是从"vue-property-decorator"即vue属性装饰器模块中引入，固然 也能够经过vue模块引入import Vue from "vue"，可是咱们写.vue文件的时候 一般要引入一些装饰器，同时 这个装饰器类vue-property-decorator也提供了Vue，故能够直接从vue-property-decorator装饰器类上直接引入

④ 组件中data属性的写法，因为咱们在.vue文件中声明了一个class，这个class就是Vue组件，咱们能够直接在这个class中声明属性便可，这些声明的属性就是以前使用js写时的data属性中的数据，如:

export default class App extends Vue {
  public lists = [ // 这里就是以前Vue组件的data属性
    "Vue.js", "React.js", "Angular.js"
  ]
}

⑤ 组件中的computed计算属性的写法，一样咱们能够在class中声明get和set方法便可变成对应的computed属性，如:

export default class App extends Vue {
  public lists = [ // 这里就是以前Vue组件的data属性
    "Vue.js", "React.js", "Angular.js"
  ]
  public get count() { // 经过get和set实现计算属性
    return this.lists.length;
  }
}

⑥ 组件中方法的声明更简单，直接在class中声明方法便可，如:

export default class App extends Vue {
    public say() {
        console.log("say");
    }
}

⑦ @Component装饰器的使用，@Component装饰器就是用来标识当前这个类是一个Vue组件，@Component装饰器还能够传递对象做为参数，这个传递的对象就是Vue组件实例，因此全部以前用js写法的时候，Vue组件支持的全部选项均可以传入，如:

@Component({
    // 这里能够配置Vue组件支持的各类选项
    components: {
        HelloWorld
    },
    data() {
        return {
          a:1
        }
    },
    methods: {
        say(){
          console.log("say");
        }
    }
})
export default class App extends Vue {
}

@Component内容使用的是 Vue.extend()方法，用于扩展Vue Component并生成Vue组件，这里须要注意的就是， Vue最终会将class中定义的属性和@Component中定义的属性进行合并，若是两者中定义了同名的属性，那么 class中的优先级更高，即class中定义的会覆盖掉@Component中定义的同名属性，可是 data除外， @Component中定义的同名的data数据会覆盖掉class中定义的同名data属性，如:

@Component({
    data() {
        bar: 1
    },
    methods: {
        say(){
          console.log("say::@Component");
        }
    }
})
export default class App extends Vue {
    public bar: number = 2; // 这里的bar会被@Component中定义的bar覆盖掉
    public say() { // 这里的say()方法会覆盖掉@Component中定义的say方法
        console.log("say::class");
    }
}

还有一点要注意的是， @Component装饰器千万不要漏写，必须在组件类class前修饰

⑧ props属性的写法，使用ts写Vue组件的时候，若是要在组件上定义props属性，那么必须经过@Prop()装饰器，其实就是在定义组件data属性的时候用@Prop()装饰器进行修饰，若是没有经过@Propp()进行修饰，那么定义的属性就是组件的data属性，能够给@Prop()传递一个配置对象，能够定义传递属性的default、required、type等属性，如:

import { Component, Vue, Prop } from 'vue-property-decorator';
@Component // 不要忘了用@Component修饰组件class哟
export default class HelloWorld extends Vue {
    @Prop() public bar!: string; // 这里定义的是props属性
    public foo = "foo"; // 这里定义的是data属性
    @Prop({type: String, default:"foo", required: true}) public foo!: string;
}
</script>

须要注意的是，public foo!: string， 这里声明的string类型是不起做用的，要限定父组件传入的foo属性的数据类型， 必须在@Prop()装饰器内限定数据类型，不然无效

⑨ @Emit()装饰器的使用，在子组件发射自定义事件的时候一般会经过this.$emit("say")的方式，可是typescript提供了一个@Emit()装饰器，用于修饰一个方法，当这个方法被执行的时候，就会在方法执行完成后发射一个同方法名的事件出去，固然，这是在没有给@Emit()传递参数的状况下，若是给@Emit()传递了参数，那么就会发射指定参数的事件，如:

export default class HelloWorld extends Vue {
    @Emit()  // 在say()方法执行完成后会发射一个同方法名的say事件
    public say() {
    }
    @Emit("speak")  // 这里给@Emit()传递了参数，则会发射speak事件
    public say() {
    }
}

⑩ @Watch()装饰器的使用，其拥有监听组件中数据的变化，就至关于$watch，须要给其传递一个字符串参数，表示其监听的是哪一个数据的变化，如:

@Watch("foo") // 监听this.foo的变化
public add(newValue: number, oldValue: number) {
  console.log(`newValue is ${newValue}, oldValue is ${oldValue}`);
}

4、vuex中的变化

vuex中的数据是存放在state属性上的，若是要限定state中数据的属性和类型，那么咱们必须在建立store对象的时候定义一个接口限定一下数据类型，如:

interface IState {
  lists: string[]
}
export default new Vuex.Store<IState>({
    state: {
       lists: ["vue"] // 定义了state的数据结构，必需要有lists属性，而且属性值为string[]
    }
});

获取vuex中的数据时候， 仍是能够经过this.$store.state.lists获取到，可是咱们也能够经过装饰器获取到，要使用 vuex的装饰器，咱们须要安装 vuex-class，如:

import {State, Mutation, Action} from "vuex-class";
export default class App extends Vue {
    // 将从vuex中获取到的lists数据保存到组件的lists属性上
    @State("lists") public lists!: string[];
    @Mutation("say") // 在say()方法前修饰，当say()方法执行的时候就会提交一个say mutation
    public say() {
      console.log("say1");
    }
    @Action("speak") // 在speak()方法前修饰，当speak()方法执行的时候就会提交一个speak action
    public speak(){
    }
    public mounted () {
      this.say();
      this.speak();
    }
}