「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」
最近在尝尝鲜，使用Vite + Vue 3 + Typescript实现表单配置，原本技术栈是React的我，重回Vue的SFC（单文件组件）语法规范，有那么一点点陌生，相信大家对Vue 2结合Typescript的写法让人实在难受，但是Vue 3结合<script setup>语法糖实现，我发现是真香阿，我不允许你们还不知道，来快上车！
开发环境准备
开始之前我们得先搭建好开发环境以及对Vue 3的<script setup>语法糖有一定概念
-
关于
Vue 3和Vscode开发环境配置可参考我写的这篇文章 「 不再迷茫！看了这篇文章让你上手Vue3.0开发有丝滑般体验」 -
关于
Vue 3的<script setup>语法糖可参考这篇文章 「 看一眼，Vue3 script-setup语法糖下组件通信就学会了（附源码）」
Vue 3 和 Typescript 相遇
我刚刚开始是按照SFC语法规范去写的，Vue 3里面的.vue文件里使用Typescript语法，得做以下的配置
修改声明语言类型
script 标签声明语言是ts，例如 <script setup lang='ts'>
// index.vue
<template>
<div>hello {{ hairDresser.name }}, your age is {{ hairDresser.age }}</div>
</template>
<script setup lang='ts'>
import { reactive } from 'vue';
type Person = {
name: string;
age: number;
};
const hairDresser = reactive<Person>({
name: 'Tony',
age: 18,
});
</script>
然后把鼠标移上去Person上面，理想中的语法提示并没有出现，这感受不到丝滑啊
然后我查阅了很多资料，以为是不是tsconfig.json配置不正确，是不是Vscode插件有什么没装对，然而并不是！就是单纯的.vue文件里的Typescript语法不支持提示
然后再翻看了下官方文档，发现.tsx文件可以，于是我把.vue文件里的内容全改成.tsx的写法
转成TSX写法
首先安装@vitejs/plugin-vue-jsx插件
npm install @vitejs/plugin-vue-jsx --save
修改Vite的配置文件Vite.config.ts，引入@vitejs/plugin-vue-jsx插件
// Vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [vue(), vueJsx(), eslintPlugin()],
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
// 别名配置，记得tsconfig.json里面也要对应修改
alias: [
{
find: '@',
replacement: path.resolve(__dirname, 'src'),
},
],
},
});
新建一个index.tsx文件，把原有的index.vue的写法改成jsx
// index.tsx
import { defineComponent, reactive } from 'vue';
const Index = defineComponent({
setup() {
type Person = {
name: string;
age: number;
};
const hairDresser = reactive<Person>({
name: 'Tony',
age: 18,
});
}
return () => {
<div>
hello { hairDresser.name }, your age is { hairDresser.age }
</div>
}
});
export default Index;
此时，鼠标再移上去定义的Person类型，终于有语法提示了！
时间缘故，明天再更新下篇，讲述下表单配置的实现流程
结语
以上是我使用Vite + Vue 3 + tsx + element plus实现表单配置的实践，希望能对大家有帮助～如果能获得一个大大的赞❤作为鼓励会十分感激😄！！大家也可以多在评论区交流讨论哦，谢谢啦～
更多文章推荐：
