一、Vue項目初始化-引入typescript
使用typescript構建Vue應用和使用js一樣，都是通過vue-cli去初始化并創建一個vue項目，只不過使用typescript構建的時候要在腳手架問卷操作的時候勾選上typescript選項。
二、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文件詳解
三、.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及一些裝飾器@Componentexport 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}`);}四、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(); }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
