Back to Snippets
Core Syntax
Complex

Typed Formatter Utilities with Template Literals

Create type-safe formatting utilities using TypeScript template literal types and generic functions. These utilities enforce consistent formatting of dates, currency, numbers, and strings while maintaining type safety through template literal constraints. Vue and React implementations leverage the same typed utility functions, ensuring consistent formatting across frameworks. Use cases: Financial applications (currency formatting), data visualization (number formatting), internationalization (date/string formatting), and form validation (pattern formatting).

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

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

Conditional Rendering with Type Guards

Implement type-safe conditional rendering using TypeScript type guards in Vue 3 and React 18. This pattern ensures t...

<script setup lang="ts">
  // Define union type for different states
  type LoadingState = { type: 'loading' };
  type SuccessState = { type: 'success'; data: string[] };
  type ErrorState = { type: 'error'; message: string };
  type DataState = LoadingState | SuccessState | ErrorState;

  // Type guard functions (type predicates)