TSX常见简单入门用法之Vue3+Vite

TSX是指将JSX语法与Typescript结合起来使用的技术。TSX通常用于开发React和Vue等现代Web框架。下面我将详细讲解如何使用TSX开发Vue3项目，基于Vite打包工具。整个过程包含以下几步：

1. 安装所需依赖

在开始使用TSX开发Vue3之前，我们需要安装相关的依赖包。在我们的项目中先安装vue和@vue/compiler-sfc两个依赖。

npm i vue @vue/compiler-sfc

此外，我们还需要安装Typescript相关依赖。

npm i -D typescript @types/node @types/react @types/react-dom @types/jest

1. 配置Typescript

我们需要为项目配置一些必要的Typescript选项。在根目录下创建一个tsconfig.json文件，并进行如下配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "noEmit": true,
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

注意，在编译期间，TSX需要将JSX语法转换为普通的JavaScript代码。而"jsx": "preserve"选项则表示TSX代码直接被输出到JavaScript文件中。这里我们同时开启了一些额外的选项，如experimentalDecorators和emitDecoratorMetadata等，是为了使Vue3中的装饰器正常工作。

1. 创建Vite配置文件

Vite是一个快速的现代打包工具，通过它可以方便地支持TSX开发。在项目根目录下创建一个vite.config.ts文件，并进行如下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['vue', '@vue/runtime-core']
  }
})

其中，@vitejs/plugin-vue插件为Vite提供了对Vue3的支持。optimizeDeps选项可用于优化依赖项的打包。这里我们包含了Vue3本身以及@vue/runtime-core依赖。

1. 创建一个Vue组件

在src目录下创建一个App.vue文件，我们将通过该组件说明如何使用TSX开发Vue3。假设我们需要实现一个简单的计数器，代码可以如下所示：

import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    const count = ref(0)

    const handleClick = (): void => {
      count.value += 1
    }

    return {
      count,
      handleClick
    }
  },

  render() {
    return (
      <div>
        <p>Count: {this.count}</p>
        <button onClick={this.handleClick}>Add</button>
      </div>
    )
  }
})

在该组件中，我们使用defineComponent方法定义了一个名为App的Vue组件，并使用setup方法添加了一个状态变量，即计数器count。通过ref创建的count变量被限定为只能为数字类型。handleClick方法用于增加count的值。这里的render方法则定义了该组件的渲染逻辑。通过使用JSX语法，我们可以方便地创建Vue3组件。

1. 在主入口文件中引入该组件

在main.ts文件中引入App.vue组件并将其挂载到页面上，代码如下：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

这里，createApp方法用于创建一个Vue3应用程序实例。通过调用App组件并使用mount方法将其挂载到页面上。

至此，我们便完成了使用TSX开发Vue3的全流程。另外，以下两个示例分别展示了计数器组件的增删变化和绑定样式。

//示例1：展示计数器的增删变化
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    const count = ref(0)

    const handleAdd = (): void => {
      count.value += 1
    }

    const handleMinus = (): void => {
      count.value -= 1
    }

    const handleReset = (): void => {
      count.value = 0
    }

    return {
      count,
      handleAdd,
      handleMinus,
      handleReset
    }
  },

  render() {
    return (
      <div>
        <p>Count: {this.count}</p>
        <button onClick={this.handleAdd}>Add</button>
        <button onClick={this.handleMinus}>Minus</button>
        <button onClick={this.handleReset}>Reset</button>
      </div>
    )
  }
})

//示例2：绑定样式
import { defineComponent, ref } from 'vue'
import './App.css'

export default defineComponent({
  name: 'App',
  setup() {
    const count = ref(0)

    const handleClick = (): void => {
      count.value += 1
    }

    return {
      count,
      handleClick
    }
  },

  render() {
    return (
      <div>
        <p class="counter">Count: {this.count}</p>
        <button onClick={this.handleClick}>Add</button>
      </div>
    )
  }
})