Twoslash
该功能集成了 Twoslash
所有的 Typescript 代码块将会自动添加鼠标上浮的类型提示
开启 twoslash
- 安装 @sveltepress/twoslash 依赖
npm install --save @sveltepress/twoslashsh
- 将默认主题
highlighter.twoslash选项设置为true
vite.config.(js|ts)
+
+
+
import { } from 'vite'
import { } from '@sveltepress/vite'
import { } from '@sveltepress/theme-default'
export default ({
: [
({
: ({
: {
: true
}
})
})
]
})ts
基础类型注释
const = false
const = {
: 'a',
: 1
}ts
```ts
const foo = false
const obj = {
a: 'a',
b: 1
}
```md
点击展开/折叠代码
TS 编译错误
const : Foo = null
const a: number = '1'ts
```ts
// @errors: 2304 2322
const foo: Foo = null
const a: number = '1'
```md
点击展开/折叠代码
类型查询
const = 'Hello'
const = `${}, world`
//
//
.p('123', 10)
//
//
//
//ts
```ts
const hi = 'Hello'
const msg = `${hi}, world`
// ^?
//
//
Number.parseInt('123', 10)
// ^|
//
//
//
//
```md
点击展开/折叠代码
自定义代码内提示
const = 1自定义信息
const = 1自定义信息
const = 1自定义信息
自定义信息ts
```ts
// @log: 自定义信息
const a = 1
// @error: 自定义信息
const b = 1
// @warn: 自定义信息
const c = 1
// @annotate: 自定义信息
```md
点击展开/折叠代码
代码裁剪
向前裁剪
使用 // ---cut--- or // ---cut-before--- 注释可以将该行之前的所有代码从结果中裁剪调
.()ts
```ts
const level: string = 'Danger'
// ---cut---
console.log(level)
```md
点击展开/折叠代码
向后裁剪
使用 // ---cut-after--- 注释可以将该行之后的所有代码从结果中裁剪调
.()
ts
```ts
const level: string = 'Danger'
// ---cut-before---
console.log(level)
// ---cut-after---
console.log('This is not shown')
```md
点击展开/折叠代码
自定义裁剪段落
使用 // ---cut-start--- 与 // ---cut-end--- 注释可以指定裁剪这两个注释之间的所有代码
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
点击展开/折叠代码
支持 svelte 代码块
<script>
import { } from 'svelte'
let = 0
(() => {
.('mount')
})
</script>
<button on:click="{++}">
您点击了: { } 次
</button>svelte