纤细 typescript 组件需要至少一个支柱

ndh0cuux  于 2023-01-10  发布在  TypeScript
关注(0)|答案(2)|浏览(127)

我想创建一个苗条的组件,至少需要一个 prop 传递给它。
假设我有一个包含两个导出属性ab的组件:

export let a: number | undefined;
export let b: number | undefined;

只允许传递ab

<Component a={1} />
<Component b={1} />

但不通过任何一项不应:

<Component />

总体类型如下所示:

type Component = {
    a: number
} | {
    b: number
}

但我不知道如何告诉苗条这种类型。

zkure5ic

zkure5ic1#

我想你是说这个

type PropsA = {
  a: number;
  b?: never
}

type PropsB = {
  a?: never;
  b: number
}

type Props = PropsA | PropsB

const A: Props = {
  a: 1,
}

const B: Props = {
  b: 1,
}
zpqajqem

zpqajqem2#

有一种方法可以通过$$Props指定属性类型,但这种方法会尝试将类型与导出中指定的类型进行协调,这可能会导致错误。具体情况取决于TS配置。
例如

<script lang="ts">
    type $$Props =
        { a: number, b?: never } |
        { b: number, a?: never }

    export let a: number | undefined
    export let b: number | undefined
</script>

也许你可以把它用在你的场景中。
RFC for this feature(可能留下一些反馈here

相关问题