Back to Snippets
Core Syntax
Complex

Conditional Rendering with Type Guards

Implement type-safe conditional rendering using TypeScript type guards in Vue 3 and React 18. This pattern ensures that UI rendering logic is strictly typed, preventing rendering of invalid data and eliminating "cannot access property of undefined" errors. Type guards narrow down union types to specific types during conditional checks. Use cases: Rendering different UI for different data types, authenticated/unauthenticated states, loading/error/success states with typed payloads.

Vue 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

Related Snippets

Core Syntax
Complex

Reactive State Declaration with TypeScript

Declare strongly-typed reactive state for primitive values and objects in Vue 3 and React 18. Vue uses ref (for...

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  
  // Reactive primitive with explicit type (ref for primitives)
  const count = ref<number>(0);
  const username = ref<string>('John Doe');
  const isAuthenticated = ref<boolean>(false);
Core Syntax
Complex

Typed Event Handling & Custom Events

Implement type-safe event handling for native DOM events and custom events in Vue 3 and React 18. Vue uses defineEmi...

<script setup lang="ts">
  import { defineEmits } from 'vue';
  
  // Type-safe custom events with payload types
  const emit = defineEmits<{
    // Event name: [payload type]
    'user-selected': [userId: number];
    'filter-changed': [filters: { search: string; active: boolean }];
Core Syntax
Complex

Composable/Tooltip Functions with Generics

Create reusable, type-safe composable functions (Vue) and custom hooks (React) using TypeScript generics. Generics e...

<script setup lang="ts">
  // Generic composable for data transformation
  const useDataTransformer = <T>() => {
    // Generic function to filter array items by a property
    const filterByProperty = (
      items: T[], 
      property: keyof T, 
      value: T[keyof T]