Typoskript-Hinweise in Ihren Codebeispielen

Das Hinzufügen von Codebeispielen zu Ihrer Website ist eine ausgezeichnete Idee. Es zeigt, wie der Code aussehen sollte. Es ist schwierig, npm-Paketdokumente ohne Codebeispiele abzubilden.

Vorhandene Lösungen sind gut, wenn wir JavaScript-Codebeispiele zeigen möchten. Aber was, wenn wir TypeScript-Code, Typen neben Code zeigen wollen?

… Shiki Twoslash ist die Bibliothek, die Sie suchen.

Was ist Shiki?

Shiki ist ein Syntax-Highlighter. Basiert auf der Text-Mate-Grammatik. Dieselbe Technologie, die das Syntax-Highlighting von VS Code antreibt.

Was ist Twoslash?

Twoslash ist ein Shiki-Addon. Es fügt TypeScript-Compiler-Hinweise hinzu. Genauso wie wir es in VS Code sehen können. Sie können überprüfen, welche

Sie können Typoskript-Hinweise in zwei Arten anzeigen.

Statisch:

```ts twoslash
const msg = "Hi world" as const;
//    ^?
```

      

```ts twoslash
// Removes 'readonly' attributes from a type's properties
type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property];
};
type LockedAccount = {
  readonly id: string;
  readonly name: string;
};
type UnlockedAccount = CreateMutable<LockedAccount>;
```

      

Es gibt mehr

Shiki Twoslash unterstützt weitere Funktionalitäten:

• Mischen von statischem mit dynamischem Modus
• Schreibfehler anzeigen
• vs Code-Themen

Sie können mehr über alle Optionen auf der Website von shiki twoslash lesen .

Um mit mir in Kontakt zu treten , finden Sie mich auf Twitter.