Typowanie Props

W Laboratorium Kwantowym każdy moduł stacji musi precyzyjnie deklarować jakie dane przyjmuje. W Vue 3 z TypeScript używamy generycznej składni

defineProps<{}>()

do typowania propsow.

defineProps z generycznym typem

Zamiast runtime validation (obiekt z

type

,

required

), możemy użyć składni TypeScript:

1<script setup lang="ts">
2// Składnia generyczna — typy sprawdzane w czasie kompilacji
3const props = defineProps<{
4  title: string
5  count: number
6  isActive: boolean
7}>()
8</script>

To równoważne tradycyjnej składni:

1<script setup>
2// Stara składnia — runtime validation
3const props = defineProps({
4  title: { type: String, required: true },
5  count: { type: Number, required: true },
6  isActive: { type: Boolean, required: true }
7})
8</script>

Wyodrębnianie interfejsu

Gdy komponent ma wiele propsow, warto wyodrębnic interfejs:

1<script setup lang="ts">
2interface StationModuleProps {
3  name: string
4  status: 'online' | 'offline' | 'maintenance'
5  powerLevel: number
6  crew?: string[]  // opcjonalny prop (?)
7}
8
9const props = defineProps<StationModuleProps>()
10</script>

Znak

?

oznacza, że prop jest opcjonalny — nie musi być przekazany.

withDefaults

TypeScript generics nie pozwalają na wartości domyślne w

defineProps

. Do tego służy

withDefaults

:

1<script setup lang="ts">
2interface PanelProps {
3  title: string
4  variant?: 'primary' | 'danger' | 'success'
5  maxItems?: number
6  showHeader?: boolean
7}
8
9const props = withDefaults(defineProps<PanelProps>(), {
10  variant: 'primary',
11  maxItems: 10,
12  showHeader: true
13})
14</script>

Teraz

props.variant

będzie

'primary'

jeśli nie zostanie przekazany.

Union Types w Props

TypeScript pozwala definiować precyzyjne typy:

1<script setup lang="ts">
2type AlertLevel = 'info' | 'warning' | 'critical'
3
4interface AlertProps {
5  level: AlertLevel
6  message: string
7  code?: number
8}
9
10const props = defineProps<AlertProps>()
11</script>
12
13<template>
14  <div :class="['alert', props.level]">
15    {{ props.message }}
16  </div>
17</template>

Złożone typy Props

Props mogą zawierać zagnieżdżone obiekty i tablice:

1<script setup lang="ts">
2interface Coordinate {
3  x: number
4  y: number
5  z: number
6}
7
8interface SensorData {
9  id: string
10  location: Coordinate
11  readings: number[]
12  metadata?: Record<string, unknown>
13}
14
15interface SensorPanelProps {
16  sensors: SensorData[]
17  selectedId: string | null
18  onSelect?: (id: string) => void
19}
20
21const props = defineProps<SensorPanelProps>()
22</script>

Record<string, unknown>

to typ słownikowy — obiekt z kluczami string i wartościami dowolnego typu.