Vue-cli3中使用TS語(yǔ)法示例代碼
目錄
- ts有什么用?
- 為什么用ts?
- 1、引入Typescript包
- 2、配置
- 3、讓項(xiàng)目識(shí)別.ts
- 4、vue組件的編寫(xiě)
ts有什么用?
類型檢查、直接編譯到原生js、引入新的語(yǔ)法糖
為什么用ts?
TypeScript的設(shè)計(jì)目的應(yīng)該是解決JavaScript的“痛點(diǎn)”:弱類型和沒(méi)有命名空間,導(dǎo)致很難模塊化,不適合開(kāi)發(fā)大型程序。另外它還提供了一些語(yǔ)法糖來(lái)幫助大家更方便地實(shí)踐面向?qū)ο蟮木幊獭?/p>
typescript不僅可以約束我們的編碼習(xí)慣,還能起到注釋的作用,當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法,需要傳什么值,返回值是什么類型一目了然,對(duì)大型項(xiàng)目的維護(hù)性有很大的提升。也不至于使開(kāi)發(fā)者搬起石頭砸自己的腳。
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語(yǔ)法通過(guò)聲明的方式來(lái)支持tsvue-property-decorator
:基于vue-class-component擴(kuò)展更多裝飾器ts-loader
:讓webpack能夠識(shí)別ts文件tslint-loader
:tslint用來(lái)約束文件編碼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中配置。(以下說(shuō)明是在webpack.base.conf文件中更改)
2.1 在webpack.base.conf文件中更改
2.1.1. 在resolve.extensions中增加.ts,目的是在代碼中引入ts文件不用寫(xiě).ts后綴
resolve: { extensions: [".js", ".vue", ".json", ".ts"], alias: {} }
2.2.2. 在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$/] } } ] }
2.2.3. tsconfig.json配置
ts-loader會(huì)檢索文件中的tsconfig.json.以其中的規(guī)則來(lái)解析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", // 允許從沒(méi)有設(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)入外部幫助庫(kù): 比如__extends,__rest等 "importHelpers": true, // 編譯過(guò)程中打印文件名 "listFiles": true, // 移除注釋 "removeComments": true, "suppressImplicitAnyIndexErrors": true, // 允許編譯javascript文件 "allowJs": true, // 解析非相對(duì)模塊名的基準(zhǔn)目錄 "baseUrl": "./", // 指定特殊模塊的路徑 "paths": { "jquery": [ "node_modules/jquery/dist/jquery" ] }, // 編譯過(guò)程中需要引入的庫(kù)文件的列表 "lib": [ "dom", "es2015", "es2015.promise" ] } }
2.2.4. tslint.json配置
在目錄中新增tslint.json文件,由于我們前面安裝了tslint-config-standard,所以可以直接用tslint-config-standard中規(guī)則,文件如下:
{ "extends": "tslint-config-standard", "globals": { "require": true } }
2.2 在vue.config.js文件中更改以下代碼即可
configureWebpack: { resolve: { extensions: [".ts", ".tsx", ".js", ".json"], alias: {} }, module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } } ] } },
3、讓項(xiàng)目識(shí)別.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組件的編寫(xiě)
vue組件里大多數(shù)的方法改成通過(guò)@xxx(裝飾器)來(lái)表明當(dāng)前定義的為什么數(shù)據(jù)。業(yè)務(wù)邏輯js的部分就可以直接采用ts的寫(xiě)法了。
基本寫(xiě)法
模板template
和樣式style
的寫(xiě)法不變,script
的模塊進(jìn)行了改變,寫(xiě)法如下:
<script lang="ts"> import { Component, Vue } from "vue-property-decorator"; @Component export default class Test extends Vue { }; </script>
lang="ts"
:script
聲明當(dāng)前語(yǔ)言是ts
@Component
:注明此類為一個(gè)vue組件export default class Test extends Vue
: export當(dāng)前組件類是繼承vue的
data()中定義數(shù)據(jù)
data中的數(shù)據(jù)由原來(lái)的data()
方法改成直接在對(duì)象中定義
export default class Test extends Vue { public message1: string = "heimayu"; public message2: string = "真好看"; }
生命周期
// 生命周期 private created(){ this.init(); }
方法
private init(){ console.log("halo"); }
props傳值
props的話就沒(méi)有data那么舒服了,因?yàn)樗枰褂醚b飾器了,寫(xiě)法如下
@Prop() propA:string @Prop() propB:number
$emit傳值
不帶參數(shù)
// 原來(lái)寫(xiě)法:this.$emit("bindSend") // 現(xiàn)在直接寫(xiě) this.bindSend() // 多個(gè)定義 @Emit() bindSend():string{ return this.message }
方法帶參數(shù)
// 原來(lái)寫(xiě)法:this.$emit("bindSend", msg) // 現(xiàn)在直接寫(xiě): this.bindSend(msg) // 多個(gè)下面的定義 @Emit() bindSend(msg:string){ // to do something }
emit帶參數(shù)
// 這里的test是改變組件引用的@事件名稱這時(shí)候要寫(xiě)@test 而不是@bindSend2 @Emit("test") private bindSend2(){ return "這個(gè)可以用test接受"; }
watch觀察數(shù)據(jù)
// 原來(lái)的寫(xiě)法 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> {{message}} <input type="button" value="點(diǎn)擊觸發(fā)父級(jí)方法" @click="bindSend"/> <input type="button" value="點(diǎn)擊觸發(fā)父級(jí)方法" @click="handleSend"/> <input type="button" value="點(diǎn)擊觸發(fā)父級(jí)方法" @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ù)在這里展開(kāi)編寫(xiě) public message: string = "asd"; //原有props中的數(shù)據(jù)展開(kāi)編寫(xiě) @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); } // 以前需要給父級(jí)傳值的時(shí)候直接方法中使用emit就行了,當(dāng)前需要通過(guò)emit來(lái)處理 @Emit() private bindSend():string{ return this.message } @Emit() private bindSend1(msg:string,love:string){ // 如果不處理可以不寫(xiě)下面的,會(huì)自動(dòng)將參數(shù)回傳 // msg += "love"; // return msg; } //原有放在methods中的方法平鋪出來(lái) public handleSend():void { this.bindSend1(this.message,"love"); } // 這里的emit中的參數(shù)是表明父級(jí)通過(guò)什么接受,類似以前的$emit("父級(jí)定義的方法") @Emit("test") private bindSend2(){ return "這個(gè)可以用test接受"; } } </script>
到此這篇關(guān)于Vue-cli3中使用TS語(yǔ)法示例代碼的文章就介紹到這了,更多相關(guān)Vue-cli3使用TS語(yǔ)法內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持!
