コードサンプルのTypescriptヒント

コード サンプルを Web サイトに追加することは素晴らしいアイデアです。コードがどのように見えるかを示しています。コードサンプルなしでnpmパッケージドキュメントをイメージするのは難しいです。

JavaScriptコードのサンプルを表示する場合は、既存のソリューションが適しています。しかし、TypeScriptコードを表示したい場合、コードと一緒にタイプするのは何でしょうか。

… ShikiTwoslashはあなたが探しているライブラリです。

シキとは？

Shikiは構文ハイライトです。テキストメイト文法に基づいています。VSCode構文の強調表示を強化するのと同じテクノロジー。

Twoslashとは何ですか？

TwoslashはShikiアドオンです。TypeScriptコンパイラのヒントを追加しています。VSCodeで見ることができるのと同じです。あなたはどれをチェックすることができます

タイプスクリプトのヒントは2つのタイプで表示できます。

静的：

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

      

もっとある

Shiki Twoslashは、より多くの機能をサポートしています。

• 静的モードと動的モードの混合
• タイプスクリプトエラーを表示する
• vsコードテーマ

すべてのオプションの詳細については、shikitwoslashのWebサイトを参照してください。

私と連絡を取るために、Twitterで私を見つけることができます。