Twoslash

该功能集成了

Twoslash

所有的 Typescript 代码块将会自动添加鼠标上浮的类型提示

开启 twoslash

  • 安装 @sveltepress/twoslash 依赖
npm install --save @sveltepress/twoslash
sh
  • 将默认主题 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
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
点击展开/折叠代码

类型查询

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
最后更新于: 2024/03/22 12:10:31