Here is an example of using TwoSlash with Shiki:
var console: Console
The `console` module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:
* A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream.
* A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstdout) and
[`process.stderr`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module.
_**Warning**_: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v22.x/api/process.html#a-note-on-process-io) for
more information.
Example using the global `console`:
```js
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
```
Example using the `Console` class:
```js
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```@see[source](https://github.com/nodejs/node/blob/v22.x/lib/console.js)console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to `stdout` with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html)
(the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args)).
```js
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
```
See [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args) for more information.@sincev0.1.100log((1 + 2 + 3 + 4).to- toExponential
- toFixed
- toLocaleString
- toPrecision
- toString
Number.toFixed(fractionDigits?: number): string
Returns a string representing a number in fixed-point notation.@paramfractionDigits Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.Fixed(2))
interface Todo {
Todo.title: string
title: string
}
const const todo: Readonly<Todo>
todo: type Readonly<T> = { readonly [P in keyof T]: T[P]; }
Make all properties in T readonlyReadonly<Todo> = {
title: string
title: 'Delete inactive users',
}
const todo: Readonly<Todo>
todo.title = 'Hello'Cannot assign to 'title' because it is a read-only property.
Try hovering on each token to see the type information. Shiki runs oniguruma
to give syntax highlighting, and TwoSlash runs typescript
to give type information. Both are quite heavy libraries, but this is done ahead of time on building, it means that what you see here is completely static pure HTML and CSS!
The Shiki integration allows you to provide custom renderer of how the HTML been generated based on AST. This allows us to have dual themes support, and also the syntax highlighting for the type information.
Check @shikijs/twoslash
and commit for the integration on antfu.me, for more information :)
The input code
```ts twoslash
// @errors: 2540
console.log((1 + 2 + 3 + 4).toFixed(2))
// ^|
interface Todo {
title: string
}
const todo: Readonly<Todo> = {
title: 'Delete inactive users',
// ^?
}
todo.title = 'Hello'
```