新出了一个系列:Vue2 与 Vue3 技巧小册
微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势,学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。
最近正在将一个应用单文件组件的 Options API 的 Vue2 JavaScript 我的项目降级为 Vue3 typescript,并利用 Composition API 的劣势。
比方,上面这种 选项 API 形式:
export default {
props: {
name: {
type: String,
required: true.
}
},
emits: ['someEvent', 'increaseBy']
};
咱们将它转成 组合 API 形式:
const props = defineProps<{name: string;}>();
const emit = defineEmits<{(event: 'someEvent): void;
(event: 'increaseBy', value: number): void;
}>();
从 选项 API 的 emit
和 props
到 组合 API 的 defineemit
和 defineProps
函数的基于类型语法的转换并不简略。我也很好奇 Vue 是如何解决接口的。
TypeScript 接口是只在设计和编译时存在的构造。它们在 JavaScript 运行时之前被过滤掉,那么它们是如何影响组件的行为的呢?
我想晓得是否有方法看到 Vue 如何解释传递给 defineEmits
和 defineProps
的通用参数。如果你留神到文档中说你不须要导入 defineEmits
和 defineProps
函数。这是因为它们实际上是同名的 JavaScript 函数的宏。在进行残缺的 TypeScript 传递之前,Vue webpack 插件应用 TypeScript 的 AST(形象语法树)来推导 JavaScript 版本的函数选项。
如果不是因为宏:
defineProps<{
prop1: string;
prop2: number;
}>();
就会变成:
defineProps();
这样就会导致参数缺失的谬误。
如果看一下 Vue 的 SFC(单文件组件)编译器源代码,有一个叫做 compileScript 的函数。我开始尝试用起码的参数来调用这个函数,这样就不会出错,并模仿任何不重要的必要参数。最终发现了另一个叫 parse 的函数。这给了我所需的大部分参数,只剩下要 mock 的组件 id
。
这里有一个小脚本,它接管 SFC 的 .vue
文件并输入 Vue 如何解释 TypeScript。
import {readFile, writeFile} from "fs";
import parseArgs from "minimist";
import {parse, compileScript} from "@vue/compiler-sfc";
const {file, out} = parseArgs(process.argv.slice(2), {string: ["file", "out"],
alias: {
file: "f",
out: "o"
}
});
const filename = file;
const mockId = "xxxxxxxx";
readFile(filename, "utf8", (err, data) => {const { descriptor} = parse(data, {filename});
const {content} = compileScript(descriptor, {
inlineTemplate: true,
templateOptions: {filename},
id: mockId
});
if (out) {writeFile(out, "utf8", content);
} else {process.stdout.write(content);
}
});
事例地址:https://stackblitz.com/edit/n…
例如,有如以下组件:
interface Bar {
prop1: string;
prop2: number;
}
defineProps<{
bar: Bar;
bars: Bar[];
asdf1?: boolean;
asdf2: string[];}>();
输入:
interface Bar {
prop1: string;
prop2: number;
}
export default /*#__PURE__*/_defineComponent({
__name: 'demo',
props: {bar: { type: Object, required: true},
bars: {type: Array, required: true},
asdf1: {type: Boolean, required: false},
asdf2: {type: Array, required: true}
},
setup(__props: any) {return (_ctx: any,_cache: any) => {return (_openBlock(), _createElementBlock("div"))
}
}
正如下面所看到的,SFC 编译器采纳 TypeScript 类型信息,并建设了 props
对象。原始类型是一对一的。接口变成对象,而 ?
可选语法驱动 required
的属性。
代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
作者:romaopedro 译者:前端小智 起源:logrocket
https://unicorn-utterances.co…
交换
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588… 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。