Nextra 3.0 is released. Read more

Twoslash Support

Twoslash provides an inline type hove inside the code block.

Basic usage

You can enable twoslash to your code blocks by adding a twoslash metadata:

Markdown
```ts twoslash
// @errors: 2540
interface Todo {
  title: string
}
 
const todo: Readonly<Todo> = {
  title: 'Delete inactive users'.toUpperCase()
  //  ^?
}
 
todo.title = 'Hello'
 
Number.parseInt('123', 10)
//      ^|
```

Renders:

interface Todo {
  Todo.title: stringtitle: string
}
 
const const todo: Readonly<Todo>todo: type Readonly<T> = { readonly [P in keyof T]: T[P]; }
Make all properties in T readonly
Readonly
<Todo> = {
title: string
title
: 'Delete inactive users'.String.toUpperCase(): string
Converts all the alphabetic characters in a string to uppercase.
toUpperCase
()
} const todo: Readonly<Todo>todo.title = 'Hello'
Cannot assign to 'title' because it is a read-only property.
var Number: NumberConstructor
An object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.
Number
.p
  • parseFloat
  • parseInt
  • prototype
NumberConstructor.parseInt(string: string, radix?: number): number
Converts A string to an integer.
@paramstring A string to convert into a number.@paramradix A value between 2 and 36 that specifies the base of the number in `string`. If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal. All other strings are considered decimal.
arseInt
('123', 10)

Custom log message

You can add log message to your code by adding:

  • @log: <message> Custom log message
  • @error: <message> Custom error message
  • @warn: <message> Custom warn message
  • @annotate: <message> Custom annotate message
const const a: 1a = 1
Custom log message
const const b: 1b = 1
Custom error message
const const c: 1c = 1
Custom warning message
Custom annotation message