溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、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及一些裝飾器
@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}`);
}
四、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();
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
