當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

Vue.js TypeScript 支持

發(fā)布時(shí)間：2025/3/21 vue 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue.js TypeScript 支持小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

TypeScript 支持

在 Vue 2.5.0 中，我們大大改進(jìn)了類型聲明以更好地使用默認(rèn)的基于對(duì)象的 API。同時(shí)此版本也引入了一些其它變化，需要開發(fā)者作出相應(yīng)的升級(jí)。閱讀博客文章了解更多詳情。

發(fā)布為 NPM 包的官方聲明文件

靜態(tài)類型系統(tǒng)能幫助你有效防止許多潛在的運(yùn)行時(shí)錯(cuò)誤，而且隨著你的應(yīng)用日漸豐滿會(huì)更加顯著。這就是為什么 Vue 不僅僅為 Vue core 提供了針對(duì)?TypeScript?的官方類型聲明，還為?Vue Router?和?Vuex?也提供了相應(yīng)的聲明文件。

而且，我們已經(jīng)把它們發(fā)布到了 NPM，最新版本的 TypeScript 也知道該如何自己從 NPM 包里解析類型聲明。這意味著只要你成功地通過(guò) NPM 安裝了，就不再需要任何額外的工具輔助，即可在 Vue 中使用 TypeScript 了。

開發(fā)工具鏈

工程創(chuàng)建

Vue CLI 3?可以使用 TypeScript 生成新工程。創(chuàng)建方式：

# 1. 如果沒有安裝 Vue CLI 就先安裝 npm install --global @vue/cli# 2. 創(chuàng)建一個(gè)新工程，并選擇 "Manually select features (手動(dòng)選擇特性)" 選項(xiàng) vue create my-project-name

編輯器支持

要使用 TypeScript 開發(fā) Vue 應(yīng)用程序，我們強(qiáng)烈建議您使用?Visual Studio Code，它為 TypeScript 提供了極好的“開箱即用”支持。如果你正在使用單文件組件?(SFC), 可以安裝提供 SFC 支持以及其他更多實(shí)用功能的?Vetur 插件。

WebStorm?同樣為 TypeScript 和 Vue 提供了“開箱即用”的支持。

基本用法

要讓 TypeScript 正確推斷 Vue 組件選項(xiàng)中的類型，您需要使用?Vue.component?或?Vue.extend?定義組件：

import Vue from 'vue' const Component = Vue.extend({// 類型推斷已啟用 })const Component = {// 這里不會(huì)有類型推斷，// 因?yàn)門ypeScript不能確認(rèn)這是Vue組件的選項(xiàng) }

基于類的 Vue 組件

如果您在聲明組件時(shí)更喜歡基于類的 API，則可以使用官方維護(hù)的?vue-class-component?裝飾器：

import Vue from 'vue' import Component from 'vue-class-component'// @Component 修飾符注明了此類為一個(gè) Vue 組件 @Component({// 所有的組件選項(xiàng)都可以放在這里template: '<button @click="onClick">Click!</button>' }) export default class MyComponent extends Vue {// 初始數(shù)據(jù)可以直接聲明為實(shí)例的屬性message: string = 'Hello!'// 組件方法也可以直接聲明為實(shí)例的方法onClick (): void {window.alert(this.message)} }

增強(qiáng)類型以配合插件使用

插件可以增加 Vue 的全局/實(shí)例屬性和組件選項(xiàng)。在這些情況下，在 TypeScript 中制作插件需要類型聲明。慶幸的是，TypeScript 有一個(gè)特性來(lái)補(bǔ)充現(xiàn)有的類型，叫做模塊補(bǔ)充 (module augmentation)。

例如，聲明一個(gè)?string?類型的實(shí)例屬性?$myProperty：

// 1. 確保在聲明補(bǔ)充的類型之前導(dǎo)入 'vue' import Vue from 'vue'// 2. 定制一個(gè)文件，設(shè)置你想要補(bǔ)充的類型 // 在 types/vue.d.ts 里 Vue 有構(gòu)造函數(shù)類型 declare module 'vue/types/vue' { // 3. 聲明為 Vue 補(bǔ)充的東西interface Vue {$myProperty: string} }

在你的項(xiàng)目中包含了上述作為聲明文件的代碼之后 (像?my-property.d.ts)，你就可以在 Vue 實(shí)例上使用?$myProperty?了。

var vm = new Vue() console.log(vm.$myProperty) // 將會(huì)順利編譯通過(guò)

你也可以聲明額外的屬性和組件選項(xiàng)：

import Vue from 'vue'declare module 'vue/types/vue' {// 可以使用 `VueConstructor` 接口// 來(lái)聲明全局屬性interface VueConstructor {$myGlobal: string} }// ComponentOptions 聲明于 types/options.d.ts 之中 declare module 'vue/types/options' {interface ComponentOptions<V extends Vue> {myOption?: string} }

上述的聲明允許下面的代碼順利編譯通過(guò)：

// 全局屬性 console.log(Vue.$myGlobal)// 額外的組件選項(xiàng) var vm = new Vue({myOption: 'Hello' })

標(biāo)注返回值

因?yàn)?Vue 的聲明文件天生就具有循環(huán)性，TypeScript 可能在推斷某個(gè)方法的類型的時(shí)候存在困難。因此，你可能需要在?render?或?computed?里的方法上標(biāo)注返回值。

import Vue, { VNode } from 'vue'const Component = Vue.extend({data () {return {msg: 'Hello'}},methods: {// 需要標(biāo)注有 `this` 參與運(yùn)算的返回值類型greet (): string {return this.msg + ' world'}},computed: {// 需要標(biāo)注greeting(): string {return this.greet() + '!'}},// `createElement` 是可推導(dǎo)的，但是 `render` 需要返回值類型render (createElement): VNode {return createElement('div', this.greeting)} })

如果你發(fā)現(xiàn)類型推導(dǎo)或成員補(bǔ)齊不工作了，標(biāo)注某個(gè)方法也許可以幫助你解決這個(gè)問(wèn)題。使用?--noImplicitAny?選項(xiàng)將會(huì)幫助你找到這些未標(biāo)注的方法。

from:?https://cn.vuejs.org/v2/guide/typescript.html

總結(jié)

以上是生活随笔為你收集整理的Vue.js TypeScript 支持的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。