How to create component with dynamic data?

[ZhengXiaowei]

Excuse me.
I want to create a component with dynamicn data, but i found the dynamic data can not be hint in the component.

for example:

// base component
import { Component, tsx } from "@/helper/support";

@Component
export default class DemoComponent extends tsx.Component<{}> {
 // the data is dynamic, such as `from`
  protected render() {
    return <p>from values: {(this as any).from}</p>;
  }
}

// a method to create the singleton component
function declareSingleComponent<ComponentProps>(component: any) {
  const Component = Vue.extend(component);
  return (params: ComponentProps | object = {}): Promise<Component> => {
    if (instance) return instance;
    return new Promise((resolve, reject) => {
      instance = new Component({
        el: document.createElement("div"),
        data: Object.assign({ visible: true }, params),
        methods: {
          resolve,
          reject,
          close() {
            this.visible = false;
            resolve(this.$data);
          }
        }
      });
      document.body.appendChild(instance.$el);
    });
  };
}

// use
import DemoComponent from "./demo";

// DemoComponent's data interface
// i want to hint this in the base component
interface DemoComponentProps {
   from?: string;
}

const demo = declareSingleComponent<DemoComponentProps>(DemoComponent);

@Component
export default class PageComponent extends tsx.Component<{}> {
 protected showComponent() {
   demo({ from: "i am showing while click" })
 }

  protected render() {
    return <p onClick={this.showComponent}>click to show component</p>;
  }
}

it can run without error, but in the base componen can not hint the data.
maybe u can provide some good ways to help me improve this.

thx~