vue3中如何书写tsx

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」。

什么是tsx?

tsx的全称是typescript xml。

意思是在typescript中书写xml。

typescript是一门强类型语言，为了支持tsx，vue3源码直接从react的源码中拿到了jsx.d.ts文件来提供类型声明。

下面是jsx.d.ts文件中的一个声明:

export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
  innerHTML?: string

  class?: any
  style?: StyleValue

  // Standard HTML Attributes
  accesskey?: string
  contenteditable?: Booleanish | 'inherit'
  contextmenu?: string
  dir?: string
  draggable?: Booleanish
  hidden?: Booleanish
  id?: string
  lang?: string
  placeholder?: string
  spellcheck?: Booleanish
  tabindex?: Numberish
  title?: string
  translate?: 'yes' | 'no'
  // ...
}

interface AriaAttributes {
  'aria-activedescendant'?: string
  'aria-atomic'?: Booleanish
  'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both'
  'aria-busy'?: Booleanish
  'aria-checked'?: Booleanish | 'mixed'
  }

上述代码定义了一个接口，继承自AriaAttributes和EventHandlers<Events>。

• AriaAttributes,辅助属性，用于支持丰富的互联网应用功能，一般是为不方便的人士提供的功能。
• EventHandlers,事件编程模型，用于提供事件回调编程模型。

声明文件是个工作量的问题，因而提供vue3特意增强了对类型声明的支持，也就是说鼓励typescript的使用。

vue3中配置tsx

tsx是一种语法糖。

const tsx = <h1>标题</h1>

将会被编译为:

const tsxTransformed = createElement('h1', { innerText: '标题' })

所以，要想在vue3中支持tsx，要做三件事:

• 需要一个将tsx编译为js代码的编译插件。
• 需要配置编辑器或者eslint识别tsx的插件。
• 将vue3与tsx融合的插件。

defineComponent

vue3直接支持tsx语法。

我们看看defineComponent的源码:

// implementation, close to no-op
export function defineComponent(options: unknown) {
  return isFunction(options) ? { setup: options, name: options.name } : options
}

• 如果参数是函数，则将setup设置为options。
• 如果是选项，则直接返回选项。

vue3中写tsx

vue3直接支持jsx和tsx,也就是将繁琐的编译工作和代码提示工作帮我们做好了，我们只需要按照对应的语法写就可以了。

tsx两种写法

setup写法

import { defineComponent } form 'vue'

export default defineComponent({
    name: 'form-component',
    setup() {
        return (
          <div>表单组件</div>
        )
        }
})

类组件写法

import { Options, Vue } from 'vue-class-component'

@Options({
  components: {
  }
})
export default class FormRender extends Vue {
    name = 'form-component'
    render():JSX.Element {
        return (
            <div>
                表单组件
            </div>
        )
    }
}

vue-class-component也是vue3提供的一个编译库。

个人更喜欢类组件写法，你喜欢什么就怎样写。

我们需要知道的几个知识点。

JSX.Element

typescript中, jsx的类型就是JSX.Element。

@Options

就是vue组件的配置，比如prop,data等。

 @Options({
 props: {
  msg: String
 },
 data(){
  return{
    count: 1
   }
 }
 })