将 Vuejs Typescript 选项转换为组合中的奇怪问题 Api

Question

问题已解决，请仔细阅读问题，了解如何逐步解决问题

我阅读了有关组合 api(https://vue-composition-api-rfc.netlify.com/#api-introduction) 的内容，并尝试转换我现有的基于 vuejs 选项 api 上的打字稿的代码，但我未能成功工作，并且对组合 api 的真正工作方式有点困惑。

我的工作代码如下：

<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>

组合 api 中的转换版本如下，不正确运行:

<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>

哪个 webstorm 显示 3 个错误：

有没有办法正确解决这个问题？

.......

更新1:

我在使用道具时犯了错误（我以为我是新的 vue，它不需要类型，它会自动从父组件的打字稿中获取它）。多亏了旧石器时代，问题已经解决并得到解决。

以及在获取道具类型错误方面遇到类似问题的任何人，如下图所示

感谢 https://frontendsociety.com/using-a-typescript-interfaces-and-types-as-a-prop-type-in-vuejs-508ab3f83480 ，您可以将创建的类型接口作为函数传递，如下所示：

但还有一些问题需要解决，如下所示：

1.when 我删除了反应性，反应性似乎无法正常工作，并且在模板中显示 "unresolved variable or missing import statement"

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

update2分享道具和使用合成功能：

对我来说，在将基于 api 的选项转换为组合 api 之后，它似乎比新的更好，感谢 paleo 和 Maximilian shrwazmuller（我强烈建议免费看这个视频：https://www.youtube.com/watch?v=V-xK3sbc7xI), and google search struggling with this https://vue-composition-api-rfc.netlify.com/api.html#template-refs 我将代码重写为如下所示：

<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>

如您所见，它非常简洁，因为组件之间共享的所有内容都在另一个文件（名称：inputFiled.compositons）中，如下所示：

//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
  }

如您所见，通过此功能我们可以充分利用打字稿。

最后我要告诉你，如果你遵循路径并使用 vue-composition api，你的项目将完美运行，但 webstorm 会向你显示一些关于模板中特定代码的警告，比如未解决多变的。这些新的语法支持正在开发中，您可以在本期中看到 https://youtrack.jetbrains.com/issue/WEB-41565 所以不用担心并使用它。

Answer 1

阅读documentation on props。这是一个例子：

    props: {
      instance: {
        type: Object,
        required: true
      },
      value: {
        type: Object,
        required: true
      },
      formSection: {
        type: Object,
        required: true
      },
      isEnable: {
        type: Boolean,
        required: false
      },
    },

为了启用更好的类型，可以使用PropType：

import { PropType } from "@vue/composition-api/dist/component/componentProps";
// …

    props: {
      instance: {
        type: Object as PropType<FormGeneratorInputField>,
        required: true
      },
      // …

要发出事件，请按照错误消息中的建议进行操作：context.emit("updateValue")。

关于InputFieldHelper的实例，我建议重构这个class实现：

class InputFieldHelper {
  readonly inputField: {
    inputValue: string | null
  }

  constructor(/* … */) {
    this.inputField = reactive({
      inputValue: null
    })
  }
}

然后，使用它：

const helper = new InputFieldHelper(props.value, props.instance, props.formSection, props.isEnable);

const inputField = helper.inputField;

将 Vuejs Typescript 选项转换为组合中的奇怪问题 Api

odd problems in Convert Vuejs Typescript Options to Composition Api

typescript

vue.js

vuejs2

vuejs3

vue-composition-api