Twoslash Demo
TypeScript code blocks with type hints powered by Twoslash.
This page demonstrates Twoslash. Hover identifiers in the code blocks below to see types inferred at build time.
Defining a message shape
type = 'system' | 'user' | 'assistant';
interface Message {
: ;
: string;
}
const : Message = {
: 'user',
: 'Hello CanalAPI',
};
// hover `message` to see the inferred type
;Typed request builder
interface ChatRequest {
: string;
: { : 'system' | 'user' | 'assistant'; : string }[];
?: boolean;
}
function (: string): ChatRequest {
return {
: 'gpt-4o-mini',
: [{ : 'user', : }],
};
}
const req = ('Hello');How to write Twoslash blocks
Use the twoslash info string on a ts or tsx code fence:
```ts twoslash
const x: string = 'hi'
// ^?
```The ^? query annotation prints the type of the symbol on the previous line.