After successfully solving the issue, take a step-by-step look through the question to understand how the problems were fixed.

I recently explored the composition API () and attempted to convert my TypeScript-based existing code from Vue.js Option API. Unfortunately, I couldn't get it to work properly and ended up feeling a bit confused about how the composition API functions.

Below is my working code:

<script lang="ts">
  import Vue from "vue";
  import {inputFields} from "@/mixins/inputField/inputField";
  import VuePersianDatetimePicker from "vue-persian-datetime-picker"
  import {util_timestampz_formatter, util_timestampz_now} from "@/utils/commonUtility";
  import {InputFieldHelper} from "@/mixins/Helpers/FormGeneratorInputFieldHelper/InputField.Helper.mixin";

  export default Vue.extend({
    name: "DateTimePicker",
    props: ['instance', "value", "formSection", "isEnable"],
    components: {
      datePicker: VuePersianDatetimePicker
    },
    data() {
        return {
          inputField: new InputFieldHelper(this.value, this.instance, this.formSection, this.isEnable)
      }
    },
    mounted() {
        //@ts-ignore
        this.instance.min = util_timestampz_now();
    },
    methods: {
      updateValue() {
          let new_data = this.inputField.updateValue();
          new_data ? this.$emit("updateValue", new_data) : "";
      },
      updateDateTime(time: string) {
          //@ts-ignore
          this.inputField.inputValue = util_timestampz_formatter(this.inputField.inputValue);
          //@ts-ignore
          this.updateValue();
      },
    }
  });
</script>

And here is the converted version using the composition API which currently has some issues:

<script lang="ts">
  import Vue from "vue";
  import {reactive, createComponent, onMounted} from "@vue/composition-api";
  import VuePersianDatetimePicker from "vue-persian-datetime-picker"
  import {util_timestampz_formatter, util_timestampz_now} from "@/utils/commonUtility";
  import {InputFieldHelper} from "@/mixins/Helpers/FormGeneratorInputFieldHelper/InputField.Helper.mixin";
  import {FormGeneratorInputField} from "@/types";

  export default createComponent({
    name: "DateTimePicker",
    props: {
      instance,
      value,
      formSection,
      isEnable,
    },
    components: {
      datePicker: VuePersianDatetimePicker
    },
    setup(props, context) {
      const inputField = reactive(new InputFieldHelper(props.value, props.instance, props.formSection, props.isEnable));
      onMounted(() => {
        props.instance.min = util_timestampz_now();
      });
      const updateValue = () => {
        let new_data = inputField.updateValue();
        new_data ? context.$emit("updateValue", new_data) : "";
      };
      const updateDateTime = (time: string) => {
        inputField.inputValue = util_timestampz_formatter(inputField.inputValue);
        updateValue();
      };
      return {
        inputField, updateValue, updateDateTime
      }
    }
  });
</script>

Some errors are being displayed in WebStorm related to the code:

https://i.sstatic.net/H73Q7.png

Is there a way to resolve these errors correctly?

.................

Update 1:

I realized that I made a mistake in handling props (I assumed Vue would automatically handle typescript definitions). Thanks to paleo, the initial problem has been resolved. Furthermore, if you encounter similar type errors for props as shown below: https://i.sstatic.net/OynM7.png

Thanks to , you can pass your created type interface as a function as demonstrated below: https://i.sstatic.net/e6sX7.png

However, there are still some unresolved issues that need to be addressed, such as:

1. When I removed `reactive`, reactivity seems to not function properly, leading to an "unresolved variable or missing import statement" error in the template. https://i.sstatic.net/nicbU.png

..........................

Update 2: Sharing props and utilizing composition functions:

Upon converting from the option-based API to the composition API, I noticed that the latter was more efficient. Special thanks to paleo and Maximilian Shrwa Muller (I highly recommend watching this free video: https://www.youtube.com/watch?v=V-xK3sbc7xI), along with considerable Google search efforts, especially struggling with this link . As a result, I rewrote the code as follows:

<script lang="ts">
  import {createComponent, onMounted} from "@vue/composition-api";
  import VuePersianDatetimePicker from "vue-persian-datetime-picker"
  import {util_timestampz_formatter, util_timestampz_now} from "@/utils/commonUtility";
  import {
    useInputFieldComposition,
    inputFieldProps
  } from "@/mixins/Helpers/FormGeneratorInputFieldHelper/inputField.composition";
  import {ComponentPropsOptions} from "@vue/composition-api/dist/component/componentProps";

  export default createComponent({
    name: "DateTimePicker",
    props: inputFieldProps as ComponentPropsOptions,
    components: {
      datePicker: VuePersianDatetimePicker
    },
    setup(props, context) {
      const {inputField, updateValue} = useInputFieldComposition(props, context);
      onMounted(() => {
        props.instance.min = util_timestampz_now();
      });
      const updateDateTime = (time: string) => {
        inputField.inputValue = util_timestampz_formatter(inputField.inputValue);
        updateValue();
      };
      return {
        inputField, updateValue, updateDateTime
      }
    }
  });
</script>

This approach maintains neatness since everything shared among components resides in another file named `inputField.compositions` as showcased below:

//inputField.composition.ts
import {PropType, reactive} from "@vue/composition-api";
import {FormGeneratorInputField} from "@/types";
import {InputFieldHelper} from "@/mixins/Helpers/FormGeneratorInputFieldHelper/InputField.Helper.mixin";

export const inputFieldProps = {
  instance: {
    type: Object as PropType<FormGeneratorInputField>,
    required: true
  },
  value: {
    type: Object,
    required: true
  },
  formSection: {
    type: String,
    required: true
  },
  isEnable: {
    type: Boolean,
    required: true
  },
};
export const useInputFieldComposition = (props: any, context: any) => {
  let inputField  = reactive(new InputFieldHelper(props.value, props.instance, props.formSection, props.isEnable));
  const updateValue = (): any => {
    let new_data = inputField.passInfoMixedValue();
    new_data ? context.emit("updateValue", new_data) : "";
    return new_data;
  };

  return {
    props, inputField, updateValue
  }

With this feature, TypeScript can be fully utilized for optimal project development.

Lastly, please note that although your project will work perfectly when using the Vue Composition API, WebStorm might display warnings about specific parts of the code in the template, such as unresolved variables. These updates fall under ongoing development, as indicated in this issue: .