来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

vue-type-check: Vue 模板中的 Typescript 类型检查

参考 Angular 的方式重新实现一个类型检查器,这种方式可以使用 Typescript API 的部分能力,但与 Typescript 本身还有较大差距,想要实现一些复杂的类型检查(例如函数重载、泛型)是非常困难的。

把方法绑定到Vue实例下

vue-type-check 同时提供了 CLI 和 API 两种使用方式,并且输出清晰的错误提示以便和现有的工作流无缝衔接。

Vue官方提供了一个库Vue-class-component,用于让我们使用Ts的类声明方式来编写vue组件代码。Vue-property-decorator则是在Vue-class-component的基础上提供了装饰器的方式来编写代码。首先我们需要在package.json中引入这两个依赖。

这种方式可以完全利用 Typescript 编译器的能力,并且也可以正确标记出错误发生的位置。这也是最终 katashin 给 vetur 的 patch 中所使用的方式,目前是通过 vue-eslint-parser 完成了这一转化过程。

interface person { name:string age:number}interface student { name:string age:number stuid:string}let person: person= { name:'name', age:1}let student: student = { name:'name', age:1, stuid:'stuid'};person = student //这样是可以的student = person //这样不允许

另一方面 vetur 也有提供 CLI 使用方式的规划,我们也会尝试将 vue-type-check 中完成的工作反馈给社区。

疑问1:interface和type有什么区别?

之所以要在 vetur 的基础上开发 vue-type-check 是为了避免其局限性:

为什么要迁移至Typescript

vetur 以 vscode 编辑器插件的形式存在,不能很好地和持续集成等工作流进行集成,使用场景有限。vetur interpolation 目前还是实验性功能,并且由于实现方式较为 hack,因此使用时稳定性还有所欠缺,实际使用时会遇到 vue language server crash 需要重启的问题。相比之下 vue-type-check 只对已经完成编辑的文件进行类型检查,稳定性更佳。vetur interpolation 还未做太多的性能优化,在我们一个有大量自动生成的 Typescript 代码的项目中会导致 vscode 非常卡顿。

只要正常的在依赖中安装了vue-router vuex就已经通过模块补充的方式将类型添加到了vue实例上。

方式一:将 Vue 模板编译后进行检查

因为是迁移已经存在的项目,不建议开始就把main.js重命名为main.ts,对于绝大多数Vue项目,main.js引入了太多的依赖,我们应该首先从依赖着手,自下而上的迁移Typescript。对于项目中一些偏底层,甚至是框架维护者所提供的库函数,我们不关心其实现逻辑,所以没有必要将其改写为ts文件,只需要给其加声明文件供我们的业务代码调用即可。

网上澳门金莎娱乐,目前 vue-type-check 完全基于vetur的interpolation feature实现,interpolation 的内部实现可以参考这篇文章。

在项目根目录新建tsconfig.json,并引入以下代码

因为 Vue 实际上也是将模板编译成了 JS 代码,因此可以实现一个模板 - TS 的编译器,对编译后的结果进行类型检查。这一方式的问题是 vue-template-compiler 不能提供 source map 的支持,因此在转化之后无法标记出发生错误的位置。

这样我们就可以通过 this.form.validate()来做表单校验了

方式三:将模板转化为 Typescript AST

在我的项目中,service层的逻辑非常简单,仅仅是传参数调用接口,没有添加任何其他的逻辑,逻辑如此简单其实没有什么必要改写为ts文件,所以我为service层的文件编写声明文件,来为调用service层的代码提供类型声明。

为此我们开源了一个易于使用的 Vue 类型检查器:vue-type-check,可以对 Typescript 编写的 Vue 组件中模板和脚本的部分均进行类型检查。

声明文件编写方法

越来越多人开始尝试使用 Typescript 编写他们的 Vue 项目,Vue 本身也在不断加强对 Typescript 的支持(官方提供 vue-class-component 库、使用 Typescript 编写 Vue 3.0 等),但是对于组件中模板部分的类型检查仍然有很大的局限性。

