TypeScript（03）——vue全家桶中如何使用TypeScript语法合集

前言

之前已经学过TypeScript函数，class类其他语法及ts在html页面中如何使用案例；
这篇学习如何在vue项目中使用ts，其中包含：组件，axios请求，vuex，父子组件传值，Mixins等。。。
为了更方便理解，我把在vue中常用功能点代码用js/ts写法分开书写，如果你对vue比较熟悉的，可以直接跳转到最后，最后附有demo源码；

正文

一、准备工作

1.1安装vue cil4

npm install -g @vue/cli
npm install -g @vue/cli-service-global

1.2新建项目

vue create vue-ts-sticky

按步骤开始安装，安装过程中选择TypeScript，vuex，路由router;
使用npm run serve启动项目

1.3 在vue中书写ts的必备插件！

vue-class-component 强化 Vue 组件，使用装饰器语法使 Vue 组件更好的跟TS结合使用。
vue-property-decorator在 vue-class-component 的基础上增加了更多与 Vue 相关的装饰器，使Vue组件更好的跟TS结合使用。

npm i vue-class-component -s-d
npm i  vue-property-decorator -s-d

二、ts写vue单文件写法

2.1单页面格式怎么写

vue单页面的格式的写法不变，同样由template、script、style组成；
唯一区别：<script src="ts">

<template>
  <div class="hello"></div>
</template>
<script src="ts"></script>
<style scoped></style>

2.1.1 vue项目中的mian.ts及app.vue

main.ts写法

import Vue from 'vue'
import App from './App.vue'
//vuex
import store from './store'
// 路由
import router from './router'
Vue.config.productionTip = false

new Vue({
   
  store,
  router,
  render: h => h(App)
}).$mount('#app')

app.vue写法

<template>
  <div id="app">
    <!-- 使用路由的方法，也可以不用路由，直接引子组件 -->
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
//注意点：1.下面的代码必须在每个页面都中引入
import {
     Component, Vue } from 'vue-property-decorator';
@Component
//注意点：2.每个页面都有组件名称：App/自定义
export default class App extends Vue {
    

}
</script>

2.2 如何在Data双向绑定值

• js写法

<template>
  <div class="hello">
    <h1>{
  {msg}}</h1>
  </div>
</template>
<script>
export default {
    
   data() {
    
    return {
    
      msg: "",
    };
  },
}
</script>

• ts写法

<template>
  <div class="hello">
    <h1>{
  {msg}}</h1>
  </div>
</template>
<script src="ts">
import {
     Component, Vue, } from "vue-property-decorator";
@Component
export default class Home extends Vue {
    
  //注意点：3.public是公用的意思，可省略;没有data,return,直接放要绑定的值
  public msg!: number | string;
  // msg!: number | string;
}
</script>

2.3 如何引入子组件及组件传值

• js写法

<template>
  <div class="hello">
    <MenuBar :setMsg="msg"/>
  </div>
</template>
<script>
import MenuBar from "../components/MenuBar.vue";
export default {
    
  props: {
    
    // 父组件的值
    fatherMsg: {
    
      type: String
    }
  },
  components: {
    
    MenuBar
  },
  data() {
    
    return {
    
      msg: "",
    };
  },
}
</script>

• ts写法

<template>
  <div class="hello">
    <MenuBar :setMsg="msg" />
  </div>
</template>
<script src="ts">
import {
     Component, Vue, } from "vue-property-decorator";
import MenuBar from "../components/MenuBar.vue";
@Component({
    
  components: {
    
    MenuBar
  },
})
export default class Home extends Vue {
    
  // 父组件的传递过来的值
  @Prop() private fatherMsg!: string;
  //传递给子组件的值
  public msg!: number | string;
}
</script>

2.4 生命周期的用法

• js写法

<template>
  <div class="hello">
    <h1>{
  {msg}}</h1>
  </div>
</template>
<script>
var data = {
    name: "小明",age: 18};
export default {
    
   data() {
    
    return {
    
      msg: "",
    };
  },
  created() {
    
    this.msg = data.name + data.age + "岁";
  },
}
</script>

• ts写法

<template>
  <div class="hello">
    <h1>{
  {msg}}</h1>
  </div>
</template>
<script  src="ts">
import {
     Component, Vue, } from "vue-property-decorator";
var data = {
    name: "小明",age: 18};
@Component
export default class Home extends Vue {
    
  public msg!: number | string;
  created(): void {
    
    console.log("created");
    this.msg = data.name + data.age + "岁";
  }
  beforeCreate(): void {
    
    console.log("beforecreate");
  }
  beforeMount(): void {
    
    console.log("beforemounted");
  }
  mounted(): void {
    
    console.log("mounted");
  }
}
</script>

2.5 methods方法

• js写法

<template>
  <div class="hello">
    <h1>{
  {count}}</h1>
    <button class="btn" @click="addCount">add</button>
  </div>
</template>
<script>
var data = {
    name: "小明",age: 18};
export default {
    
   data() {
    
    return {
    
      count: 0,
    };
  },
  methods: {
    
    addCoun