一、Vue項目初始化-引入typescript

使用typescript構(gòu)建Vue應(yīng)用和使用js一樣，都是通過vue-cli去初始化并創(chuàng)建一個vue項目，只不過使用typescript構(gòu)建的時候要在腳手架問卷操作的時候勾選上typescript選項。

二、typescript Vue項目比較

使用typescript構(gòu)建的Vue項目發(fā)生了一些變化:
① main.js變成了main.ts，但是main.ts中的內(nèi)容和main.js的內(nèi)容是一模一樣的。
② router.js變成了router.ts，但是router.ts中的內(nèi)容和router.js中的內(nèi)容也是一模一樣的。
③ store.js變成了store.ts，但是store.ts中的內(nèi)容和store.ts中的內(nèi)容也是一模一樣的。

因為typescript是javascript的超集，所以ts完全兼容js。

④ 新增了一個shims-vue.d.ts聲明文件，這個文件的作用就是讓typescript能夠識別.vue文件，在引入"*.vue"文件的時候，會將其標識為一個Vue組件，才能對.vue文件進行類型校驗，其具體內(nèi)容如下:

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

⑤ 新增了一個shims-tsx.d.ts文件，其作用就是為了能夠解析.tsx文件，對.tsx文件進行類型校驗，其具體內(nèi)容如下:

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的配置文件，具體內(nèi)容這里不作解釋，請參考tsconfig文件詳解

三、.vue文件內(nèi)容格式與寫法

使用typescript來寫Vue應(yīng)用，最主要的就是.vue文件，.vue文件寫法上與js有些不同并且新增了一些裝飾器，接著一步一步分析。

① 雖然.vue文件的格式和寫法上有了不同，但這不同只是<script></script>部分發(fā)生了變化，<template></template>和<style></style>和原來是一樣的，一個最簡單.vue文件仍然可以使用如下寫法:

// HelloWorld.vue

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

② 在寫<script></script>部分，第一點不同就是，<script>標簽上要加上lang語言屬性，表示其中的內(nèi)容為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>內(nèi)容最基本的寫法，上面繼承的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屬性中的數(shù)據(jù)，如:

export default class App extends Vue {
 public lists = [ // 這里就是之前Vue組件的data屬性
  "Vue.js", "React.js", "Angular.js"
 ]
}

⑤ 組件中的computed計算屬性的寫法，同樣我們可以在class中聲明get和set方法即可變成對應(yīng)的computed屬性，如:

export default class App extends Vue {
 public lists = [ // 這里就是之前Vue組件的data屬性
  "Vue.js", "React.js", "Angular.js"
 ]
 public get count() { // 通過get和set實現(xiàn)計算屬性
  return this.lists.length;
 }
}

⑥ 組件中方法的聲明更簡單，直接在class中聲明方法即可，如:

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

⑦ @Component裝飾器的使用，@Component裝飾器就是用來標識當前這個類是一個Vue組件，@Component裝飾器還可以傳遞對象作為參數(shù)，這個傳遞的對象就是Vue組件實例，所以所有之前用js寫法的時候，Vue組件支持的所有選項都可以傳入，如:

@Component({
  // 這里可以配置Vue組件支持的各種選項
  components: {
    HelloWorld
  },
  data() {
    return {
     a:1
    }
  },
  methods: {
    say(){
     console.log("say");
    }
  }
})
export default class App extends Vue {
}

@Component內(nèi)容使用的是Vue.extend()方法，用于擴展Vue Component并生成Vue組件，這里需要注意的就是，Vue最終會將class中定義的屬性和@Component中定義的屬性進行合并，如果二者中定義了同名的屬性，那么class中的優(yōu)先級更高，即class中定義的會覆蓋掉@Component中定義的同名屬性，但是data除外，@Component中定義的同名的data數(shù)據(jù)會覆蓋掉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屬性的數(shù)據(jù)類型，必須在@Prop()裝飾器內(nèi)限定數(shù)據(jù)類型，否則無效

⑨ @Emit()裝飾器的使用，在子組件發(fā)射自定義事件的時候通常會通過this.$emit("say")的方式，但是typescript提供了一個@Emit()裝飾器，用于修飾一個方法，當這個方法被執(zhí)行的時候，就會在方法執(zhí)行完成后發(fā)射一個同方法名的事件出去，當然，這是在沒有給@Emit()傳遞參數(shù)的情況下，如果給@Emit()傳遞了參數(shù)，那么就會發(fā)射指定參數(shù)的事件，如:

export default class HelloWorld extends Vue {
  @Emit() // 在say()方法執(zhí)行完成后會發(fā)射一個同方法名的say事件
  public say() {
  }
  @Emit("speak") // 這里給@Emit()傳遞了參數(shù)，則會發(fā)射speak事件
  public say() {
  }
}

⑩ @Watch()裝飾器的使用，其擁有監(jiān)聽組件中數(shù)據(jù)的變化，就相當于$watch，需要給其傳遞一個字符串參數(shù)，表示其監(jiān)聽的是哪個數(shù)據(jù)的變化，如:

@Watch("foo") // 監(jiān)聽this.foo的變化
public add(newValue: number, oldValue: number) {
 console.log(`newValue is ${newValue}, oldValue is ${oldValue}`);
}

四、vuex中的變化

vuex中的數(shù)據(jù)是存放在state屬性上的，如果要限定state中數(shù)據(jù)的屬性和類型，那么我們必須在創(chuàng)建store對象的時候定義一個接口限定一下數(shù)據(jù)類型，如:

interface IState {
 lists: string[]
}
export default new Vuex.Store<IState>({
  state: {
    lists: ["vue"] // 定義了state的數(shù)據(jù)結(jié)構(gòu)，必須要有l(wèi)ists屬性，并且屬性值為string[]
  }
});

獲取vuex中的數(shù)據(jù)時候，還是可以通過this.$store.state.lists獲取到，但是我們也可以通過裝飾器獲取到，要使用vuex的裝飾器，我們需要安裝vuex-class，如:

import {State, Mutation, Action} from "vuex-class";
export default class App extends Vue {
  // 將從vuex中獲取到的lists數(shù)據(jù)保存到組件的lists屬性上
  @State("lists") public lists!: string[];
  @Mutation("say") // 在say()方法前修飾，當say()方法執(zhí)行的時候就會提交一個say mutation
  public say() {
   console.log("say1");
  }
  @Action("speak") // 在speak()方法前修飾，當speak()方法執(zhí)行的時候就會提交一個speak action
  public speak(){
  }
  public mounted () {
   this.say();
   this.speak();
  }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論