ytnozto

GregorWedlich

_gregor_paul_

hello@sil3ntrunning.net

Ich bin aktuell ziemlich angetan von Deno und dessen Ökosystem. Seit Version 2 vor einigen Tagen erschienen ist, habe ich mich intensiver mit den verschiedenen Aspekten von Deno beschäftigt. Unter anderem habe ich den Package Manager JSR erkundet, der unabhängig arbeitet und nicht auf Deno selbst angewiesen ist, aber dennoch das gesamte Deno-Ökosystem ergänzt. In diesem kurzen Tutorial möchte ich dir einen Überblick geben, wie einfach es ist, eigene JSR-Pakete zu veröffentlichen.

## Projekt erstellen

Um zu starten, initialisiere dein Projekt mit folgendem Befehl:

```bash
deno init orakel-otter // Unser beispiel Projektname
```
## Projekt öffnen

Wechsel in das Projektverzeichnis:
```bash
cd orakel-otter
```

## Aufräumen

Für dieses Tutorial können wir die Datei main_test.ts löschen. Es ist jedoch auch in Ordnung, sie zu behalten. Öffne jetzt die `main.ts` und entferne den boilerplate Code.

## Unsere App erstellen

Ich habe hier ein einfaches Programm, das die aktuellen Bitcoin-Preise von einer API abruft. Mir ist nichts Besseres eingefallen, aber es dient dazu, zu veranschaulichen, wie das Veröffentlichen von JSR-Paketen mit Deno 2 funktioniert. Ich habe es 🦦 Orakel Otter 🔮 genannt, warum auch immer :-)

Hier ist unser Programm, das die aktuellen Bitcoin-Preise von einer API abruft:
```typescript
type Response = [string, number][];

async function orakelOtter(currency: string = "ALL"): Promise<Response> {
  try {
    const response = await fetch("https://mempool.space/api/v1/prices/");
    const pricesObj = await response.json();
    const prices = Object.entries(pricesObj);

    if (currency === "ALL") {
      return prices as Response;
    }

    const filteredPrice = prices.filter(
      (price) => price[0] === currency?.toUpperCase()
    );

    if (filteredPrice.length > 0) {
      return [...prices[0], filteredPrice[0]] as Response;
    } else {
      throw new Error(`Currency ${currency} not found.`);
    }
  } catch (error) {
    console.error(error);
    return [];
  }
}

const getPrice = await orakelOtter();
console.log(getPrice);
```

**Führe folgenden Befehl aus, um das Programm zu testen:**

```bash
deno task dev
```
Das Terminal wird um Erlaubnis bitten, auf das Netzwerk zuzugreifen. Bestätige dies mit y:
```bash
Watcher File change detected! Restarting!
┏ ⚠️  Deno requests net access to "mempool.space:443".
┠─ Requested by `fetch()` API.
┠─ Learn more at: https://docs.deno.com/go/--allow-net
┠─ Run again with --allow-net to bypass this prompt.
┗ Allow? [y/n/A] (y = yes, allow; n = no, deny; A = allow all net permissions) > y
```
Sobald der Zugriff gewährt ist, solltest du eine Ausgabe wie diese sehen:
```bash
✅ Granted net access to "mempool.space:443".
[
  [ "time", 1728830104 ],
  [ "USD", 62513 ],
  [ "EUR", 57121 ],
  [ "GBP", 47771 ],
  [ "CAD", 86060 ],
  [ "CHF", 53563 ],
  [ "AUD", 92464 ],
  [ "JPY", 9344100 ]
]
```
## Projekt zur Veröffentlichung auf JSR.IO vorbereiten

Um das Paket auf JSR.IO zu veröffentlichen, benötigst du ein Konto. Nach dem Einloggen gehst du auf dein Profilbild, wählst „+ Ein Paket veröffentlichen“ und erstellst einen Scope. Zum Beispiel kannst du deine Initialen als Scope verwenden. Danach benennst du dein Paket "orakel-otter" (oder wie auch immer du dein Projekt genannt hast) und klickst auf „Create“.

## Codeanpassungen

Vor der Veröffentlichung müssen wir uns noch die main.ts anpassen und eine Dokumentation hinzufügen.

In der main.ts nehmen wir folgende Änderungen vor:

