Gists - Typescript

On gists

Better Vue components with TS

3.3.2025

JavaScript Typescript Vue.js

better-vue-with-components.vue #

<!-- 1. PROPS  -->

<!-- JS -->
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  foo: { type: String, required: true },
  bar: Number,
});

// props.foo is a string
// props.bar is a number or undefined
</script>


<!-- TS -->
<script setup lang="ts">
const props = defineProps<{
  foo: string;
  bar?: number;
}>()
</script>


<script setup lang="ts">
interface Props {
  foo: string;
  bar?: number;
}

const props = defineProps<Props>()
</script>



<!-- 2. EMITS  -->
<!-- JS -->
<script setup>
const emit = defineEmits(['change', 'update'])
</script>

 <!-- TS -->
 <script setup lang="ts">
const emit = defineEmits<{
  change: [id: number]
  update: [value: string]
}>()
</script>



<!-- 3. Typing Ref and Reactive Data => Inference -->
<script setup>
import { ref } from 'vue';

const count = ref(0); 
count.value = 'string';  // error, inference, we expect number
</script>


<!-- 4. Typing Server Responses -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';

interface User {
  id: number;
  name: string;
  email: string;
}

const userData = ref<User | null>(null);

onMounted(async () => {
  const response = await fetch('https://api.example.com/user');
  const data: User = await response.json();
  userData.value = data; // TypeScript ensures data usages match the User interface
});
</script>


<!-- 5. Typing Computed Data -->
import { ref, computed } from 'vue'

const count = ref(0)
// inferred type: ComputedRef<number>
const double = computed(() => count.value * 2)
// => TS Error: Property 'split' does not exist on type 'number'
const result = double.value.split('')

// or explicitely define return type
const double = computed<number>(() => {
  // type error if this doesn't return a number
})



<!-- 6. Typing Scoped Slots-->
<template>
  <slot :msg="message"></slot>
</template>

<script setup lang="ts">
const message = 'Hello, Vue!';

const slots = defineSlots<{
  default: (props: { msg: string }) => any;
}>()
</script>


<!-- 7. Typing Template Refs -->
<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue';

const myInput = useTemplateRef('my-input');

onMounted(() => {
  myInput.value?.focus(); 
});
</script>

<template>
  <input ref="my-input" />
</template>



<!-- 8. Typing Provide/Inject -->
<!-- ParentComponent.vue -->
<script setup lang="ts">
import { provide } from 'vue';

const theme = 'dark';
provide('theme', theme);
</script>

<!-- ChildComponent.vue -->
<script setup lang="ts">
import { inject } from 'vue';

const theme = inject<string>('theme'); // Inject with expected type
// TypeScript ensures that 'theme' is of type string
</script>


<!-- 9. Generics -->
<script setup lang="ts" generic="T">
defineProps<{
  items: T[];      // Array of items of type T
  selected: T;     // Single selected item of type T
}>()
</script>


<!-- 10. Typed Composables -->
// useUser.ts
import { ref } from 'vue';

interface User {
  id: number;
  name: string;
  age: number;
}

export function useUser() {
  const user = ref<User | null>(null);

  function fetchUser(id: number) {
    // Fetching user logic
    user.value = { id, name: 'John Doe', age: 30 };
  }

  return { user, fetchUser };
}

On gists

Template literals

23.10.2024 • 7.2.2025 (aktualizováno)

Typescript

index.ts #

type Pozdrav = `ahoj${string}`;
let ok: Pozdrav = "ahojsvete";     // ✅
let nok: Pozdrav = "nazdar";       // ❌ musí začínat "ahoj"



// -------------------- //
type Velikost = "small" | "medium" | "large";
type Barva = "red" | "blue";
type TrickoSVelikosti = `${Velikost}-${Barva}`;

let tricko: TrickoSVelikosti = "small-red";    // ✅
let tricko2: TrickoSVelikosti = "small-green"; // ❌ green není v typu Barva



