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 选项将会帮助你找到这些未标注的方法。

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

Vue.js TypeScript 支持相关推荐

WebStorm 2017.1增加对Vue.js的支持
JetBrains刚刚发布了其最受欢迎的WebStorm IDE的2017.1版本.WebStorm 2017.1通过新功能来保持在快速发展的JavaScript领域的开发工具竞争力. \\ 数年来, ...
为Angular（2+）开发人员提供带TypeScript的Vue.js
目录介绍单页应用程序的演变(SPA) 三大框架概述 Angular开发者的Vue.js 学习Vue.js Vue.js页面的剖析构建示例应用程序 TypeScript的案例入门--Vue.js ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
Vue.js 是什么
Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层. 单页应用:Vue ...
使用 vue.js 的一些操作记录
vue.js不支持ie8以下 1. 在html的属性中赋值: 需要在属性前加上 v-bind 转载于:https://www.cnblogs.com/hjyhjyhjy/p/6518225.html
Vue.js响应式原理
Vue.js响应式原理框架浏览数:659 2017-9-20 关于Vue.js Vue.js是一款MVVM框架,上手快速简单易用,通过响应式在修改数据的时候更新视图.Vue.js的响应式原理依赖于 ...
Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
Vue.js先入个门看看
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...
说说说vue.js中的组
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,vue.js的编辑器为它添加特殊的功能.在某些情况下,组件也可以是原生HT ...

Vue.js TypeScript 支持