在 Vue 项目中，.tsx** 文件**是一种使用 TypeScript + JSX（TSX）语法编写的组件文件。它允许你在 Vue 3 中以类似 React 的方式编写组件，同时享受 TypeScript 的类型安全和 JSX 的表达能力。
一、什么是 .tsx 文件？
.tsx= TypeScript + JSX- 它是 Vue 3 官方支持的一种替代
.vue单文件组件（SFC）的写法。 - 适用于：
- 动态渲染复杂 UI（如菜单、表单生成器）
- 需要强类型推导的场景
- 喜欢函数式编程风格或熟悉 React 的开发者
✅ 注意：Vue 的 TSX 和 React 的 JSX 不完全兼容 ，但语法相似。Vue 使用自己的运行时（如 h 函数）和插件来支持 TSX。
二、.tsx 与 .vue 的核心区别
| 特性 | .vue（SFC） |
.tsx |
|---|---|---|
| 文件后缀 | .vue |
.tsx |
| 模板语法 | <template> + v-if/v-for 等指令 |
直接用 JavaScript 表达式（如 map, if） |
| 类型支持 | 依赖 Vue 类型定义 | 完整 TypeScript 类型推断 |
| 样式作用域 | 支持 <style scoped> |
需手动处理样式（通常用 CSS Modules 或全局样式） |
| 动态性 | 较弱（需计算属性） | 极强（直接写 JS 逻辑） |
三、如何在 Vue 3 + Vite 项目中使用 .tsx
步骤 1：安装插件
npm install -D @vitejs/plugin-vue-jsx
# 或 pnpm / yarn步骤 2：配置 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() // 启用 TSX/JSX 支持
]
})步骤 3：配置 tsconfig.json
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "vue",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}🔍 jsx: "preserve" 表示保留 JSX 结构，由 Vite 插件后续处理。
四、编写 .tsx 组件示例
方式 1：独立 .tsx 文件（推荐用于动态组件）
// src/components/HelloWorld.tsx
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const message = 'Hello from TSX!'
return () => (
<div class="hello">
<h1>{message}</h1>
<p>这是 Vue 3 的 TSX 组件</p>
</div>
)
}
})⚠️ 注意：setup() 必须返回一个 函数（render function），不能直接返回 VNode。
方式 2：在 .vue 文件中使用 TSX（兼顾样式作用域）
<!-- MyComponent.vue -->
<template>
<component :is="renderFn" />
</template>
<script lang="tsx" setup>
import { defineComponent } from 'vue'
const renderFn = () => (
<>
<h2>在 .vue 中使用 TSX</h2>
<button onClick={() => alert('clicked!')}>点我</button>
</>
)
</script>
<style scoped>
h2 {
color: blue;
}
</style>✅ 这种方式可以保留 <style scoped>，避免样式污染。
五、TSX 中的 Vue 特性写法对照
| Vue 模板语法 | TSX 写法 |
|---|---|
v-if |
{condition && <Comp />} |
v-for |
{list.map(item => <Item key={item.id} data={item} />)} |
@click |
onClick={() => handler()} |
:class |
class={``{ active: isActive }} |
v-model |
手动绑定 value + onUpdate:value（或使用 useModel） |
六、适用场景建议
✅ 适合用 TSX 的情况：
- 动态组件（根据数据决定渲染哪个组件）
- 高度可配置的 UI（如表格、表单生成器）
- 需要复杂逻辑控制渲染结构
- 团队熟悉 React/JSX
❌ 不适合用 TSX 的情况：
- 简单静态页面
- 重度依赖
scoped样式的项目 - 不想放弃
v-model、自定义指令等模板特性
总结
.tsx是 Vue 3 中一种强大的组件编写方式，结合了 TypeScript 的类型安全和 JSX 的灵活性。- 需要配置
@vitejs/plugin-vue-jsx和tsconfig.json。 - 可以单独使用
.tsx文件，也可以在.vue中通过<script lang="tsx">使用。 - 选择
.vue还是.tsx，应根据项目复杂度、团队习惯和维护成本权衡。
如需完整示例项目，可参考官方模板：
npm create vue@latest my-tsx-app -- --template vue-ts然后按上述步骤添加 TSX 支持即可。