// -------------------- //
// Uppercase/Lowercase - převod na velká/malá písmena
type Pozdrav = "ahoj" | "nazdar";
type KriciciPozdrav = `${Uppercase<Pozdrav>}!`;  // typ je "AHOJ!" | "NAZDAR!"

// Capitalize - první písmeno velké
type Capitalize<S extends string> = `${Uppercase<S[0]>}${Lowercase<S>}`;
type Jmeno = Capitalize<"petr">;  // typ je "Petr"




// -------------------- //
// string s přesnou délkou 2
type DvaPismena = string & { length: 2 };
type Status = `${DvaPismena}-${number}`;

let ok: Status = "OK-123";    // ✅
let nok: Status = "OK1-123";  // ❌ první část musí mít délku 2




// -------------------- //
type Email = `${string}@${string}.${string}`;
let email: Email = "test@example.com";   // ✅
let neplatny: Email = "testexample.com"; // ❌ chybí @




// -------------------- //
// Definujeme povolené hex znaky
type HexDigit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" 
               | "a" | "b" | "c" | "d" | "e" | "f";

// Přesná definice hex barvy
type HexColor = `#${HexDigit}${HexDigit}${HexDigit}${HexDigit}${HexDigit}${HexDigit}`;

let barva1: HexColor = "#ff00ff";  // ✅
let barva2: HexColor = "#ff00";    // ❌ příliš krátké
let barva3: HexColor = "#gg0000";  // ❌ 'g' není hex digit

On gists

Generic constract vs Utility type

23.10.2024 • 7.2.2025 (aktualizováno)

Typescript

comparison.ts #

// 1. Primitivní typy - lze zjednodušit
// S generics:
function processValue<T extends string>(value: T) { }
// Jednodušeji:
function processValue(value: string) { }

// 2. Union typy - lze zjednodušit
type Fruit = "apple" | "banana" | "orange";
// S generics:
function processFruit<T extends Fruit>(fruit: T) { }
// Jednodušeji:
function processFruit(fruit: Fruit) { }

// 3. Literal typy - lze zjednodušit
// S generics:
function processLiteral<T extends "yes" | "no">(answer: T) { }
// Jednodušeji:
function processLiteral(answer: "yes" | "no") { }

// 4. Array typy - lze zjednodušit v základním případě
// S generics:
function processArray<T extends any[]>(arr: T) { }
function processStringArray<T extends string[]>(arr: T) { }
// Jednodušeji:
function processArray(arr: any[]) { }
function processStringArray(arr: string[]) { }

// 5. Function typy - lze zjednodušit
type Logger = (msg: string) => void;
// S generics:
function withLogging<T extends Logger>(logger: T) { }
// Jednodušeji:
function withLogging(logger: Logger) { }

// 6. Class typy - lze zjednodušit v základním případě
class Animal { }
// S generics:
function processClass<T extends Animal>(instance: T) { }
// Jednodušeji:
function processClass(instance: Animal) { }

// 7. Generický typ s extends - POUZE PŘES GENERIC CONSTRAINT
interface Box<T> {
    value: T;
}
interface NumberBox<T extends number> extends Box<T> {
    increment(): void;
}

// 8. Kombinace více typů - lze zjednodušit
type StringWithLength = string & { length: number };
// S generics:
function processString<T extends string & { length: number }>(value: T) { }
// Jednodušeji:
function processString(value: StringWithLength) { }

// 9. Conditional type - POUZE PŘES GENERIC CONSTRAINT
type NonNullable<T> = T extends null | undefined ? never : T;

On gists

Generic constraint

23.10.2024 • 7.2.2025 (aktualizováno)

Typescript

index.ts #

/*
omezení, která můžeme přidat na generické typy, aby splňovaly určité podmínky.
*/

// T musí být objekt
function getProperty<T extends object, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

// Použití:
const person = { name: "Jan", age: 30 };
const name = getProperty(person, "name"); // OK
const invalid = getProperty(person, "invalid"); // Chyba - 'invalid' není klíč v person

On gists

Assertion / Casting

22.10.2024 • 23.5.2025 (aktualizováno)

Typescript