如何在Vite中使用TS文件编写Vue JSX代码？

Question

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()]
})

a.ts
// Cannot find name 'div'.ts(2304)
const a = () => (<div></div>)

是不是一定要在tsx后缀的文件中才可以啊，但我就想使用ts文件

Answer 1

1.在 tsconfig.json 中启用 JSX 支持：

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

2.在 vite.config.ts 中配置 esbuild 选项： 通过配置 esbuild，可以告诉 Vite 将 .ts 文件视为 .tsx 文件来处理 JSX 语法。

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

export default defineConfig({
  plugins: [vue(), vueJsx()],
  esbuild: {
    loader: 'tsx',
    include: [/\.ts$/]
  }
});

3.在 .ts 文件中添加 JSX 注释： 在你的 .ts 文件中，添加以下注释以告诉 TypeScript 编译器该文件包含 JSX 语法：

/** @jsxImportSource @emotion/react */
const a = () => (<div></div>);

补充

区分.ts和.tsx
1 .在 vite.config.ts 中配置 esbuild 选项，但只针对特定文件类型：

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

export default defineConfig({
  plugins: [vue(), vueJsx()],
  esbuild: {
    loader: {
      '.ts': 'ts',
      '.tsx': 'tsx'
    },
    include: [/\.tsx?$/]
  }
});

2.在 TypeScript 泛型中添加逗号，以避免 esbuild 将其误认为是 JSX 语法：

const a = <T,>() => (<div></div>);