Now and again, I weblog about TypeScript, and I at all times puzzled if it is conceivable to render sort annotations in syntax-highlighted code snippets in this weblog.

Earlier Google searches did not lend a hand me, so here is some other contribution to the web: I after all discovered a undertaking that permits rendering sort annotations in code snippets.

Twoslash means that you can upload TypeScript sort data on your code snippets. Of their phrases, Twoslash is:

And that’s the reason lovely fantastic, as a result of it is also ready to validate your code and display conceivable Typescript mistakes.

ts
interface Individual {
  title: string
}
 
interface Individual {
  age: quantity
}
 
// `Individual` is now merged and expects `title` and `age`
const p: Individual = {
Belongings 'title' is lacking in sort '{ age: quantity; }' however required in sort 'Individual'.2741Belongings 'title' is lacking in sort '{ age: quantity; }' however required in sort 'Individual'.
  age: 99
}

You’ll be able to let Twoslash do its activity; in case your snippets don’t seem to be right kind, it will bitch and blunder out (until you inform it that you are expecting an error like above).

And as it makes use of the VS Code sort checker, it really works for JavaScript snippets, too!

js
const a = {
  joo: 'take a look at'
};
 
console.log(a.foo);
Belongings 'foo' does no longer exist on sort '{ joo: string; }'.2339Belongings 'foo' does no longer exist on sort '{ joo: string; }'.

After which, you’ll use some fancy markdown syntax to check out variables or even display conceivable auto-completion values.

js
const a = {
  take a look at: 'take a look at'
  testTwo: 'take a look at'
  testThree: 'take a look at'
};
 
console.log(a.te
 
 
console.log(a);

Wild! 🤯

I am not completely satisfied I’m going to use Twoslash for each and every code snippet at the weblog, however for TypeScript snippets — heck yeah!