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

TypeScript 支持

在 Vue 2.5.0 中,我们大大改进了类型声明以更好地使用默认的基于对象的 API。同时此版本也引入了一些其它变化,需要开发者作出相应的升级。阅读博客文章了解更多详情。

发布为 NPM 包的官方声明文件

静态类型系统能帮助你有效防止许多潜在的运行时错误,而且随着你的应用日渐丰满会更加显著。这就是为什么 Vue 不仅仅为 Vue core 提供了针对 TypeScript 的官方类型声明,还为 Vue Router 和 Vuex 也提供了相应的声明文件。

而且,我们已经把它们发布到了 NPM,最新版本的 TypeScript 也知道该如何自己从 NPM 包里解析类型声明。这意味着只要你成功地通过 NPM 安装了,就不再需要任何额外的工具辅助,即可在 Vue 中使用 TypeScript 了。

推荐配置

// tsconfig.json
{
"compilerOptions": {
// 与 Vue 的浏览器支持保持一致
"target": "es5",
   // 这可以对 `this` 上的数据属性进行更严格的推断
"strict": true,
   // 如果使用 webpack 2+ 或 rollup,可以利用 tree-shake:
"module": "es2015",
"moduleResolution": "node"
}
}

注意你需要引入 strict: true (或者至少 noImplicitThis: true,这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查,否则它会始终被看作 any 类型。

参阅 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/537877.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手机端本地图片或者拍照的上传功能

原文连接 https://blog.csdn.net/m0_37852904/article/details/78550136 ---------------------------------------------------------- 最近刚好在做手机端的图片上传功能&#xff0c;便记录下 html&#xff1a; <input type"file" class"hide" i…

php scandir sftp,CentOS 下使用SFTP实现网站自动生成FTP账号,实现Chroot功能

背景 手上有一个这样的系统&#xff1a;后台可以直接新建项目(网站)&#xff0c;只需输入项目名称、访问域名(二级)以及其他一些额外信息&#xff0c;就可自动生成一个模板网站。大致原理是&#xff1a;提交这些信息的时候&#xff0c;后台会给项目新建一个目录&#xff0c;并把…

IOS内购详解

介绍 最近开发的一款APP上架被驳回了&#xff0c;理由是&#xff1a; 上架的APP是培训类&#xff0c;里面金牌视频课程需要购买&#xff0c;Android端使用支付宝&#xff0c;微信支付。 苹果规定 数字化内容、App功能以及服务等&#xff0c;需要使用内购 真实世界中的服务(…

汇编中的函数调用与递归

栈帧的结构 倘若我们要想搞清楚过程的实现&#xff0c;就必须先知道栈帧的结构是如何构成的。栈帧其实可以认为是程序栈的一段&#xff0c;而程序栈又是存储器的一段&#xff0c;因此栈帧说到底还是存储器的一段。那么既然是一段&#xff0c;肯定有两个端点&#xff0c;这个不需…

php 相亲 段子,精彩的男女幽默段子

精彩的男女幽默段子。撒嬌老婆洗完澡對老公撒嬌說&#xff1a;老公&#xff0c;抱我到床上去吧。老公看了看老婆&#xff0c;冷冷的回答道&#xff1a;我還是把床搬過來吧&#xff01;所以&#xff0c;撒嬌還是要看體型&#xff01;單身老公說&#xff1a;老婆&#xff0c;你不…

Redmine数据库备份及搬家

Bitnami Redmine的备份分2种方式&#xff1a; 1.导出数据库 2.整个目录搬家 不管是哪种都想停掉服务&#xff0c;redmine相关的服务有以下5个&#xff1a; redmineApache   redmineMySQL   redmineSubversion   redmineThin1   redmineThin2 可以打开windows服务控制面…

且看BCH开启的“信用本位”时代

​​​ 且看BCH开启的“信用本位”时代 比特币向来被称为“金本位”的互联网实验&#xff0c;由于中本聪先生的天才发明&#xff0c;POW机制给予了比特币与黄金同样的生产模式。所以&#xff0c;时至今日&#xff0c;BCE依然自称为“数字黄金”。 只可惜&#xff0c;“一叶障目…

oracle设置临时表空间,Oracle临时表空间查看、添加临时表空间数据文件、修改默认临时表空间 方法!...

--查表空间使用率情况(含临时表空间)SELECT d.tablespace_name "Name", d.status "Status",TO_CHAR (NVL (a.BYTES / 1024 / 1024, 0), 99,999,990.90) "Size (M)",TO_CHAR (NVL (a.BYTES - NVL (f.BYTES, 0), 0) / 1024 / 1024,99999999.99) US…

Redmine项目管理工具安装

Redmine免费开源的项目管理工具 下载 一键安装工具 https://bitnami.com/stack/redmine/installer 安装 Redmine一键安装工具集成了php服务&#xff0c;mysql服务。尽管安装就好。 安装完成后&#xff0c;在开始菜单&#xff0c;找到-----Bitnami Redmine Stack--------Bi…

Oracle创建假脱机文件,oracle – 在sqlplus中假脱机csv文件时的标头格式

我需要使用sqlplus从Oracle中的表中调整csv.以下是所需的格式&#xff1a;"HOST_SITE_TX_ID","SITE_ID","SITETX_TX_ID","SITETX_HELP_ID""664436565","16","2195301","0""664700792&qu…

方便微信公众号等手机网页调试插件eruda和vConsole

原文地址&#xff1a;https://blog.csdn.net/qq_39234840/article/details/80951710 ---------------------------------------------------------- 调试插件一&#xff1a;eruda&#xff08;推荐&#xff0c;因为比vConsole功能多&#xff09; <script src"//cdn.js…

HDU 3530Subsequence(单调队列)

题意 题目链接 给出$n$个数&#xff0c;找出最长的区间&#xff0c;使得区间中最大数$-$最小数 $> m$ 且$< k$ Sol 考虑维护两个单调队列。 一个维护$1 - i$的最大值&#xff0c;一个维护$1 - i$的最小值。 至于两个限制条件。 $<k$可以通过调整队首来满足 $>a$可以…

oracle权限培训,Java培训-ORACLE数据库学习【2】用户权限

查询用户拥有的权限&#xff1a;1.查看所有用户&#xff1a;select *from dba_users;select *from all_users;select *from user_users; 2.查看用户或角色系统权限(直接赋值给用户或角色的系统权限)&#xff1a;select *from dba_sys_privs;select *from user_sys_privs; 3.查看…

linux 中文件夹的文件按照时间倒序或者升序排列

1&#xff0c;按照时间升序 命令:ls -lrt 详细解释: -l use a long listing format 以长列表方式显示&#xff08;详细信息方式&#xff09; -t sort by modification time 按修改时间排序&#xff08;最新的在最前面&#xff09; -r reverse order while sorti…

PHP中关于时间(戳)、时区、本地时间、UTC时间等的梳理

PHP中关于时间&#xff08;戳&#xff09;、时区、本地时间、UTC时间等的梳理 在PHP开发中&#xff0c;我们经常会在时间问题上被搞糊涂&#xff0c;比如我们希望显示一个北京时间&#xff0c;但是当我们使用date函数进行输出时&#xff0c;却发现少了8个小时。几乎所有的php猿…

WebServiceStudio.exe测试webservice接口工具

WebServiceStudio.exe测试webservice接口工具 下载链接 https://pan.baidu.com/s/1gf8ajS3 打开工具WebServiceStudio&#xff0c;如下填写地址&#xff0c;点击【Get】按钮 会显示出需要传参的地方&#xff0c;在value中填写xml参数 输入完value值后&#xff0c;点击【Invok…

oracle最大实例数,【ORA-16196】一个实例在其生命周期里最多只能装载和打开一个数据库...

如果使用“alter database open;”命令打开一个曾经被“alter database close;”命令关闭的数据库时&#xff0c;您将会收到如下的报错信息&#xff1a;"ORA-16196: database has been previously opened and closed"这个报错的原因是什么呢&#xff1f;原因是&#…

Navicat工具导出Mysql数据表结构到Excel文件中

原文链接&#xff1a;https://blog.csdn.net/zt15732625878/article/details/77978266 ------------------------------------------------------------------------ 前言 项目中数据库设计已经完成&#xff0c;现在到了代码实现的阶段&#xff0c;数据库中没有数据&#xff…

利用MAVEN的profile 实现打包环境的切换

乐哉码农产生问题的背景 由于在项目开发的时候&#xff0c;我们一般都是使用的本地库&#xff0c;数据库连接写的是本地的&#xff0c;如果我们将项目打成war的时候&#xff0c;里面的配置连接写的是我们本地的&#xff0c;当我们直接把war拷贝到服务器上面进行部署的时候&…

服务器oracle优化,oracle服务器配置及优化

1.在ORACLE中实现分布式快速存取和充实内存是很重要的。要不惜任何代价避免页面调度和交换﹐每次都必须把系统全局区(SGA)放到内存。将SGA放到内存中﹐在INIT.ORA中设置参数 PRE_PAGE_SGAPRE_PAGE_SGAYES2.回卷段的竟争会降低系统的性能。SELECT GETS,WAITS from V$ROLLSTAT;…