因为在ts文件中是无法识别vue文件的,所以需要在项目根目录新建shims-vue.d.ts文件,添加以下代码,来让ts识别vue文件。

对于 Vue 组件模板代码的类型检查社区中也陆续进行过其它尝试,我们从katashin的这篇文章了解到了几种思路的利弊。

如何将已有的Vue项目迁移至Typescript

时间: 2019-09-04阅读: 185标签: 类型

{ "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "noFallthroughCasesInSwitch":true, "noImplicitAny":true, "noImplicitReturns":true, "noImplicitThis":true, "types": [ "webpack-env" ], "paths": { "@/*": [ "./app/common/*" ], "_app/*": [ "./app/*" ], "_c/*": [ "./app/common/components/*" ], "api/*": [ "./app/service/*" ], "assets/*": [ "./app/assets/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ], }, "include": [ // 在此出填写你的项目中需要按照typescript编译的文件路径 "app/**/*.ts", "app/**/*.tsx", "app/**/*.d.ts", "app/**/*.vue", ], "exclude": [ "node_modules" ]}

在模板中使用的变量 msg 并没有在组件中定义。printMessage 方法中错误地对字符串类型的值使用 toFixed 方法。

因为TypeScript是JavaScript的超集,TypeScript 不会阻止 JavaScript 的运行,即使存在类型错误也不例外,这能让你的 JavaScript 逐步迁移至 TypeScript。所以可以慢慢地做迁移,一次迁移一个模块,选择一个模块,重命名.js文件到.ts,在代码中添加类型注释。当你完成这个模块时,选择下一个模块。

实际上在此之前我们还尝试过其它实现方式,但最终我们还是转向了基于 vetur 进行开发,因为我们希望避免重复的开发,并且持续地将 vetur 中最新的功能和优化应用在 vue-type-check 中。

可行性

方式二:实现一个类型检查器

同时也可以通过vue-property-decorator提供给我们的装饰器一劳永逸的将该refs添加到computed属性上

template div  p{{ msg }}/p /div/templatescript lang="ts"import Vue from "vue";export default Vue.extend({ name: "app", data() { return { message: "Hello World!" }; }, methods: { printMessage() { console.log(this.message.toFixed(1)); } }});/script

特别需要注意的是,现在的vue项目中大多使用了webpack的alias来解析路径,在tsconfig.json中需要配置path属性,让typescript同样认识在webpack中配置的路径别名。

示例

由下而上的迁移

工作原理

但这个属性并不合理,它要求每个实例的属性都有初始值,我们在tsconfig将其设置为false就好了。

我们对以下 Vue 单文件组件进行类型检查,其中包含了两个类型错误:

import { Vue, Component, Ref } from 'vue-property-decorator'import Form from '@/path/to/another-component.vue'@Componentexport default class YourComponent extends Vue { @Ref() readonly form!: Form}

export default { computed() { form: { cache: false, get() { return this.$refs.form as Form } }, }}

其它尝试

import {Component,Vue} from "vue-property-decorator";@Componentexport default class MyComponent extends Vue{ // 声明data form: { accountType?: string, username: string, password: string, gender: 'X' | 'F' | 'M', email: string, level?: number } = { username:'', password:'', gender:'X', email:'' }; // 声明methods async submit(): void { //调用上面的service接口 const [res,err] = await this.$service.createAccount; }}

疑问3: 赋值兼容性

改写Vue文件

新手容易遇到的一些问题

一些需要注意的问题

Javascript本身是动态弱类型的语言,这样的特点导致了Javascript代码中充斥着很多Uncaught TypeError的报错,给开发调试和线上代码稳定都带来了不小的负面影响。

安装依赖

配置tsconfig.json

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:vue-type-check: Vue 模板中的 Typescript 类型检查

关键词: