#### Writing component by class-style API (vue-class-component and/or vue-property-decorator)

If you prefer class-style component by using vue-class-component and/or vue-property-decorator,
there are some options to make it tsx-ready.

##### 1. Extends from Component class provided by vue-tsx-support

`jsx
import { VNode } from "vue";
import { Component, Prop } from "vue-property-decorator";
import * as tsx from "vue-tsx-support";

type MyComponentProps = {
text: string;
important?: boolean;
}

@Component
export class MyComponent extends tsx.Component {
@Prop({ type: String, required: true })
text!: string;
@Prop(Boolean)
important?: boolean;

get className() {
return this.important ? "label-important" : "label-normal";
}
onClick(event: MouseEvent) {
this.$emit("ok", event);
}
render(): VNode {
return {this.text};
}
}
`

:warning: Unfortunately, vue-tsx-support can't infer prop types automatically in this case, so you must write type manually.

##### 2. Add _tsx field to tell type information to TypeScript.

`jsx
import { VNode } from "vue";
import { Component, Prop } from "vue-property-decorator";
import * as tsx from "vue-tsx-support";

@Component
export class MyComponent extends Vue {
_tsx!: {
// specify props type to props.
props: Pick
};

@Prop({ type: String, required: true })
text!: string;
@Prop(Boolean)
important?: boolean;

get className() {
return this.important ? "label-important" : "label-normal";
}
render(): VNode {
return {this.text};
}
}
`

You can use DeclareProps instead of { props: T }.

`jsx
import { Component, Prop } from "vue-property-decorator";
import * as tsx from "vue-tsx-support";

@Component
export class MyComponent extends Vue {
_tsx!: tsx.DeclareProps>;

/ ...snip... /
}
`

:bulb: PickProps is more convenient than Pick here, it removes attributes from Vue from completion candidates. (e.g. $data, $props, and so on)

`jsx
import { Component, Prop } from "vue-property-decorator";
import * as tsx from "vue-tsx-support";

@Component
export class MyComponent extends Vue {
_tsx!: tsx.DeclareProps>;

/ ...snip... /
}
`

:bulb: When you can make all data, computed and methods private, you can use AutoProps instead.
AutoProps picks all public members other than members from component options(render, created etc).

`jsx
import { Component, Prop } from "vue-property-decorator";
import * as tsx from "vue-tsx-support";

@Component
export class MyComponent extends Vue {
_tsx!: tsx.DeclareProps>

@Prop({ type: String, required: true })
text!: string;

@Prop(Boolean)
important?: boolean;

// data
private count = 0;
// computed
private get className() {
return this.important ? "label-important" : "label-normal";
}
// methods
private onClick() {
this.count += 1;
}

render(): VNode {
return (

{${this.text}-${this.count}}

);
}
}
`

:bulb: If your component has custom events, you can specify events handlers type additionally.

`jsx
import { Component, Prop } from "vue-property-decorator";
import * as tsx from "vue-tsx-support";

@Component
export class MyComponent extends Vue {
_tsx!: tsx.DeclareProps> &
tsx.DeclareOnEvents<{ onOk: string }>;

/ ...snip... /
}
`

:bulb: If your component uses scoped slots, you should add type to $scopedSlots by tsx.InnerScopedSlots.

`jsx
import { Component, Prop } from "vue-property-decorator";
import * as tsx from "vue-tsx-support";

@Component
export class MyComponent extends Vue {
_tsx!: tsx.DeclareProps>;

$scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;

/ ...snip... /
}
`

#### Writing component by composition api (@vue/composition-api)

Vue 3 is not supported.
To use composition api with Vue 2, You can use @vue/composition-api.

There are 2 babel presets which support JSX syntax with @vue/composition-api.
- @vue/babel-preset-jsx >= 1.2.1 (You must enable composition-api support explicitly by specifying { compositionAPI: true })
- babel-preset-vca-jsx

To make TSX-ready component by composition api, use component of vue-tsx-support/lib/vca instead of defineComponent of @vue/composition-api.

`jsx
import { computed } from "@vue/composition-api";
import * as vca from "vue-tsx-support/lib/vca";

const MyComponent = vca.component({
name: "MyComponent",
props: {
text: { type: String, required: true },
important: Boolean,
},
setup(p) {
const className = computed(() => p.important ? "label-important" : "label-normal");
return () => (
{p.text};
);
}
});
`

If your component has custom event or scoped slots, specify them types in 2nd argument of setup.

`jsx
import { computed, onMounted } from "@vue/composition-api";
import * as vca from "vue-tsx-support/lib/vca";

type AwesomeListEvents = {
onRowClicked: { item: {}, index: number };
}

type AwesomeListScopedSlots = {
row: { item: {} }
}

export const AwesomeList = vca.component({
name: "AwesomeList",
props: {
items: { type: Array, required: true },
rowHeight: { type: Number, required: true }
},
setup(p, ctx: vca.SetupContext) {
const visibleItems = computed(() => ... );
const emitRowClicked = (item: {}, index: number) => {
// Equivalent to ctx.emit("rowClicked", { item, index }),
// And event name and payload type are statically checked.
vca.emitOn(ctx, "onRowClicked", { item, index });
}

return () => (