1.	Entferne die console.log()-Zeile und die Instanzierung.
```typescript
const getPrice = await orakelOtter();
console.log(getPrice);
```
2.	Füge export zur orakelOtter-Funktion hinzu, damit sie als Modul zugänglich ist.
3.	Füge eine Dokumentation zur Funktion hinzu, was optional ist, aber für einen besseren JSR-Score empfohlen wird.
```typescript
/**
 * Fetches the current prices for various currencies from the Mempool.space API.
 *
 * @param currency - The currency (USD, EUR, GBP, CAD, CHF, AUD, JPY) to filter the prices for. If not provided, returns all available prices.
 * @returns An array of tuples, where the first element is the currency code and the second element is the current price.
 * @throws {Error} If the specified currency is not found in the API response.
 */
export async function orakelOtter(currency: string = "ALL"): Promise<Response> {
  // Funktion bleibt unverändert
}
```
4.	Aktualisiere die deno.json-Datei mit den erforderlichen Feldern: name, version und exports. Inklusive Lizenz (optional):
```bash
{
  "name": "@gw/orakel-otter",
  "version": "0.0.1",
  "license": "MIT",
  "exports": "./main.ts"
}
```
Der Name muss den Scope und den Paketname beinhalten **(@gw/orakel-otter)**, die Version muss dem SemVer-Format folgen.

## Paket veröffentlichen

Die Veröffentlichung kann über die CLI oder GitHub Actions erfolgen. Für dieses Tutorial verwenden wir die CLI.

Führe einen Testlauf durch, um sicherzustellen, dass alles korrekt eingerichtet ist:
```bash
deno publish --dry-run
```
Wenn der Testlauf erfolgreich ist, veröffentliche nun dein Paket in dem du den Befehl ohne `--dry-run` ausführst:

```bash
deno publish
```
Nun wirst du Automatisch zu deinem Default Browser weitergeleitet um dich zu authentifizieren, hier jetzt die bestätigen das alles ok ist und dein Paket wird veröffentlicht! Und das wars auch schon, dein erstes JSR Package wurde veröffentlicht :-)

## Fazit

Dieses Tutorial deckt nicht alle Details ab, geht aber auf die wichtigsten Punkte ein, um ein Paket auf JSR.io zu veröffentlichen. Beachte, dass JSR Pakete basierend auf verschiedenen Kriterien bewertet, die zum „JSR-Score“ beitragen. Ziel ist es, eine gute Dokumentation und Best Practices einzuhalten, um eine hohe Punktzahl zu erreichen. Ein gut dokumentiertes Paket kann dir wie in meinem Beispiel eine Bewertung von 94 Punkten einbringen!

**Weitere Details findest du in den folgenden Dokumentationen**

