Twoslash

This feature integrate

Twoslash

All of the Typescript code blocks would provide inline type hover.

Enable twoslash

  • Install @sveltepress/twoslash package
npm install --save @sveltepress/twoslash
sh
  • Config highlighter.twoslash to true
vite.config.(js|ts)
+
+
+
import {  } from 'vite'
import {  } from '@sveltepress/vite'
import {  } from '@sveltepress/theme-default'

export default ({
  : [
    ({
      : ({
        : { 
          : true 
        } 
      })
    })
  ]
})
ts

Basic type annotation

const  = false

const  = {
  : 'a',
  : 1
}
ts
```ts
const foo = false

const obj = {
  a: 'a',
  b: 1
}
```
md
Click fold/expand code

Errors

const : Foo = null
Cannot find name 'Foo'.

const a: number = '1'
Type 'string' is not assignable to type 'number'.
ts
```ts
// @errors: 2304 2322
const foo: Foo = null

const a: number = '1'
```
md
Click fold/expand code

Queries

const  = 'Hello'
const  = `${}, world`

//
//
.p('123', 10)
//
//
//
//
ts
```ts
const hi = 'Hello'
const msg = `${hi}, world`
//    ^?

//
//
Number.parseInt('123', 10)
//      ^|
//
//
//
//
```
md
Click fold/expand code

Custom logs

const  = 1
Custom log message

const  = 1
Custom error message

const  = 1
Custom warning message


Custom annotation message
ts
```ts
// @log: Custom log message
const a = 1

// @error: Custom error message
const b = 1

// @warn: Custom warning message
const c = 1

// @annotate: Custom annotation message
```
md
Click fold/expand code

Cut codes

cut before

use // ---cut--- or // ---cut-before--- can cut all codes before this line

.()
ts
```ts
const level: string = 'Danger'
// ---cut---
console.log(level)
```
md
Click fold/expand code

cut after

use // ---cut-after--- can cut all codes after this line

.()
ts
```ts
const level: string = 'Danger'
// ---cut-before---
console.log(level)
// ---cut-after---
console.log('This is not shown')
```
md
Click fold/expand code

cut start/end

use // ---cut-start--- and // ---cut-end--- to cut contents between them

const : string = 'Danger'
.('This is shown')
ts
```ts
const level: string = 'Danger'
// ---cut-start---
console.log(level) // This is not shown.
// ---cut-end---
console.log('This is shown')
```
md
Click fold/expand code

Twoslash for svelte

<script>
  import {  } from 'svelte'

  let  = 0

  (() => {
    .('mount')
  })
</script>
<button on:click="{++}">
  Count is: {  }
</button>
svelte
Suggest changes to this page
Last update at: 2024/03/22 12:10:31