TypeScript在Vue中的嘗試

2021-09-10 23:32:00 字數 1709 閱讀 8938

vue官方文件中,對typescript做支援,目前我們可以使用typescript的語法,進行vue專案的開發。

這個外掛程式是vue官方維護的外掛程式,目前支援基於class的語法規則。

1、直接在類中申明data資料。

舊的方式:

export default 

}}

使用class的方式

import component from 'vue-class-component'

@component({});

export default class login extends vue

2、props屬性

舊的方式,對props的使用:

export default
使用class的方式,直接在修飾器中進行申明:

import component from 'vue-class-component'

@component(

});export default class login extends vue

3、元件的普通函式、週期函式問題

舊的元件描述的方式中,週期函式直接寫在元件屬性上,而普通函式,則是寫在元件的methods屬性中,統一管理。

export default ,

methods:

}}

在class方式的類中,無論是鉤子函式,還是普通函式,一律是class的成員函式中:

@component

export default class login extends vue

getuserinfo: function()

}

4、計算屬性問題

舊的方式中,計算屬性專門在computed屬性中來實現。

export default 

}, computed:

}}

在class的方式中,使用getter、setter的方式,來實現computed的操作。

@component

export default class login extends vue

}

5、關於混入mixins

就的方式的混入,是提前定義好混入物件。

let mymixin = 	}}

export default

使用class的方式,是直接定義乙個混入類。

import vue from 'vue';

import component, from 'vue-class-component';

@component

class mymixins extends vue

export default class login extends mixin(mymixins)

}

1、雖然這樣的方式,解決了大部分的vue專案開發的問題,但是假如我們想操作dom,一般使用的是ref的方式,但是class的方式是不支援直接訪問ref所代表的dom的。所以這樣的方式,還是有不足的地方。

2、typescript的方式,支援的型別校驗,在vue的元件中,沒有體現出來,這也是vue本身的不足之處。

在vue新專案中用TypeScript 配置篇

npm install typescript ts loader tslint tslint loader tslint config standard vue property decorator vue class component可參考typescript vue start include...

typescript在react元件中的使用

typescript中文文件 布林值 let istrue boolean false 數字 let num number 4 字串 let name string boble 陣列 let arr number 1,2,3,4 let arrs array 注意 內部表示陣列item的屬性,可以設...

單例模式在TypeScript中的應用

在oop程式設計中,是用來解決特定問題的總結 最佳實踐 設計模式 23種 擴充套件 資料結構和演算法,與語言無關 構建模式 建立物件,單例,工廠,構建 行為模式 命令,觀察者 mvvm 結構模式 多個元件的關係 mvc架構,熟悉物件導向程式設計是設計模式的基礎 單例模式 singleton模式 類是...