国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue2.5+遷移至Typescript指南

wenshi11019 / 2871人閱讀

摘要:遷移至指南為什么要遷移至本身是動態弱類型的語言,這樣的特點導致了代碼中充斥著很多的報錯,給開發調試和線上代碼穩定都帶來了不小的負面影響。可行性因為是的超集,不會阻止的運行,即使存在類型錯誤也不例外,這能讓你的逐步遷移至。

Vue2.5+遷移至Typescript指南 為什么要遷移至Typescript

Javascript本身是動態弱類型的語言,這樣的特點導致了Javascript代碼中充斥著很多Uncaught TypeError的報錯,給開發調試和線上代碼穩定都帶來了不小的負面影響。
而Typescript提供了靜態類型檢查,使很多類型錯誤在編寫時就已經發現,不會帶到測試階段。
同時,Javascript不定義model就可以使用一個對象,有人喜歡這樣的靈活性,的確這樣的語法在model不復雜的時候可以快速的開發出需要的功能,但一旦model龐大,找一個需要的屬性值都不知道從何找起。而在Typescript中,我們需要使用TS中的interface type等方式先定義出model,才可以調用其屬性值,所以Typescript極大的提高了代碼的可讀性。

可行性

因為TypeScript是JavaScript的超集,TypeScript 不會阻止 JavaScript 的運行,即使存在類型錯誤也不例外,這能讓你的 JavaScript 逐步遷移至 TypeScript。所以可以慢慢地做遷移,一次遷移一個模塊,選擇一個模塊,重命名.js文件到.ts,在代碼中添加類型注釋。當你完成這個模塊時,選擇下一個模塊。

如何將已有的Vue項目遷移至Typescript 安裝依賴

Vue官方提供了一個庫Vue-class-component,用于讓我們使用Ts的類聲明方式來編寫vue組件代碼。Vue-property-decorator則是在Vue-class-component的基礎上提供了裝飾器的方式來編寫代碼。首先我們需要在package.json中引入這兩個依賴。

我的項目是基于vue-cli@3.X創建的,還需要在項目中引入@vue/cli-plugin-typescript typescript兩個依賴來完成Typescript的編譯。

配置tsconfig.json

在項目根目錄新建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": [      //  在此出填寫你的項目中需要按照typescript編譯的文件路徑
    "app/**/*.ts",
    "app/**/*.tsx",
    "app/**/*.d.ts",
    "app/**/*.vue",
  ],
  "exclude": [
    "node_modules"
  ]
}

特別需要注意的是,現在的vue項目中大多使用了webpackalias來解析路徑,在tsconfig.json中需要配置path屬性,讓typescript同樣認識在webpack中配置的路徑別名。

添加全局聲明文件

因為在ts文件中是無法識別vue文件的,所以需要在項目根目錄新建shims-vue.d.ts文件,添加以下代碼,來讓ts識別vue文件。

import Vue from "vue";

declare module "*.vue" {
  export default Vue;
}
由下而上的遷移

因為是遷移已經存在的項目,不建議開始就把main.js重命名為main.ts,對于絕大多數Vue項目,main.js引入了太多的依賴,我們應該首先從依賴著手,自下而上的遷移Typescript。對于項目中一些偏底層,甚至是框架維護者所提供的庫函數,我們不關心其實現邏輯,所以沒有必要將其改寫為ts文件,只需要給其加聲明文件供我們的業務代碼調用即可。

在我的項目中,service層的邏輯非常簡單,僅僅是傳參數調用接口,沒有添加任何其他的邏輯,邏輯如此簡單其實沒有什么必要改寫為ts文件,所以我為service層的文件編寫聲明文件,來為調用service層的代碼提供類型聲明。

聲明文件編寫方法

一個js文件如下

