所以我对 Typescript 和 VueJS 及其所有新功能都很陌生。

一切都按预期工作，但我无法摆脱打字稿错误并同时使用 v-model。

我正在开发一个网络视图，供成员检查和更改其属性。我从 API 获取会员数据并将其存储在 PiniaStore 中。这意味着我有几个需要成员的数字和字符串的输入字段。 AFAIK v-model 是输入字段的最佳选择。

 Type 'string | number | null | undefined' is not assignable to type 'Nullable<string>'.
  Type 'number' is not assignable to type 'Nullable<string>'.

所有关于此错误的 stackoverflow 问题的建议解决方案（例如这个或这个）都不适合我的问题。我发现了一个不好的解决方法，我不喜欢在模板块中使用更改事件而不是 v-model，并且在我的脚本中出现相同的错误，但通过 //@ts-ignore 忽略它。

首先，我真正要求的是如何注释掉 VueJs 模板块中的打字稿错误，这里已经问过了。

其次，如何解决这个问题而不出现打字稿错误？

查看下面的代码，我在 v-model 处出现此错误，并且不知道如何修复它：

<script setup lang="ts">
import { useMembershipStore } from "@/stores/membership";

const membershipStore = useMembershipStore();
membershipStore.getMembership();
const { membership } = storeToRefs(membershipStore);

function save() {
  if (membership.value) {
    membershipStore.updateMembership(membership.value);
  }
}
</script>


<template>
  <div v-if="membership === null" class="loading">
    <h2>Loading</h2>
  </div>
  <div v-else class="members-table">
    <div v-for="(value, key) in Object.keys(membership)" >
      <br />
      <InputText type="text"
        v-model="membership[value as keyof typeof membership]"
      />
    </div>
    <Button @click="save()" />
  </div>
</template>

这是我的类型定义： membershipstore.ts

export type MembershipStoreState = {
  membership: Member | null;
};

类型.ts

export interface Member {
  id?: number;
  user_id?: string;
  user_attr: string | null;
  create_attr?: string | null;
  admin_attr?: string | null;
}

我还弄清楚了 Nullable 类型的来源。它来自其组件InputText的PrimeVues类型定义，可以在这里找到：

export interface InputTextProps extends InputHTMLAttributes {
    /**
     * Value of the component.
     */
    modelValue?: Nullable<string>;
}

完整的代码示例可以在这里找到

使用更改事件的完整代码示例，其中包含错误的解决方法