vue项目使用tsx

1、vue2.7中  

使用webpack处理，配置如下

{
    test: /\.(ts|tsx)$/,
    use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@vue/babel-preset-jsx']
            }
          },
          {
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: [/\.vue$/] // vue文件加上ts
            }
          }
    ]
}

index.tsx  

// MyComponent.tsx

import { CreateElement, ref, defineComponent } from 'vue';

// Vue3中没有Vue.extend，可以用defineComponent来代替

export default defineComponent({

  name: 'JsxDemo',

  data () {

    return {

      num: 0

    };

  },

  setup (_props, { expose }) {

    const num = ref(0); // 注意：父组件中ref修改响应数据，无法导致num刷新

    const name = ref('ike');

    const handleClick = () => {

      console.log('点击');

      num.value++;

      name.value = 'tom';

    };

    expose({ // 默认只会暴露属性，故需要expose暴露

      num,

      handleClick

    });

    return (h: CreateElement) => (

        <div>

            <h1>{name.value}</h1>

            <h1 onClick={handleClick}>Hello, Vue 2.7 with TSX! {num.value}</h1>

        </div>

    );

  }

  //   render (h: CreateElement) {

  //     const handleClick = () => {

  //       console.log('点击');

  //     };

  //     return (

  //         <div>

  //           <h1 onClick={handleClick}>Hello, Vue 2.7 with TSX! {{ this.num }}</h1>

  //         </div>

  //     );

  //   }

});

如果想在vue文件使用tsx，实测用render渲染函数会报错，目前没找到解决办法 

tsconfig.json中配置，防止编辑器报没有React的错误  

"jsx": "preserve",

"jsxFactory": "h",

"jsxFragmentFactory": "Fragment",

2、vue3.x中  

使用vite处理，需要安装@vitejs/plugin-vue-jsx插件即可  

vite.config.ts里面加上  

import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({

  base: './',

  plugins: [

    vue(),

    vueJsx() // jsx、tsx都用插件

  ]

})

import { defineComponent, reactive, version } from 'vue';

import './index.scss';

// export default defineComponent({

//     name: 'tsxInVue',

//     components: {},

//     props: {},

//     data() {

//         return {

//             info: {

//                 age: 18,

//                 gender: ''

//             }

//         }

//     },

//     computed: {},

//     watch: {},

//     mounted(){},

//     methods: {

//         gender() {

//             this.info.gender = this.info.gender === '男' ? '女' : '男'

//         }

//     },

//     render() {

//         return <div className="box-wrap-intsx">

//             <div>我是小明，我今年{this.info.age}(tsx in tsx)</div>

//             <div onClick={this.gender}>我是{this.info.gender}性（点击获取性别）</div>

//         </div>

//     }

// });

console.log('version', version);

export default defineComponent({

    name: 'tsxInVue',

    components: {},

    props: {},

    data() {

        return {}

    },

    computed: {},

    watch: {},

    mounted(){},

    methods: {},

    setup() {

        const info = reactive({

            gender: '男',

            age: 22

        })

        const handleGender = () => {

            info.gender = info.gender === '男' ? '女' : '男'

        };

        return () => <div className="box-wrap-intsx">

            <div>我是小明，我今年{info.age}(tsx in tsx)</div>

            <div onClick={handleGender}>我是{info.gender}性（点击获取性别）</div>

        </div>

    }

});