Vue Component Autocompletion with TypeScript

Implementing intellisense (code completion, type checking, and suggestions) within Vue components written in TypeScript significantly improves developer productivity and reduces errors. This challenge focuses on creating a simple, reusable utility function that enhances autocompletion within a Vue component's template by providing type information for props and emitted events. This will involve leveraging TypeScript's capabilities to define component types and then making that information accessible during template development.

Problem Description

You are tasked with creating a TypeScript function, getComponentTypeInfo, that takes a Vue component definition (a class extending Vue or a functional component with a defineComponent call) as input and returns an object containing information about its props and emitted events. This information will be used to provide autocompletion suggestions within a Vue component's template.

What needs to be achieved:

• The function should extract prop definitions (name, type) from the component's props option.
• The function should extract emitted event names and their payload types from the component's emits option.
• The function should return a structured object containing this information.
• The function should handle both Options API and Composition API (using defineComponent) components.

Key Requirements:

• The function must be written in TypeScript.
• It should handle both Options API and Composition API components gracefully.
• It should correctly extract prop and emit information, even if they are complex types (e.g., objects, arrays, unions).
• The function should return null if the input is not a valid Vue component definition.

Expected Behavior:

When called with a valid Vue component definition, getComponentTypeInfo should return an object with the following structure:

{
  props: {
    [propName: string]: string; // Prop name: Type string
  };
  emits: {
    [eventName: string]: string; // Event name: Payload type string
  };
}

If the component has no props or emits, the corresponding object should be empty.

Edge Cases to Consider:

• Component defined using the Options API (using Vue.extend or new Vue).
• Component defined using the Composition API (defineComponent).
• Component with no props or emits.
• Invalid input (e.g., not a Vue component definition).
• Props and emits with complex types (e.g., objects, arrays, unions). While you don't need to fully resolve complex types, you should at least represent them as strings (e.g., "Object", "Array<String>", "String | Number").

Examples

Example 1: Options API Component with Props and Emits

// MyComponent.ts
import { Vue, Component } from 'vue-property-compiler'; // Mock Vue for demonstration

@Component({
  props: {
    name: String,
    age: Number,
    isActive: {
      type: Boolean,
      default: false
    }
  },
  emits: ['updateName', 'delete']
})
class MyComponent extends Vue {
  // ...
}

// Usage:
import { getComponentTypeInfo } from './your-solution';
const componentTypeInfo = getComponentTypeInfo(MyComponent);
console.log(componentTypeInfo);

Output:
{
  props: {
    name: "String",
    age: "Number",
    isActive: "Boolean"
  },
  emits: {
    updateName: "void",
    delete: "void"
  }
}

Example 2: Composition API Component with Props and Emits

// MyComponent.ts
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  emits: ['customEvent'],
  setup(props, { emit }) {
    const count = ref(0);

    const handleCustomEvent = () => {
      emit('customEvent', { data: 'some data' });
    };

    return {
      count,
      handleCustomEvent
    };
  }
});

// Usage:
import { getComponentTypeInfo } from './your-solution';
import MyComponent from './MyComponent.ts';
const componentTypeInfo = getComponentTypeInfo(MyComponent);
console.log(componentTypeInfo);

Output:
{
  props: {
    message: "String"
  },
  emits: {
    customEvent: "Object"
  }
}

Example 3: Component with No Props or Emits

// MyComponent.ts
import { Vue, Component } from 'vue-property-compiler'; // Mock Vue for demonstration

@Component({})
class MyComponent extends Vue {
  // ...
}

// Usage:
import { getComponentTypeInfo } from './your-solution';
const componentTypeInfo = getComponentTypeInfo(MyComponent);
console.log(componentTypeInfo);

Output:
{
  props: {},
  emits: {}
}

Constraints

• The function must be written in TypeScript.
• The function should handle both Options API and Composition API components.
• The function should return an object with the specified structure, or null if the input is invalid.
• Complex types should be represented as strings (e.g., "Object", "Array<String>"). Full type resolution is not required.
• The function should be reasonably performant; avoid unnecessary iterations or complex logic.

Notes

• You'll need to use TypeScript's type guards and conditional types to determine whether the input is an Options API or Composition API component.
• Consider using reflection (e.g., Reflect.getOwnPropertyNames) to access the props and emits options.
• The vue-property-compiler is a mock library used in the examples for demonstration purposes. You don't need to install or use it in your solution. Assume you have access to a standard Vue component definition.
• Focus on extracting the names and types of props and emits. You don't need to implement a full-fledged type checker or code completion engine. The goal is to provide the basic information needed for autocompletion.
• Error handling is important. Return null if the input is not a valid Vue component definition.