當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue CLI 3 可以使用 TypeScript 生成新工程

發布時間：2025/3/8 vue 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue CLI 3 可以使用 TypeScript 生成新工程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

TypeScript 支持

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

發布為 NPM 包的官方聲明文件

靜態類型系統能幫助你有效防止許多潛在的運行時錯誤，而且隨著你的應用日漸豐滿會更加顯著。這就是為什么 Vue 不僅僅為 Vue core 提供了針對?TypeScript?的官方類型聲明，還為?Vue Router?和?Vuex?也提供了相應的聲明文件。

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

開發工具鏈

工程創建

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

# 1. 如果沒有安裝 Vue CLI 就先安裝
npm install --global @vue/cli

# 2. 創建一個新工程，并選擇 "Manually select features (手動選擇特性)" 選項
vue create my-project-name

編輯器支持

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

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

基本用法

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

import Vue from 'vue'
const Component = Vue.extend({
// 類型推斷已啟用
})

const Component = {
// 這里不會有類型推斷，
// 因為TypeScript不能確認這是Vue組件的選項
}

基于類的 Vue 組件

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

import Vue from 'vue'
import Component from 'vue-class-component'

// @Component 修飾符注明了此類為一個 Vue 組件
@Component({
// 所有的組件選項都可以放在這里
template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
// 初始數據可以直接聲明為實例的屬性
message: string = 'Hello!'

// 組件方法也可以直接聲明為實例的方法
onClick (): void {
window.alert(this.message)
}
}

增強類型以配合插件使用

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

例如，聲明一個?string?類型的實例屬性?$myProperty：

// 1. 確保在聲明補充的類型之前導入 'vue'
import Vue from 'vue'

// 2. 定制一個文件，設置你想要補充的類型
// 在 types/vue.d.ts 里 Vue 有構造函數類型
declare module 'vue/types/vue' {
// 3. 聲明為 Vue 補充的東西
interface Vue {
$myProperty: string
}
}

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

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

你也可以聲明額外的屬性和組件選項：

import Vue from 'vue'

declare module 'vue/types/vue' {
?// 可以使用 `VueConstructor` 接口
?// 來聲明全局屬性
interface VueConstructor {
? ?$myGlobal: string
?}
}

// ComponentOptions 聲明于 types/options.d.ts 之中
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> {
myOption?: string
}
}

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

// 全局屬性
console.log(Vue.$myGlobal)

// 額外的組件選項
var vm = new Vue({
myOption: 'Hello'
})

標注返回值

因為 Vue 的聲明文件天生就具有循環性，TypeScript 可能在推斷某個方法的類型的時候存在困難。因此，你可能需要在?render?或?computed?里的方法上標注返回值。

import Vue, { VNode } from 'vue'

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

如果你發現類型推導或成員補齊不工作了，標注某個方法也許可以幫助你解決這個問題。使用?--noImplicitAny?選項將會幫助你找到這些未標注的方法。

原文鏈接：https://cn.vuejs.org/v2/guide/typescript.html#工程創建

轉載于:https://www.cnblogs.com/hasubasora/p/9627908.html

總結

以上是生活随笔為你收集整理的Vue CLI 3 可以使用 TypeScript 生成新工程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。