快捷導航

Typescript定義多個接口類型聲明的方式小結(jié)

更新時間：2025年01月24日 08:32:23 作者：斜杠poven

這篇文章主要介紹了Typescript定義多個接口類型聲明的方式小結(jié),在 TypeScript 中,您可以使用交叉類型(&)或聯(lián)合類型(|)來組合多個接口,從而實現(xiàn)多個接口類型的混合,文中通過代碼講解的非常詳細,需要的朋友可以參考下

1. 使用交叉類型（&）：

如果您想將多個接口的屬性合并到一起（即所有接口的屬性都必須存在），可以使用交叉類型。

例如，假設(shè)我們有兩個接口：

interface FooProps {
  foo: string
}

interface BarProps {
  bar?: number
}

interface BazProps {
  baz: boolean
}

您可以通過交叉類型將這些接口組合成一個類型：

<script setup lang="ts">
interface FooProps {
  foo: string
}

interface BarProps {
  bar?: number
}

interface BazProps {
  baz: boolean
}

const props = defineProps<FooProps & BarProps & BazProps>()
</script>

在這個例子中，props 將會包含 foo、bar 和 baz 屬性，bar 是可選的。

2. 使用聯(lián)合類型（|）：

如果您希望props可以是多個接口中的任意一個，可以使用聯(lián)合類型。

例如：

<script setup lang="ts">
interface FooProps {
  foo: string
}

interface BarProps {
  bar?: number
}

const props = defineProps<FooProps | BarProps>()
</script>

在這個例子中，props 可以是 FooProps 或 BarProps 之一。也就是說，props 要么有 foo 屬性，要么有 bar 屬性，且 bar 是可選的。

3. 組合多個類型的例子：

您也可以結(jié)合使用交叉類型和聯(lián)合類型，來實現(xiàn)更復(fù)雜的組合方式。

例如：

<script setup lang="ts">
interface FooProps {
  foo: string
}

interface BarProps {
  bar?: number
}

interface BazProps {
  baz: boolean
}

const props = defineProps<(FooProps & BarProps) | BazProps>()
</script>

這個例子表示 props 要么包含 foo 和 bar 屬性，要么只包含 baz 屬性。