“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

Recently, I have tried to use Vite + Vue 3 + Typescript to implement form configuration. I used to be a React tech stack, but I am a little unfamiliar with THE SYNTAX specification of SFC (single file component) of Vue. I believe people are really upset about Vue 2 combined with Typescript. But Vue 3 combined with

Preparing for development Environment

To start, we need to setup the development environment and have some idea of Vue 3’s

  • For the configuration of Vue3 and Vscode development environment, please refer to the article I wrote “no longer confused! After reading this article, you will have a smooth experience in Vue3.0 development”.

  • For more information about Vue3’s

Vue 3 meets Typescript

I just started writing with the SFC syntax specification in Vue 3. Vue files use Typescript syntax, so I have to do the following configuration

Change the declaration language type

Script tag declaration language is TS, such as 

// 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>
Copy the code

Move the mouse over Person, and the desired syntax hint doesn’t appear. It’s not silky

Then I looked up a lot of information, thinking that tsconfig.json configuration is not correct, is there something wrong with Vscode plug-in, but it is not! The Typescript syntax in pure. Vue files does not support hints

And then I looked at the official documentation, and the.tsx file worked, so I changed everything in the.vue file to.tsx

Let’s write it TSX

First install the @Vitejs/plugin-vuE-jsx plug-in

npm install @vitejs/plugin-vue-jsx --save
Copy the code

Modify the Vite configuration file vite.config. ts and introduce @vitejs/plugin-vue-jsx plug-in

// 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'].// Alias configuration, remember tsconfig.json also need to be modified accordingly
    alias: [{find: The '@'.replacement: path.resolve(__dirname, 'src'),},],},});Copy the code

Create a new index. TSX file and change the original index.vue to 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;

Copy the code

At this point, mouse over the defined Person type, finally have a syntax hint!

For the sake of time, I will update the next post tomorrow to describe the implementation process of the form configuration

conclusion

The above is my use of Vite + Vue 3 + TSX + Element Plus implementation of the form configuration practice, I hope to help you ~ if you can get a big like ❤ as an encouragement will be very grateful 😄!! You can also exchange ideas in the comments section. Thank you

More articles recommended:

“Super detailed! Monitor five kinds of micro channel small programs to cut the background situation”

“Content Security Policies for HTTP Response Headers (CSP) Protect Your Site”

“Learn to countdown in three minutes using requestAnimationFrame”