Show Emitted Files

Running a Twoslash code sample is a full TypeScript compiler run, and that run will create files inside the virtual file system. You can replace the contents of your code sample with the results of running TypeScript over the project.

@showEmit

// @showEmit is the main command to tell Twoslash that you want to replace the output of your code sample with the equivalent .js file.

Rendered Output

const level = 'Danger';
export {};

Markdown

```ts twoslash
// @showEmit
const level: string = 'Danger'
```

Would show the .js file which this .ts file represents. You can see TypeScript add ‘use strict’ and : string is removed from the output.

@showEmittedFile: [file]

While the .js file is probably the most useful file out of the box, TypeScript does emit other files if you have the right flags enabled (.d.ts and .map) but also when you have a multi-file code sample - you might need to tell Twoslash which file to show. For all these cases you can also add @showEmittedFile: [file] to tell Twoslash which file you want to show.

.d.ts files

Rendered Output

index.d.ts

export declare const hello = "world";

Markdown

```ts twoslash title="index.d.ts"
// @declaration
// @showEmit
// @showEmittedFile: index.d.ts
export const hello = 'world'
```

.map for .js files

Rendered Output

index.js.map

{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAA"}

Markdown

```ts twoslash title="index.js.map"
// @sourceMap
// @showEmit
// @showEmittedFile: index.js.map
export const hello = 'world'
```

.map for .d.ts files

Rendered Output

index.d.ts.map

{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,EAAE,MAAgB,CAAA"}

Markdown

```ts twoslash title="index.d.ts.map"
// @declaration
// @declarationMap
// @showEmit
// @showEmittedFile: index.d.ts.map
export const hello: string = 'world'
```

Multi-file code samples

Rendered Output

b.js

// @filename: b.ts
import { helloWorld } from './a';
console.log(helloWorld);

Markdown

```ts twoslash title="b.js"
// @showEmit
// @showEmittedFile: b.js
// @filename: a.ts
export const helloWorld: string = 'Hi';

// @filename: b.ts
import { helloWorld } from './a';

console.log(helloWorld);
```