Sokongan TypeScript


Vue CLI menyediakan sokongan alat TypeScript terbina dalam.


Direktori

Dan kini kami telah menerbitkannya

kepada NPM
, versi terbaharu TypeScript juga mengetahui cara menghuraikan pengisytiharan jenis daripada pakej NPM sendiri. Ini bermakna selagi anda berjaya memasangnya melalui NPM, anda tidak lagi memerlukan bantuan alat tambahan untuk menggunakan TypeScript dalam Vue.

Konfigurasi disyorkan

// tsconfig.json
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}
Perhatikan bahawa anda perlu memperkenalkan jenis . Lihat TypeScript Compiler Options Documentation (Bahasa Inggeris)
untuk mengetahui lebih lanjut.


Rantai alat pembangunan

Penciptaan projekstrict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any

Vue CLI 3 boleh menggunakan TypeScript untuk menjana projek baharu. Dicipta oleh: 

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

# 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name


Sokongan editor

Untuk membangunkan aplikasi Vue menggunakan TypeScript, kami amat mengesyorkan anda menggunakan Visual Studio Code yang menyediakan "out-of-the-Script-box" yang sangat baik "sokongan. Jika anda menggunakan Single File Component (SFC), anda boleh memasang Vetur plugin yang menyediakan sokongan SFC dan banyak lagi ciri berguna.

WebStorm juga menyediakan sokongan "luar biasa" untuk TypeScript dan Vue.


Penggunaan asas

Untuk mendapatkan TypeScript dengan betul membuat kesimpulan jenis dalam pilihan komponen Vue, anda perlu menggunakan Vue.component atau Vue.extend Takrifkan komponen: 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)
  }
})

🎜🎜

🎜🎜Komponen Vue berasaskan kelas🎜🎜🎜🎜🎜Jika anda lebih suka menyelenggara API berasaskan kelas semasa mengisytiharkan komponen, anda boleh menggunakan komponen rasmi vue-class-component🎜 Penghias: 🎜🎜rrreee🎜🎜🎜

🎜🎜Tingkatkan jenis untuk berfungsi dengan pemalam🎜🎜🎜🎜🎜Pemalam boleh meningkatkan sifat global/contoh dan pilihan komponen Vue. Dalam kes ini, membuat pemalam dalam TypeScript memerlukan pengisytiharan jenis. Nasib baik, TypeScript mempunyai ciri untuk melengkapkan jenis sedia ada yang dipanggil Pembesaran modul🎜. 🎜🎜🎜Sebagai contoh, untuk mengisytiharkan harta contoh $myProperty jenis string: 🎜rrreee🎜Selepas memasukkan kod di atas sebagai fail pengisytiharan dalam projek anda (seperti my-property.d.ts), anda boleh menggunakan $myProperty pada contoh Vue. 🎜rrreee🎜Anda juga boleh mengisytiharkan sifat tambahan dan pilihan komponen: 🎜rrreee🎜Pengisytiharan di atas membolehkan kod berikut disusun dengan lancar: 🎜rrreee🎜🎜🎜

🎜🎜Nilai pulangan label 🎜 🎜🎜🎜🎜Oleh kerana fail pengisytiharan Vue sememangnya berbentuk bulat, TypeScript mungkin mengalami kesukaran untuk membuat kesimpulan jenis kaedah. Oleh itu, anda mungkin perlu menganotasi nilai pulangan pada kaedah dalam render atau computed. 🎜🎜rrreee

Jika anda mendapati inferens jenis atau pelengkapan ahli tidak berfungsi, menandakan kaedah boleh membantu anda menyelesaikan masalah. Menggunakan pilihan --noImplicitAny akan membantu anda mencari kaedah tidak berlabel ini.