vue-tsx-support

// tsconfig.json excerpt // { // "compilerOptions": { // "jsx": "preserve", // "jsxFactory": "VueTsxSupport", // "target": "esnext", // "module": "esnext", // "strict": true // }, // "include": [ // "src/**/*.ts", // "src/**/*.tsx", // "src/**/*.vue", // "node_modules/vue-tsx-support/enable-check.d.ts" // Alternative to explicit import // ] // } // src/components/MyCounter.tsx import Vue from 'vue'; import { createTsxComponent } from 'vue-tsx-support'; interface MyCounterProps { initialValue?: number; label: string; } interface MyCounterEvents { onChange: (newValue: number) => void; } const MyCounter = createTsxComponent<MyCounterProps, MyCounterEvents>({ name: 'MyCounter', props: { initialValue: { type: Number, default: 0 }, label: { type: String, required: true }, }, data() { return { count: this.initialValue }; }, methods: { increment() { this.count++; this.$emit('change', this.count); }, decrement() { this.count--; this.$emit('change', this.count); }, }, render() { return ( <div> <span>{this.label}: {this.count}</span> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> </div> ); }, }); export default MyCounter; // src/App.tsx (Example usage in a parent component) import Vue from 'vue'; import MyCounter from './components/MyCounter'; // Crucial for global type checking of JSX intrinsic elements like 'div', 'span' import 'vue-tsx-support/enable-check'; export default Vue.extend({ name: 'App', data() { return { totalCount: 0 }; }, methods: { handleCounterChange(newValue: number) { this.totalCount = newValue; // In a real app, this might accumulate counts console.log(`Counter changed to: ${newValue}`); }, }, render() { return ( <div> <h1>Vue TSX Application</h1> <p>Current Total: {this.totalCount}</p> <MyCounter label="Counter 1" initialValue={5} onChange={this.handleCounterChange} /> <MyCounter label="Counter 2" onChange={this.handleCounterChange} /> </div> ); }, });