//service.js
import axios from "@/libs/api.request"
export default {
    /**
     * 創建賬戶
     * @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之前,對于一個函數的參數和返回值等信息的提示是通過jsdoc實現的,能夠在調用時確定參數類型及名稱,但jsdoc畢竟只是注釋,并不能提供類型校驗,所以在這里我們為其編寫聲明文件,編寫后的聲明文件如下

//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
}

這樣一個service層的接口文件的聲明文件就編寫完成了,為了獲得Typescript和vscode提供的類型提示和校驗,在main.js中將service.js導出的實例綁定在了Vue原型上,使得我們可以在vue組件中通過vm.$service方便的訪問service實例。但是Typescript并不知道Vue實例上有什么屬性,這時需要我們在之前添加的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中提供的模塊補充功能,我們可以在node_modules/vue/types/vue中補充我們需要在Vue上提供的屬性。

改寫Vue文件

我們需要將原來的vue文件改寫成使用vue-property-decorator編寫的方式。

至此一個Vue項目遷移至Typescript的過程就已經完成了,剩下的工作就是將代碼中其他的文件一步步由js遷移到typescript中。

把方法綁定到Vue實例下

除了我們之前提到過的將自己編寫的service掛載到vue實例上,大家一定清楚在vue項目中,我們經常會調用this.$refs this.$router this.$store等等,typescript也會檢查這些屬性是否被綁定在了vue實例上,那么我們并沒有在類型系統中聲明這些值,按道理應該報Property "$refs" does not exist on type [your_component_name]
真相是vue vue-router vuex都已經給我們聲明了相應的類型,我們可以cd ./node_modules/vue/types/目錄中去查看
截取少量代碼如下所示:

export interface Vue {
  readonly $el: Element;
  readonly $options: ComponentOptions;
  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;
  readonly $props: Record;
  readonly $ssrContext: any;
  readonly $vnode: VNode;
  readonly $attrs: Record;
  readonly $listeners: Record;
}

只要正常的在依賴中安裝了vue-router vuex就已經通過模塊補充的方式將類型添加到了vue實例上。

在一些項目中,vue-router vuex這些依賴不是通過安裝在依賴中引入的,而是通過index.html引入的cdn資源文件,這樣在開發過程中我們就無法獲取其類型。
這個時候我們可以通過安裝@types依賴的方式將類型系統補充到項目中,如npm install @types/jquery --save-dev
不幸的是vue-routervuex的types包已經廢棄了,只能通過手動去github上下載對應版本的vue-router vuex將types文件引入到項目中,你可以像我一樣在項目中新建一個types目錄,引入需要的類型聲明文件。

這樣就可以直接在vue實例上訪問到$store $router等屬性了。
同理當你想要引入其他的組件庫上的一些類型文件時,也是這樣的方式。

一些需要注意的問題

在vue開發過程中我們會使用this.$refs去訪問某一個具體實例的方法,但是這在ts中是訪問不到的
常見的,比如要想要使用form組件中的validate方法,我們需要給其加上類型斷言
this.$refs.form.validate()變為(this.$refs.form as Vue & {validate:Function}).validate()
來告訴編譯器this.$refs.form上有validate方法。
因為類型斷言前提條件是是當 S 類型是 T 類型的子集,或者 T 類型是 S 類型的子集時,S 能被成功斷言成 T,所以需要在類型斷言時合并Vue類型。

同時也可以通過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()來做表單校驗了

新手容易遇到的一些問題 疑問1:interface和type有什么區別?

type 可以聲明基本類型別名,聯合類型,元組等類型

eg.type a = string;是被允許的,

interface 會自動聲明合并

interface person{
    gender:string
    age:number
}
interface person{
    name:string
}
疑問2: 錯誤 Property "hideContent" has no initializer and is not definitely assigned in the constructor.

strictPropertyInitialization屬性會在strict設置為true時自動被設置為true
但這個屬性并不合理,它要求每個實例的屬性都有初始值,我們在tsconfig將其設置為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  //這樣不允許
未完待續,歡迎補充

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54279.html

相關文章

  • Vue2.5+遷移Typescript指南

    摘要:遷移至指南為什么要遷移至本身是動態弱類型的語言,這樣的特點導致了代碼中充斥著很多的報錯,給開發調試和線上代碼穩定都帶來了不小的負面影響。可行性因為是的超集,不會阻止的運行,即使存在類型錯誤也不例外,這能讓你的逐步遷移至。 Vue2.5+遷移至Typescript指南 為什么要遷移至Typescript Javascript本身是動態弱類型的語言,這樣的特點導致了Javascript代...

    Ilikewhite 評論0 收藏0
  • Vue2.5+ Typescript 引入全面指南

    摘要:引入全面指南系列目錄引入全面指南引入全面指南篇寫在前面寫這篇文章時的我,使用經驗三個多月,完全空白,花了大概三個晚上把手頭項目遷移至,因此這篇文章更像個入門指引。見文章引入全面指南篇完整代碼見庫,分支為整合示例,分支為不含的基礎示例。 Vue2.5+ Typescript 引入全面指南 系列目錄: Vue2.5+ Typescript 引入全面指南 Vue2.5+ Typescrip...

    liangzai_cool 評論0 收藏0
  • 前方來報,八月最新資訊--關于vue2&3的最佳文章推薦

    摘要:哪吒別人的看法都是狗屁,你是誰只有你自己說了才算,這是爹教我的道理。哪吒去他個鳥命我命由我,不由天是魔是仙,我自己決定哪吒白白搭上一條人命,你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運,我不曉得。我只曉得,不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...

    izhuhaodev 評論0 收藏0
  • Vue2.5+ Typescript 引入全面指南 - Vuex篇

    摘要:引入全面指南篇系列目錄引入全面指南引入全面指南篇前言正是我下決心引入的核心痛點。其中,可以通過建立輔助函數形式,簡單繞開。只是類型均為建議不使用,以明確指定類型及調用可通過上述下輔助函數,手動開啟類型推導及類型推導,暫時只能手動指定。 Vue2.5+ Typescript 引入全面指南 - Vuex篇 系列目錄: Vue2.5+ Typescript 引入全面指南 Vue2.5+ T...

    DataPipeline 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<