使用帶有TypeScript的Vue3SFC的屬性鍵入錯誤

我很難嘗試在 Vue3 中使用屬性。我嘗試了幾種不同的方法，但它們都未能通過型別檢查階段（例如：）yarn build。

我的專案是使用 Vite 創建的一個全新的 vue3-ts 專案。這是我的組件：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: "Test",
  props: {
    label: {
      type: String as PropType<string>,
      required: true,
    },
  },
  methods:  {
    onClick() {
      console.log(this.label);  // This line yields an error!
    },
  },
});
</script>

我收到一個this.label不存在的錯誤：Property 'label' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<Readonly<ComponentPropsOptions<Data>>>> & ...

（volar抱怨同樣的事情）。

我嘗試了幾種不同的方法，但都沒有更好的運氣，它們是：

使用<script setup>定義道具的方法：

<script setup lang="ts">
const props = defineProps({
  classes: String,
  label: String,
})
</script>

這也警告未使用的props變數。這沒什么大不了的，但是上面的錯誤仍然存??在。

setup在我的組件上使用方法：

  setup(props) {

    defineProps({
      classes: String,
      label: String,
    })
  },

使用老式的 props 定義形式，對定義型別有點過分熱情：

export default defineComponent({
  name: "AppStory",
  props: {
    label: {
      type: String as PropType<string>,
      required: true,
    },
  },

一種稍微不那么熱心的方法：

export default defineComponent({
  name: "AppStory",
  props: {
    label: {
      type: String,
      required: true,
    },
  },

有沒有人有使用屬性的 Vue3 的 SFC 作業示例？我究竟做錯了什么？我在那里找到的所有示例都沒有道具，或者不使用 TS。Vue'3 檔案不是非常以 TS 為中心，而且似乎沒有任何示例涵蓋這種（相當基本的）場景。

uj5u.com熱心網友回復：

好吧，我默認使用 vue-ts 設定創建了一個新的 vite 應用程式，而您在第一個示例中唯一缺少的是匯入。PropType 型別。

<template>
  <div>
    <button @click="onClick">{{ label }}</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: "Test",
  props: {
    label: {
      type: String as PropType<string>,
      required: true,
    },
  },
  methods: {
    onClick() {
      console.log(this.label); // This line yields an error!
    },
  },
});
</script>

這是父組件（默認 App.vue 組件）

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld label="Hello Vue 3   TypeScript   Vite" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

這對我來說很好。

現在在腳本標簽中使用 setup 關鍵字的相同示例：

<template>
  <div>
    <button @click="onClick">{{ label }}</button>
  </div>
</template>

<script lang="ts" setup>
import { PropType } from "vue";
const props = defineProps({
  label: {
    type: String as PropType<string>,
    required: true,
  },
});

const onClick = () => {
  console.log(props.label); // This line yields an error!
};
</script>

它也有效。

最后使用 setup 方法：

<template>
  <div>
    <button @click="onClick">{{ label }}</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: "Test",
  props: {
    label: {
      type: String as PropType<string>,
      required: true,
    },
  },
  setup(props) {
    const onClick = () => {
      console.log(props.label); // This line yields an error!
    };
    return { onClick };
  },
});
</script>

希望這能解決您的問題。

標籤：

上一篇：發出發布請求時如何更改資料中的鍵名

下一篇：是什么導致了這個LaravelAPI中的資料驗證錯誤？