vue項(xiàng)目中使用ts（typescript）入門教程
最近項(xiàng)目需要將原vue項(xiàng)目結(jié)合ts的使用進(jìn)行改造，這個(gè)后面應(yīng)該是中大型項(xiàng)目的發(fā)展趨勢，看到一篇不錯(cuò)的入門教程，結(jié)合它并進(jìn)行了一點(diǎn)拓展記錄之。本文從安裝到vue組件編寫進(jìn)行了說明，適合入門。
1、引入Typescript
npm install vue-class-component vue-property-decorator --save npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
vue-class-component：擴(kuò)展vue支持typescript，將原有的vue語法通過聲明的方式來支持ts
vue-property-decorator：基于vue-class-component擴(kuò)展更多裝飾器
ts-loader：讓webpack能夠識別ts文件
tslint-loader：tslint用來約束文件編碼
tslint-config-standard： tslint 配置 standard風(fēng)格的約束
2、配置文件webpack配置
根據(jù)項(xiàng)目的不同配置的地方不同，如果是vue cli 3.0創(chuàng)建的項(xiàng)目需要在vue.config.js中配置，如果是3.0以下版本的話，需要webpack.base.conf中配置。(以下說明是在webpack.base.conf文件中更改)
在resolve.extensions中增加.ts，目的是在代碼中引入ts文件不用寫.ts后綴
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {}
}
在module.rules中增加ts的rules
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
]
}
tsconfig.json配置
ts-loader會檢索文件中的tsconfig.json.以其中的規(guī)則來解析ts文件，詳細(xì)的配置可以參考https://www.tslang.cn/docs/handbook/tsconfig-json.html
貼上測試項(xiàng)目tsconfig.json文件
{
// 編譯選項(xiàng)
"compilerOptions": {
// 輸出目錄
"outDir": "./output",
// 是否包含可以用于 debug 的 sourceMap
"sourceMap": true,
// 以嚴(yán)格模式解析
"strict": false,
// 采用的模塊系統(tǒng)
"module": "esnext",
// 如何處理模塊
"moduleResolution": "node",
// 編譯輸出目標(biāo) ES 版本
"target": "es5",
// 允許從沒有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入
"allowSyntheticDefaultImports": true,
// 將每個(gè)文件作為單獨(dú)的模塊
"isolatedModules": false,
// 啟用裝飾器
"experimentalDecorators": true,
// 啟用設(shè)計(jì)類型元數(shù)據(jù)（用于反射）
"emitDecoratorMetadata": true,
// 在表達(dá)式和聲明上有隱含的any類型時(shí)報(bào)錯(cuò)
"noImplicitAny": false,
// 不是函數(shù)的所有返回路徑都有返回值時(shí)報(bào)錯(cuò)。
"noImplicitReturns": true,
// 從 tslib 導(dǎo)入外部幫助庫: 比如__extends，__rest等
"importHelpers": true,
// 編譯過程中打印文件名
"listFiles": true,
// 移除注釋
"removeComments": true,
"suppressImplicitAnyIndexErrors": true,
// 允許編譯javascript文件
"allowJs": true,
// 解析非相對模塊名的基準(zhǔn)目錄
"baseUrl": "./",
// 指定特殊模塊的路徑
"paths": {
"jquery": [
"node_modules/jquery/dist/jquery"
]
},
// 編譯過程中需要引入的庫文件的列表
"lib": [
"dom",
"es2015",
"es2015.promise"
]
}
}
tslint.json配置
在目錄中新增tslint.json文件，由于我們前面安裝了tslint-config-standard，所以可以直接用tslint-config-standard中規(guī)則，文件如下:
{
"extends": "tslint-config-standard",
"globals": {
"require": true
}
}
3、讓項(xiàng)目識別.ts
由于 TypeScript 默認(rèn)并不支持 *.vue 后綴的文件，所以在 vue 項(xiàng)目中引入的時(shí)候需要?jiǎng)?chuàng)建一個(gè) vue-shim.d.ts 文件，放在根目錄下
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
4、vue組件的編寫
vue組件里大多數(shù)的方法改成通過@xxx（裝飾器）來表明當(dāng)前定義的為什么數(shù)據(jù)，類似ng中的注入。而業(yè)務(wù)邏輯js的部分就可以直接采用ts的寫法了。
基本寫法
模板template和樣式style的寫法不變，script的模塊進(jìn)行了改變，基本寫法如下：
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Test extends Vue {
};
</script>
lang="ts"：script張聲明下當(dāng)前的語言是ts@Component：注明此類為一個(gè)vue組件export default class Test extends Vue： export當(dāng)前組件類是繼承vue的
data()中定義數(shù)據(jù)
data中的數(shù)據(jù)由原來的data()方法改成直接在對象中定義
export default class Test extends Vue {
public message1: string = "heimayu";
public message2: string = "真好看";
}
props傳值
props的話就沒有data那么舒服了，因?yàn)樗枰褂醚b飾器了，寫法如下
@Prop() propA:string @Prop() propB:number
$emit傳值
不帶參數(shù)
// 原來寫法：this.$emit('bindSend')
// 現(xiàn)在直接寫 this.bindSend()
// 多個(gè)定義
@Emit()
bindSend():string{
return this.message
}
方法帶參數(shù)
// 原來寫法：this.$emit('bindSend', msg)
// 現(xiàn)在直接寫： this.bindSend(msg)
// 多個(gè)下面的定義
@Emit()
bindSend(msg:string){
// to do something
}
emit帶參數(shù)
// 這里的test是改變組件引用的@事件名稱這時(shí)候要寫@test 而不是@bindSend2
@Emit('test)
private bindSend2(){
}
watch觀察數(shù)據(jù)
// 原來的寫法 watch:{}
@Watch('propA',{
deep:true
})
test(newValue:string,oldValue:string){
console.log('propA值改變了' + newValue);
}
computed計(jì)算屬性
public get computedMsg(){
return '這里是計(jì)算屬性' + this.message;
}
public set computedMsg(message:string){
}
完整代碼案例
<template>
<div class="test-container">
{{message}}
<input type="button" value="點(diǎn)擊觸發(fā)父級方法" @click="bindSend"/>
<input type="button" value="點(diǎn)擊觸發(fā)父級方法" @click="handleSend"/>
<input type="button" value="點(diǎn)擊觸發(fā)父級方法" @click="bindSend2"/>
<!-- <Hello></Hello> -->
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import Hello from "./HelloWorld.vue";
// 注明此類為一個(gè)vue組件
@Component({
components: {
Hello
}
})
export default class Test extends Vue {
// 原有data中的數(shù)據(jù)在這里展開編寫
public message: string = "asd";
//原有props中的數(shù)據(jù)展開編寫
@Prop({
type: Number,
default: 1,
required: false
})
propA?: number
@Prop()
propB:string
//原有computed
public get computedMsg(){
return '這里是計(jì)算屬性' + this.message;
}
public set computedMsg(message:string){
}
//原有的watch屬性
@Watch('propA',{
deep:true
})
public test(newValue:string,oldValue:string){
console.log('propA值改變了' + newValue);
}
// 以前需要給父級傳值的時(shí)候直接方法中使用emit就行了，當(dāng)前需要通過emit來處理
@Emit()
private bindSend():string{
return this.message
}
@Emit()
private bindSend1(msg:string,love:string){
// 如果不處理可以不寫下面的，會自動將參數(shù)回傳
// msg += 'love';
// return msg;
}
//原有放在methods中的方法平鋪出來
public handleSend():void {
this.bindSend1(this.message,'love');
}
// 這里的emit中的參數(shù)是表明父級通過什么接受，類似以前的$emit('父級定義的方法')
@Emit('test')
private bindSend2(){
return '這個(gè)可以用test接受';
}
}
</script>
到此這篇關(guān)于vue項(xiàng)目中使用ts（typescript）入門教程 的文章就介紹到這了,更多相關(guān)vue typescript入門內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
去除Element-Plus下拉菜單邊框的實(shí)現(xiàn)步驟
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的組件庫,在使用 Element-Plus 進(jìn)行開發(fā)時(shí),我們可能會遇到需要自定義組件樣式的情況,本文將介紹如何使用 CSS 來去除 Element-Plus 下拉框的邊框,需要的朋友可以參考下2024-03-03
vue如何使用js對圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)
這篇文章主要介紹了vue如何使用js對圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue-amap根據(jù)地址回顯地圖并mark的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue實(shí)現(xiàn)彈幕功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
這篇文章主要介紹了Vue引入sass并配置全局變量的方法2018-06-06
Vue+Echarts實(shí)現(xiàn)繪制動態(tài)折線圖
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制動態(tài)折線圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例
下面小編就為大家分享一篇vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了.vue?組件打包成?.js的操作方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
vue?element-plus圖片預(yù)覽實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue?element-plus圖片預(yù)覽實(shí)現(xiàn)的相關(guān)資料,最近的項(xiàng)目中有圖片預(yù)覽的場景,也是踩了一些坑,在這里總結(jié)一下,需要的朋友可以參考下2023-07-07
Vue全局loading及錯(cuò)誤提示的思路與實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于Vue全局loading及錯(cuò)誤提示的思路與實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08