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.twoslashtotrue
vite.config.(js|ts)
+
+
+
import { } from '@sveltepress/theme-default'
import { } from '@sveltepress/vite'
import { } from 'vite'
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
const a: number = '1' ts
```ts
// @errors: 2304 2322
const foo: Foo = null
const a: number = '1'
``` md
Click fold/expand code
Queries
const = 'Hello'
const = `${}, world`
//
// ts
```ts
const hi = 'Hello'
const msg = `${hi}, world`
// ^?
//
//
``` 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 { = 'World' } = ()
let = (0)
(() => {
})
</script>
<button onclick={() => ++}>
Count is: {}
</button>
<div class="text-6">
Hello, {}
</div> svelte