Twoslash 类型提示

在代码块中显示 TypeScript 类型信息

180 字1 分钟

Twoslash 是一个强大的工具，可以在代码示例中内联显示 TypeScript 类型信息，非常适合文档中的教学场景。

基础用法

在 TypeScript 或 JavaScript 代码围栏中，使用 // ^? 注释来查询表达式的类型：

const message = "hello, world"//    ^?

类型错误提示

Twoslash 会自动高亮代码中的类型错误：

const count: number = "not a number"

泛型推断

function identity<T>(arg: T): T {  return arg}const result = identity("typescript")//    ^?

复杂类型

interface User {  id: number  name: string  email: string  role: "admin" | "user" | "viewer"}async function fetchUser(id: number): Promise<User> {  const response = await fetch(`/api/users/${id}`)

高级查询

可以使用 // ^| 来展开联合类型：

type Status = "idle" | "loading" | "success" | "error"function getStatusLabel(status: Status): string {  return status//        ^|}

开发文档

14 / 16

1.iflux-next 架构设计 2.Next.js 3.React 4.TypeScript 5.Tailwind CSS 6.shadcn/ui 7.Biome 8.Turborepo 9.创建应用 10.添加组件 11.开发规范 12.Frontmatter 用法与规范 13.嵌入式 Playground 14.Twoslash 类型提示 15.部署指南 16.环境变量

嵌入式 Playground 部署指南