Typescript hints in your code samples

Adding code samples to your website is an excellent idea. It shows how the code should look like. It's hard to image npm package docs without code samples.

Existing solutions are good when we want to show JavaScript code samples. But what, when we want to show TypeScript code, types alongside with code?

… Shiki Twoslash is the library you are looking for.

What is Shiki?

What is Twoslash?

You can display typescript hints in two types.

Static:

const msg = "Hi world" as const;
//    ^?

Dynamic:

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