Twoslash + ArkTS

Twoslash 是由 Orta Therox 和 Anthony Fu 两位大佬推出的一套为 文档 和 TypeScript 示例代码 增强语义信息的工具，能够在为基于 Markdown 的文档框架（如 VitePress 和 Astro Starlight 等）在网页文档中即时渲染和 vscode 几乎一模一样的 代码提示、补全、错误提示 等语义信息。现在，我们把它带到了 ArkTS 语言中，让 ArkTS 语言的文档和示例代码也拥有同样的体验！

Twoslash 仓库点击前往 Twoslash for ArkTS 核心仓库。

Twoslash for expressive code 点击前往 Twoslash for expressive code 适配器仓库。

下面是一个简单的 ArkTS Twoslash 示例，我们这个文档是基于 Astro Starlight 框架构建的，因此允许开箱即用。您可以将鼠标移到代码上（如果您使用的移动端设备，可以点击一下代码段），如下面的 struct Index 的 Index, 以及 @Component 的 Component 等，都会出现对应的语义信息：

Twoslash 渲染后
Markdown 源代码

@
const Entry: ClassDecorator & ((options?: LocalStorage | EntryOptions | undefined) => ClassDecorator)
Defines Entry ClassDecorator.
Entry is a ClassDecorator and it supports LocalStorage or EntryOptions as parameters.
@since ― 11
Entry
@
const Component: ClassDecorator & ((options: ComponentOptions) => ClassDecorator)
Defining Component ClassDecorator
Component is a ClassDecorator and it supports ComponentOptions as parameters.
@since ― 11
Component
struct 
struct Index
Index {
  
Index.build(): void
Customize the pop-up content constructor and it is migrated from class CustomComponent.
@since ― 18
build(): void {
    
const Column: ColumnInterface
Defines Column Component.
@since ― 11
Column() {
      
const Text: TextInterface
Defines Text Component.
@since ― 11
Text('Hello, World!')
    }.
CommonMethod<ColumnAttribute>.width(value: Length): ColumnAttribute (+1 overload)
Sets the width of the component. By default, the width required to fully hold the
component content is used.If the width of the component is greater than that of
the parent container, the component will be drawn beyond the parent container scope.
@param ― value
@returns
@since ― 11
width('100%')
    .
CommonMethod<ColumnAttribute>.height(value: Length): ColumnAttribute (+1 overload)
Sets the height of the component. By default, the height required to fully hold the
component content is used. If the height of the component is greater than that of
the parent container, the component will be drawn beyond the parent container scope.
@param ― value
@returns
@since ― 11
height('100%')
  }
}

@Entry
@Component
struct Index {
  build(): void {
    Column() {
      Text('Hello, World!')
    }.width('100%')
    .height('100%')
  }
}

同时，原版的 TypeScript Twoslash 也完全没有任何冲突：

function 
function add(a: number, b: number): number
add(
a: number
a: number, 
b: number
b: number): number {
  return 
a: number
a + 
b: number
b;
}

function add(a: number, b: number): number
add(1, 2);

TSX 语法也完全没有任何影响：

const 
const a: JSX.Element
a = <
React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>Hello, World!</
React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>;

同时，ohos-typescript@4.9.5-r10 中 @interface 装饰器已经支持了，目前我们也默认开启了该功能：

@interface 
class MyInterface
MyInterface {
  
MyInterface.value: string
value: string
}

@
function (prototype: MyInterface): void
MyInterface({ 
MyInterface.value: string
value: 'Hello, world!' })
class 
class MyClass
MyClass {}

使用和演示

Twoslash 查询查询 Twoslash 的用法和示例。

TODO: 安装方法待补充