TypeScript基础以及在Vue中的应用

更多写作与参考学习材料等可登录ZG文库网http://www.zgwenku.com/

TypeScript推出已经很长时间了，在Angular项目中开发比较普遍，随着Vue 3.0的即将推出，TypeScript在Vue项目中使用也即将成为很大的趋势，笔者也是最近才开始研究如何在Vue项目中使用TypeScript进行项目的开发。

准备

阅读博客前希望读者能够掌握如下技能，文章中也会相对应的讲解一些对于TypeScript基础进行讲解。本篇博客基于Vue cli 3.0实践，若读者使用的是Vue cli 2.0的话，需要对其webpack配置进行更改，本文不进行讲解，请读者自行百度，并进行更改。

1. Vue cli 3.0环境
2. Vue基础应用

TypeScript基础

创建完项目之后，接下来就可以对项目进行开发，在使用TypeScript开发与使用JavaScript还是有很大的区别，打开HelloWorld.vue文件内容如下：

<template>
  <div></div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {

}
</script>

<style lang="scss">

</style>

读者若经常开发Vue项目会发现与之间的.vue有了一些变化，主要是在<script>标签部分。使用ES6开发项目时样文件格式如下：

<template>
  <div></div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped></style>

对比一下两者之间还是有很大的区别的。原有写法是直接使用export default导出一个对象，然而TypeScript而是使用class如果对React的同学应该很熟悉，有点类似于React创建的组件的写法了。对于template的使用其实与之前的写法是一样的。唯一改变得就是对于<script>部分，如果想在项目中使用TypeScript需要在<script>添加标识：<script lang="ts">告知解析器需要使用TypeScript进行解析。

在Vue中使用TypeScript编写项目，需要依赖于Vue提供的包vue-property-decorator以达到对TypeScript的支持。需要使用@修饰器其中Vue功能才能正常使用。无论在页面还是组件时，一定要使用@Component对导出类进行修饰，否则无法正常使用某些功能(如：双向绑定...)。接下来就来实现如何在模板中渲染数据，这里将不再使用data而是直接在class中写入变量。

关于vue-property-decorator的用法会在下面详细介绍。

<template>
  <div>
    <h1>{
  {message}}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    private message:string = "Hello,TypeScript";
}
</script>

仔细观察一下message的声明，与其之前使用data时已经完全不一样了有没有，除了没有使用data以外，还有很大的区别：

修饰符  变量名：数据类型 = 数据
private message:string = "Hello,TypeScript";

修饰符

如果没有接触过强类型语言的话对于修饰符可能会感觉到一丝丝的陌生，在es6的class中已经有了修饰符的概念，在es6的class中只有一个修饰符static修饰符，表示该类的静态方法，但是在TypeScript中添加了很多修饰符：

• public：所有定义成p