[JSR Documentation](https://jsr.io/docs/publishing-packages)

[Deno Documentation](https://docs.deno.com/runtime/reference/cli/publish/)

**Ryan Dahl der gründer von Nodejs und Deno über die neue Version Deno 2:**
[Rayen Dahl about Deno 2](https://www.youtube.com/watch?v=d35SlRgVxT8)

**Nützliche Links:**

[Project on GitHub](https://github.com/GregorWedlich/orakel-otter)

[Project on jsr.io](https://jsr.io/@gw/orakel-otter)



Wir lernen, wie man mit Deno 2 ein Paket auf JSR.io veröffentlicht.

jsr-deno-2.png

mit Deno 2

 Wie du ein Paket auf JSR.io veröffentlichts

deno

Wie wir mit React Fiber, Drei und Three.js in Next.js ein Metallic Flakes Material erstellen.

A simple Metalic Material Effekt with three.js and next.js

metallic-flakes-threejs.png

Wir wir einen Metallic Flakes Material erstellen

Metallic-Flakes Material in three.js und next.js

typescript

next.js

react

three.js

Als ich mich an meinen kleinen persönlichen (React) TypeScript-Leitfaden gesetzt habe, wusste ich noch nicht, dass es dazu in der Community eine Diskussion gibt, wie und wann typisiert werden sollte. Da ich mir selbst die Frage auch gestellt habe, möchte ich hier kurz aufzeigen, wie meine Erkenntnisse dazu sind.

Lass mir gern ein Kommentar da, wenn du es anders siehst!

# Wann solltest du typisieren?

**Verwende Typisierung bei**

1. Objekten oder Arrays
2. Funktionen und Methoden
3. Generische Typen: Hooks oder andere generische Funktionen
4. Externe Daten, z.B. wenn sie von einer API stammen

**Wann du nicht Typisieren musst**

1. Einfache Typen, z.B. `const count = 10;` da hier TypeScript automatisch ableiten kann das count eine number ist.
2. Hooks mit Initialwerten z.B. `const [isVisible, setIsVisible] = useState(false);` der Initialwert gibt hier den Typ an.

**Vorteile der expliziten Typisierung**

Einer der Hauptgründe, der für eine Typisierung spricht, ist in meinen Augen, dass explizite Typen als Dokumentation für deinen Code dienen. Andere Entwickler (oder du selbst in der Zukunft) können sofort sehen, welche Typen erwartet werden. Das schafft Sicherheit und andere können deinen Code besser verstehen.

Explizite Typen können helfen, Fehler frühzeitig zu erkennen, insbesondere in größeren Codebasen.

**Nachteile der expliziten Typisierung**

Ich gebe zu, ich habe nicht viele Gründe finden können, die gegen eine explizite Typisierung sprechen. Aber ich möchte zumindest einen Gedanken dazu mitgeben.

1. Das Hinzufügen von Typen zu jedem einzelnen Wert kann den Code unnötig aufblähen und die Verwaltung erschweren.
2. Wenn du weitere Nachteile kennst, schreibs in die Kommentare :)

**Fazit**

Wie du sicher schon mitbekommen hast, gehöre ich zur Kategorie "Everything needs a type". Ich denke, es ist nicht wirklich zielführend inkonsistent zu typisieren, auch wenn es nicht immer nötig ist, empfinde ich einen konsistenten Weg zielführender als irgendwas dazwischen.

## Wie du typisierst

## Einfache Typen

Ich denke, das hier ist selbsterklärend.

```typescript
const count: number = 10;
```

## Funktionen und Methoden

Bei der Definition von Funktionen und Methoden gibst du die Typen der Parameter und des Rückgabewerts an.

```typescript
function add(a: number, b: number): number {
  return a + b;
}
```

## Generische Typen (Generics)

Damit ich den Generics gerecht werde muss ich hier etwas tiefer eintauen. Also konzentrieren, es ist ein wichtiger Teil von TypeScript!

Generics ermöglichen es dir, typsicheren Code zu schreiben, der zur Kompilierzeit überprüft wird. Generics bieten eine flexible Möglichkeit, mit verschiedenen Typen zu arbeiten, ohne den Typ im Voraus festlegen zu müssen. Du kannst generische Funktionen, Klassen und Interfaces erstellen, die mit verschiedenen Typen arbeiten können, ohne den Code duplizieren zu müssen.

Wenn du generische Typen verwendest, wie bei useRef, useState oder anderen generischen Funktionen gibst du den Type explizit an. Das bedeutet, dass der generische Typ in diesem Fall nicht flexibel ist, sondern auf `HTMLInputElement` festgelegt wird. Lass uns das genauer betrachten.

```typescript
const inputRef = useRef<HTMLInputElement>(null);
const [isVisible, setIsVisible] = useState<boolean>(false);
```

Der große Vorteil von Generics ist aber wie oben schon erwähnt, dass du mit verschiedene Typen arbeiten kannst, ohne den Typ im Voraus festlegen zu müssen.

**Hee? What?**

Ja du hast richtig gelesen, dass ganze geht zur Laufzeit, daher hier erstmal der Code. Ich erkläre danach, was hier passiert.

```typescript
interface Person {
  name: string;
  age: number;
}

// Die Funktion teilt ein Array von Objekten in mehrere Teile auf
function splitArray<T>(array: Array<T>, numParts: number): Array<Array<T>> {
  const result: Array<Array<T>> = [];

  for (let i = 0; i < array.length; i++) {
    const index = i % numParts;
    if (!result[index]) {
      result[index] = [];
    }
    result[index].push(array[i]);
  }

  return result;
}

const persons: Person[] = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 },
  { name: 'Diana', age: 28 },
];

const splitPersons = splitArray(persons, 2);
console.log(splitPersons);
// Ausgabe: [[{ name: "Alice", age: 30 }, { name: "Charlie", age: 35 }], [{ name: "Bob", age: 25 }, { name: "Diana", age: 28 }]]
```

**`<T>`**: Der generische Typ T ist ein Platzhalter für den Typ, der zur Laufzeit festgelegt wird.  
**`array: Array<T>`**: Der Parameter array ist ein Array von Elementen des Typs T.  
**`Array<Array<T>>`**: Die Rückgabe ist ein Array von Arrays, wobei jedes innere Array Elemente des Typs T enthält.

Du hast noch nicht ganz verstanden, wie wir Typsicherheit erreichen, obwohl wir die Typen nicht vorweg festlegen? Ich versuche es hier an einer Analogie zu erklären.

Stell dir vor, du hast eine spezielle Box, die alles Mögliche aufnehmen kann: Bücher, Spielzeug, Kleidung usw. Diese Box hat jedoch eine besondere Eigenschaft: Sobald du etwas hineinlegst, kann sie nur noch Dinge desselben Typs aufnehmen. Wenn du also ein Buch hineinlegst, kann die Box nur noch Bücher aufnehmen. Das sorgt dafür, dass du nicht versehentlich ein Spielzeug in eine Box legst, die für Bücher gedacht ist.

Generics funktionieren ähnlich wie diese Box. Sie ermöglichen es dir, eine Funktion, Klasse oder ein Interface zu definieren, die mit verschiedenen Typen arbeiten kann. Sobald du jedoch einen bestimmten Typ verwendest, sorgt TypeScript dafür, dass nur dieser Typ verwendet wird, was Typsicherheit gewährleistet.

Ich zeigs hier noch einmal an einem simpleren Beispiel, wir haben hier eine Funktion, die einfach den Wert zurückgibt, den sie erhält.

```typescript
function identity<T>(value: T): T {
  return value;
}
```

Wir rufen diese Funktion jetzt einfach mit einem String auf.

```typescript
const result1 = identity<string>('Hello, World!');
console.log(result1); // Ausgabe: "Hello, World!"
```

Wir rufen dieselbe Funktion mit einer Number auf.

```typescript
const result2 = identity<number>(42);
console.log(result2); // Ausgabe: 42
```

TypeScript stellt in jeweils beiden Funktionsaufrufen sicher, dass der Typ entweder vom Type String bei "result1" ist oder von Type Number bei "result2".

## Externe Daten

Wenn du Daten von einer externen Quelle (z.B. einer API) erhältst, ist es hilfreich, die erwartete Struktur der Daten zu typisieren. Dies geschieht z.B. über ein "interface" würde aber auch anonymisiert oder mit einem Type-Alias gehen. Da gehe ich aber weiter unten noch genauer drauf ein wo da die Unterschiede liegen.

```typescript
interface ApiResponse {
  data: string;
  status: number;
}

async function fetchData(): Promise<ApiResponse> {
  const response = await fetch('/api/data');
  return response.json();
}
```

# DOM-Typen

Wenn du dir mein Beispiel der Generische Typen genau angeschaut hast wirst du gesehen haben, dass ich bei dem useRef-Hook eine generische Typendefinition angewandt habe, die ich selbst nicht erstellt habe, `<HTMLInputElement>`. Dies nennt man "DOM-Typen oder DOM-Interfaces". Diese sind Teil der TypeScript-Typdefinitionen, welche mit der TypeScript-Standardbibliothek mitgebracht werden. Diese Typen decken eine Reihe von DOM-Elementen und Schnittstellen ab, die in Webanwendungen verwendet werden.

## Wie finde ich die Typendefinitionen

Es gibt verschiedene Quellen, welche du nutzen kannst um an die Typendefinitionen zukommen. Du kannst die [Dokumentation von TypeScript](https://www.typescriptlang.org/docs/) nutzen oder den Quellcode von TypeScript anschauen, du findest die Typendefinitionen in der Datei `lib.dom.d.ts`. Der für mich aber beste Weg war bisher über die [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API), diese ist eine hervorragende Ressource für Informationen rund um die Web-APIs und der entsprechenden Typen. [Beispiel unser "HTMLInputElement"](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)

**Beispielhafte DOM-Typen:**

HTMLInputElement: Repräsentiert ein `<input>`-Element.  
HTMLButtonElement: Repräsentiert ein `<button>`-Element.  
HTMLElement: Der Basistyp für alle HTML-Elemente.  
Event: Der Basistyp für alle Ereignisse.

## "Interfaces" oder "Type Aliases"?

Ein wichtiger Teil von TypeScript sind Interfaces und Type Aliase. Beides ist essenziell, da diese eigentlich fast in jedem Projekt zur Anwendung kommen. Wenn du diese und die Punkte davor kennst und weißt, wie du sie einsetzt, dann hast du 90 % von dem, was du im Alltag brauchst, um mit React und TypeScript zuarbeiten. Zumindest ist es das, was ich bisher am meisten benötigt habe.

## Type-Alias

Type Alias verwendest du für primitive Typen, Union Types, Intersection Types, Tupel und komplexe Typenkombinationen. Type Aliase könne nicht erweitert werden, aber sie lassen sich kombinieren.

**Union Types (Primitive Typen)**

Ein Union Type kann Typen kombinieren, und ein Wert dieses Typs kann einer der enthaltenen Typen sein.

Primitive Union Types kombinieren primitive Typen wie string oder number.

```typescript
type ID = string | number;

let userId: ID;

userId = 'abc123'; // OK
userId = 123; // OK
userId = true; // Fehler: 'true' ist kein 'string' oder 'number'
```

**Union Types (Komplexe Types)**

Komplexe Union Types kombinieren komplexe Typen wie Objekte oder Klassen.

```typescript
type SuccessResponse = {
  status: 'success';
  data: any;
};

type ErrorResponse = {
  status: 'error';
  error: string;
};

type Response = SuccessResponse | ErrorResponse;

function handleResponse(response: Response) {
  if (response.status === 'success') {
    console.log('Data:', response.data);
  } else {
    console.log('Error:', response.error);
  }
}

const success: Response = { status: 'success', data: { id: 1, name: 'Item' } };
const error: Response = { status: 'error', error: 'Something went wrong' };

handleResponse(success); // Data: { id: 1, name: "Item" }
handleResponse(error); // Error: Something went wrong
```

**Intersection Types**

Ein Intersection Type kombiniert mehrere Typen zu einem neuen Typ, der alle Eigenschaften der kombinierten Typen enthält. Ein Wert, der einem Intersection Type entspricht, muss alle Eigenschaften der kombinierten Typen haben.

In dem folgenden Beispiel ist EmployeePerson ein Intersection Type, der alle Eigenschaften von Person und Employee kombiniert. Ein Objekt vom Typ EmployeePerson muss also name, age und employeeId haben.

```typescript
type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: number;
};

type EmployeePerson = Person & Employee;

const employee: EmployeePerson = {
  name: 'John Doe',
  age: 30,
  employeeId: 1234,
};
```

**Tupel**

Wir können mit TypeScript auch Tupel typisieren, also Werte mit einer festen Anzahl von Elementen.

Hier ein kleines Beispiel, Point erwartet immer zwei Elemente vom Typ number.

```typescript
type Point = [number, number];

const point: Point = [10, 20]; // Korrekt

const invalidPoint: Point = [10, '20']; // Fehler: Das zweite Element muss eine Zahl sein

const anotherInvalidPoint: Point = [10]; // Fehler: Es müssen genau zwei Elemente sein
```

## Interfaces

Ein Interface ist eine Struktur, die beschreibt, wie ein Objekt aussehen soll. Interfaces sind besonders nützlich für die Beschreibung von Objekten und Klassen und unterstützen Vererbung und Deklarationszusammenführung. Interfaces kann nicht für primitive Typen oder Unions Types verwendet werden.

**Objektstrukturen**

So schaut die Struktur eines Objektes aus:

```typescript
interface Person {
  name: string;
  age: number;
}
```

**Vererbung**

Du kannst bei Interfaces von einem anderen Interface ableiten.

```typescript
interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: 'John Doe',
  age: 30,
  employeeId: 1234,
};
```

**Deklarationszusammenführung**

Wenn du mehrere Deklarationen desselben Interfaces haben möchtest, die zu einem einzigen Interface zusammengeführt werden.

```typescript
interface Person {
  name: string;
}

interface Person {
  age: number;
}

// Das resultierende Interface Person hat sowohl name als auch age
const person: Person = { name: 'John', age: 30 };
```

Ich denke, nun kennst du alles Wichtige zu Interfaces und Type Aliases. Beide Ansätze haben ihre eigenen Stärken und Schwächen, und die Wahl zwischen ihnen hängt oft von den spezifischen Anforderungen deines Projekts ab. Wenn du weitere Fragen hast oder mehr Beispiele benötigst, lass es mich wissen!


Grundlagen der Typisierung in TypeScript: Wann und wie man typisiert, Generics, DOM-Typen, Interfaces und Type Aliases.

thumbnail-v1-TypeScript.png

Wann und Wie du typisierst

TypeScript: Typisierungs-Leitfaden

metropolis.png

Prinz_Monty_Coding_Future_Hacking_Binary_Website_Header_fe5f75f_1f86cac2-9fc0-4294-bcaf-dfe0dd968a98.png

SSH-Keys-Config-ed25519.png

Invalid-Regular-Expression-Image.png

oh-my-zsh-mid.png

Ice cream gingerbread danish muffin cheesecake icing tiramisu.

Biscuit dessert sweet roll cupcake sweet. Halvah jelly apple pie oat cake gummi bears marshmallow. Powder jujubes pudding gummies donut chocolate bar candy canes. Biscuit danish icing jujubes gummi bears dragée. 

CODING LIFE AND EVERYTHING & MEISTENS AUF DEUTSCH

Hallo Hello היי Hola Привіт Salut أهلاً 你好 Ciao

Wie du ein Paket auf JSR.io veröffentlichts

mit Deno 2

13.10.2024

Metallic-Flakes Material in three.js und next.js

Wir wir einen Metallic Flakes Material erstellen

11.09.2024

TypeScript: Typisierungs-Leitfaden

Wann und Wie du typisierst

30.05.2024