為什么要遷移至Typescript
我們提供的服務(wù)有:成都做網(wǎng)站、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、澄城ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的澄城網(wǎng)站制作公司
Javascript本身是動態(tài)弱類型的語言,這樣的特點(diǎn)導(dǎo)致了Javascript代碼中充斥著很多Uncaught TypeError的報(bào)錯(cuò),給開發(fā)調(diào)試和線上代碼穩(wěn)定都帶來了不小的負(fù)面影響。
而Typescript提供了靜態(tài)類型檢查,使很多類型錯(cuò)誤在編寫時(shí)就已經(jīng)發(fā)現(xiàn),不會帶到測試階段。
同時(shí),Javascript不定義model就可以使用一個(gè)對象,有人喜歡這樣的靈活性,的確這樣的語法在model不復(fù)雜的時(shí)候可以快速的開發(fā)出需要的功能,但一旦model龐大,找一個(gè)需要的屬性值都不知道從何找起。而在Typescript中,我們需要使用TS中的interface type等方式先定義出model,才可以調(diào)用其屬性值,所以Typescript極大的提高了代碼的可讀性。
可行性
因?yàn)門ypeScript是JavaScript的超集,TypeScript 不會阻止 JavaScript 的運(yùn)行,即使存在類型錯(cuò)誤也不例外,這能讓你的 JavaScript 逐步遷移至 TypeScript。所以可以慢慢地做遷移,一次遷移一個(gè)模塊,選擇一個(gè)模塊,重命名.js文件到.ts,在代碼中添加類型注釋。當(dāng)你完成這個(gè)模塊時(shí),選擇下一個(gè)模塊。
如何將已有的Vue項(xiàng)目遷移至Typescript
安裝依賴
Vue官方提供了一個(gè)庫Vue-class-component,用于讓我們使用Ts的類聲明方式來編寫vue組件代碼。Vue-property-decorator則是在Vue-class-component的基礎(chǔ)上提供了裝飾器的方式來編寫代碼。首先我們需要在package.json中引入這兩個(gè)依賴。
我的項(xiàng)目是基于vue-cli@3.X創(chuàng)建的,還需要在項(xiàng)目中引入@vue/cli-plugin-typescript typescript兩個(gè)依賴來完成Typescript的編譯。
配置tsconfig.json
在項(xiàng)目根目錄新建tsconfig.json,并引入以下代碼
{ "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "noFallthroughCasesInSwitch":true, "noImplicitAny":true, "noImplicitReturns":true, "noImplicitThis":true, "types": [ "webpack-env" ], "paths": { "@/*": [ "./app/common/*" ], "_app/*": [ "./app/*" ], "_c/*": [ "./app/common/components/*" ], "api/*": [ "./app/service/*" ], "assets/*": [ "./app/assets/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ], }, "include": [ // 在此出填寫你的項(xiàng)目中需要按照typescript編譯的文件路徑 "app/**/*.ts", "app/**/*.tsx", "app/**/*.d.ts", "app/**/*.vue", ], "exclude": [ "node_modules" ] }
特別需要注意的是,現(xiàn)在的vue項(xiàng)目中大多使用了webpack的alias來解析路徑,在tsconfig.json中需要配置path屬性,讓typescript同樣認(rèn)識在webpack中配置的路徑別名。
添加全局聲明文件
因?yàn)樵趖s文件中是無法識別vue文件的,所以需要在項(xiàng)目根目錄新建shims-vue.d.ts文件,添加以下代碼,來讓ts識別vue文件。
import Vue from 'vue'; declare module '*.vue' { export default Vue; }
由下而上的遷移
因?yàn)槭沁w移已經(jīng)存在的項(xiàng)目,不建議開始就把main.js重命名為main.ts,對于絕大多數(shù)Vue項(xiàng)目,main.js引入了太多的依賴,我們應(yīng)該首先從依賴著手,自下而上的遷移Typescript。對于項(xiàng)目中一些偏底層,甚至是框架維護(hù)者所提供的庫函數(shù),我們不關(guān)心其實(shí)現(xiàn)邏輯,所以沒有必要將其改寫為ts文件,只需要給其加聲明文件供我們的業(yè)務(wù)代碼調(diào)用即可。
在我的項(xiàng)目中,service層的邏輯非常簡單,僅僅是傳參數(shù)調(diào)用接口,沒有添加任何其他的邏輯,邏輯如此簡單其實(shí)沒有什么必要改寫為ts文件,所以我為service層的文件編寫聲明文件,來為調(diào)用service層的代碼提供類型聲明。
聲明文件編寫方法
一個(gè)js文件如下
//service.js import axios from '@/libs/api.request' export default { /** * 創(chuàng)建賬戶 * @param {Object} data * @param {String} data.accountType optinal * @param {String} data.username * @param {String} data.password * @param {String} data.gender X | F | M * @param {String} data.email * @param {Number} data.level */ createAccount(data) { return axios.request({ url: `/api/account/createUser`, method: 'post', data: data }).then((res) => [res, null]).catch((err) => [null, err]); }, }
可以看到,在使用typescript之前,對于一個(gè)函數(shù)的參數(shù)和返回值等信息的提示是通過jsdoc實(shí)現(xiàn)的,能夠在調(diào)用時(shí)確定參數(shù)類型及名稱,但jsdoc畢竟只是注釋,并不能提供類型校驗(yàn),所以在這里我們?yōu)槠渚帉懧暶魑募?,編寫后的聲明文件如?/p>
//service.d.ts interface createAccountParams { accountType?: string, username: string, password: string, gender: 'X' | 'F' | 'M', email: string, level?: number } interface createAccountReturn { userId: string, } export interface Service { createAccount(data: createAccountParams): createAccountReturn }
這樣一個(gè)service層的接口文件的聲明文件就編寫完成了,為了獲得Typescript和vscode提供的類型提示和校驗(yàn),在main.js中將service.js導(dǎo)出的實(shí)例綁定在了Vue原型上,使得我們可以在vue組件中通過vm.$service方便的訪問service實(shí)例。但是Typescript并不知道Vue實(shí)例上有什么屬性,這時(shí)需要我們在之前添加的shims-vue.d.ts文件中添加幾行代碼。
import Vue from 'vue'; import Service from "pathToService/service.d.ts"; declare module '*.vue' { export default Vue; } declare module "vue/types/vue" { interface Vue { $service: Service } }
得力于typescript中提供的模塊補(bǔ)充功能,我們可以在node_modules/vue/types/vue中補(bǔ)充我們需要在Vue上提供的屬性。
改寫Vue文件
我們需要將原來的vue文件改寫成使用vue-property-decorator編寫的方式。
<script lang="ts"> import {Component,Vue} from "vue-property-decorator"; @Component export default class MyComponent extends Vue{ // 聲明data form: { accountType?: string, username: string, password: string, gender: 'X' | 'F' | 'M', email: string, level?: number } = { username:'', password:'', gender:'X', email:'' }; // 聲明methods async submit(): void { //調(diào)用上面的service接口 const [res,err] = await this.$service.createAccount(this.form); } } </script>
至此一個(gè)Vue項(xiàng)目遷移至Typescript的過程就已經(jīng)完成了,剩下的工作就是將代碼中其他的文件一步步由js遷移到typescript中。
把方法綁定到Vue實(shí)例下
除了我們之前提到過的將自己編寫的service掛載到vue實(shí)例上,大家一定清楚在vue項(xiàng)目中,我們經(jīng)常會調(diào)用this.$refs this.$router this.$store等等,typescript也會檢查這些屬性是否被綁定在了vue實(shí)例上,那么我們并沒有在類型系統(tǒng)中聲明這些值,按道理應(yīng)該報(bào)Property '$refs' does not exist on type [your_component_name]
真相是vue vue-router vuex都已經(jīng)給我們聲明了相應(yīng)的類型,我們可以cd ./node_modules/vue/types/目錄中去查看
截取少量代碼如下所示:
export interface Vue { readonly $el: Element; readonly $options: ComponentOptions<Vue>; readonly $parent: Vue; readonly $root: Vue; readonly $children: Vue[]; readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[] }; readonly $slots: { [key: string]: VNode[] | undefined }; readonly $scopedSlots: { [key: string]: NormalizedScopedSlot | undefined }; readonly $isServer: boolean; readonly $data: Record<string, any>; readonly $props: Record<string, any>; readonly $ssrContext: any; readonly $vnode: VNode; readonly $attrs: Record<string, string>; readonly $listeners: Record<string, Function | Function[]>; }
只要正常的在依賴中安裝了vue-router vuex就已經(jīng)通過模塊補(bǔ)充的方式將類型添加到了vue實(shí)例上。
在一些項(xiàng)目中,vue-router vuex這些依賴不是通過安裝在依賴中引入的,而是通過index.html引入的cdn資源文件,這樣在開發(fā)過程中我們就無法獲取其類型。
這個(gè)時(shí)候我們可以通過安裝@types依賴的方式將類型系統(tǒng)補(bǔ)充到項(xiàng)目中,如npm install @types/jquery --save-dev。
不幸的是vue-router和vuex的types包已經(jīng)廢棄了,只能通過手動去github上下載對應(yīng)版本的vue-router vuex將types文件引入到項(xiàng)目中,你可以像我一樣在項(xiàng)目中新建一個(gè)types目錄,引入需要的類型聲明文件。
這樣就可以直接在vue實(shí)例上訪問到$store $router等屬性了。
同理當(dāng)你想要引入其他的組件庫上的一些類型文件時(shí),也是這樣的方式。
一些需要注意的問題
在vue開發(fā)過程中我們會使用this.$refs去訪問某一個(gè)具體實(shí)例的方法,但是這在ts中是訪問不到的常見的,比如要想要使用form組件中的validate方法,我們需要給其加上類型斷言this.$refs.form.validate()
變?yōu)?code>(this.$refs.form as Vue & {validate:Function}).validate()
來告訴編譯器this.$refs.form上有validate方法。
因?yàn)轭愋蛿嘌郧疤釛l件是是當(dāng) S 類型是 T 類型的子集,或者 T 類型是 S 類型的子集時(shí),S 能被成功斷言成 T,所以需要在類型斷言時(shí)合并Vue類型。
同時(shí)也可以通過vue-property-decorator提供給我們的裝飾器一勞永逸的將該refs添加到computed屬性上
import { Vue, Component, Ref } from 'vue-property-decorator' import Form from '@/path/to/another-component.vue' @Component export default class YourComponent extends Vue { @Ref() readonly form!: Form }
等同于
export default { computed() { form: { cache: false, get() { return this.$refs.form as Form } }, } }
這樣我們就可以通過 this.form.validate()來做表單校驗(yàn)了
新手容易遇到的一些問題
疑問1:interface和type有什么區(qū)別?
type 可以聲明基本類型別名,聯(lián)合類型,元組等類型
eg.type a = string;是被允許的,
interface 會自動聲明合并
interface person{ gender:string age:number } interface person{ name:string }
疑問2: 錯(cuò)誤 Property 'hideContent' has no initializer and is not definitely assigned in the constructor.
strictPropertyInitialization屬性會在strict設(shè)置為true時(shí)自動被設(shè)置為true。
但這個(gè)屬性并不合理,它要求每個(gè)實(shí)例的屬性都有初始值,我們在tsconfig將其設(shè)置為false就好了。
疑問3: 賦值兼容性
interface person { name:string age:number } interface student { name:string age:number stuid:string } let person: person= { name:'name', age:1 } let student: student = { name:'name', age:1, stuid:'stuid' }; person = student //這樣是可以的 student = person //這樣不允許
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
分享標(biāo)題:詳解Vue2.5+遷移至Typescript指南
瀏覽地址:http://muchs.cn/article6/jpioig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護(hù)、服務(wù)器托管、網(wǎng)站導(dǎo)航、靜態(tài)網(wǎng)站、定制網(wǎng)站、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)