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

時間 2019-11-19

標籤 vue cli 可使用 typescript 生成工程简体版

原文原文鏈接

TypeScript 支持

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

發佈爲 NPM 包的官方聲明文件

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

並且，咱們已經把它們發佈到了 NPM，最新版本的 TypeScript 也知道該如何本身從 NPM 包裏解析類型聲明。這意味着只要你成功地經過 NPM 安裝了，就再也不須要任何額外的工具輔助，便可在 Vue 中使用 TypeScript 了。node

開發工具鏈

工程建立

Vue CLI 3 能夠使用 TypeScript 生成新工程。建立方式：github

# 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 插件。web

WebStorm 一樣爲 TypeScript 和 Vue 提供了「開箱即用」的支持。vue-router

基本用法

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

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

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

基於類的 Vue 組件

若是您在聲明組件時更喜歡基於類的 API，則能夠使用官方維護的 vue-class-component 裝飾器：vue-cli

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