如何解决类型'string‘不能被分配到键入’AOI‘\DIMM’\x{e76f}\x{e76f}未定义的‘ts’错误。

Question

我正在使用TS进行一个vue3项目，遇到了以下错误：

​

我有3个潜在的值来自我的后端，我的kind道具正在寻找这3个值中的一个作为字符串。

道具本身看起来像：kind: { type: String as PropType<'AOI' | 'DIMM' | 'FAN'> }

知道为什么会发生这个错误吗？无论如何，后端只会发送这3个值中的一个，所以我假设这不会是一个问题。

如果你还需要更多的内容，请告诉我！

干杯!

Answer 1

您可以将字符串提取到type中(正如@Alexey的回答所指出的那样)，并从组件导出type，以便调用方可以使用它声明他们的kind绑定：

<!-- MyComponent.vue -->
<script lang="ts">
import { defineComponent, type PropType } from 'vue';

export type KindType = 'AOI' | 'DIMM' | 'FAN'

export default defineComponent({
  props: {
    kind: { type: String as PropType<KindType> }
  },
})
</script>

此组件的调用方可以使用类型断言 (ref('myString' as KindType))告诉TypeScript将任何字符串视为KindType，如下所示。这里的一个缺点是允许无效字符串(即，不是KindType字符串中的一个)，这可能导致意外的行为。

<!-- App.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import MyComponent, { type KindType } from './components/MyComponent.vue'

const kind = ref('foo' as KindType) // ⛔️ compiles but allows any string
</script>

<template>
  <MyComponent :kind="kind" />
</template>

一个更健壮的解决方案是使用ref向ref<KindType>('myString')传递一个类型参数。这会在字符串值无效时启用有用的编译器错误。

<script setup lang="ts">
import { ref } from 'vue'
import MyComponent, { type KindType } from './components/MyComponent.vue'

const kind = ref<KindType>('FAN') // ✅ allows only KindType strings
</script>

<template>
  <MyComponent :kind="kind" />
</template>

演示

Answer 2

难道我没有办法在前面处理这个问题吗？

要明确的是，我并不是建议改变后端本身，而是在前端指定其签名的位置。

但是，如果不想改变这种情况，只需添加一个类型断言someBackendMethod(...) as "AOI" | "DIMM | "FAN"即可。基本上来说，“我知道这个特定的字符串是这3中的一个，即使编译器没有”。但问题是，如果后端发生变化，那么它实际上有另一个可能的值，编译器不会告诉您需要更改这个位置。

另一个建议是给这个工会取个名字：

type SomeName = "AOI" | "DIMM | "FAN"

然后

kind: { type: String as PropType<SomeName> }

someBackendMethod(...) as SomeName

因此，至少如果添加/删除了值，您只需要更改一个位置。