Petunjuk TypeScript dalam contoh kode Anda

Menambahkan contoh kode ke situs web Anda adalah ide yang bagus. Ini menunjukkan bagaimana kode seharusnya terlihat. Sulit untuk membayangkan dokumen paket npm tanpa contoh kode.

Solusi yang ada bagus ketika kita ingin menunjukkan contoh kode JavaScript. Tapi bagaimana, ketika kita ingin menampilkan kode TypeScript, ketik bersama dengan kode?

… Shiki Twoslash adalah perpustakaan yang Anda cari.

Apa itu Shiki?

Shiki adalah penyorot sintaks. Didasarkan pada tata bahasa teks mate. Teknologi yang sama yang mendukung penyorotan sintaks VS Code .

Apa itu Twoslash?

Twoslash adalah addon Shiki. Itu menambahkan petunjuk kompiler TypeScript. Sama seperti yang bisa kita lihat di VS Code. Anda dapat memeriksa yang mana

Anda dapat menampilkan petunjuk TypeScript dalam dua jenis.

Statis:

```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>;
```

      

Masih ada lagi

Shiki Twoslash mendukung lebih banyak fungsi:

• pencampuran statis dengan mode dinamis
• menunjukkan kesalahan TypeScript
• vs tema kode

Anda dapat membaca lebih lanjut tentang semua opsi di situs web shiki twoslash .

Untuk menghubungi saya, Anda dapat menemukan saya di Twitter.