Toshiki's Note

Appearance

Multi-file ​

Author:Anda Toshiki
Updated:3 months ago
Words:477
Reading:2 min

Twoslash code examples aren't limited to creating a single file, by using // @filename: [file] you can write any file to the virtual file system used by TypeScript to power your code examples.

@filename: [file] ​

Most of the time, you don't need to think about the underlaying virtual file system in a code example, but when you have imports between them it becomes important to know. Twoslash will default to creating an index.[type] based on the langauge passed to the code example:

ts
ts
// I'm index.ts
ts
// I'm index.ts
md
```ts twoslash
// I'm index.ts
```
```ts twoslash
// I'm index.ts
```
tsx
tsx
// I'm index.tsx
tsx
// I'm index.tsx
md
```tsx twoslash
// I'm index.tsx
```
```tsx twoslash
// I'm index.tsx
```
js
js
// I'm index.tjs
js
// I'm index.tjs
md
```js twoslash
// I'm index.tjs
```
```js twoslash
// I'm index.tjs
```

Then until Twoslash hits another // @filename: [file], the parser keeps adding new lines into the same file. After seeing @filename Twoslash creates a new virtual file-system file and adds the new lines to that. You can't edit a file after it was created, but you can overwrite it.

It can be any file. For example, if you want to quickly fake a node module:

ts
ts
// @filename: node_modules/@types/mylib/index.d.ts
export function doit(): string
 
// @filename: index.ts
import { doit } from 'mylib'
console.log(doit)
ts
// @filename: node_modules/@types/mylib/index.d.ts
export function doit(): string
 
// @filename: index.ts
import { doit } from 'mylib'
console.log(doit)

This code example sets up the types for a non-existent npm module, and TypeScript picks it up as the definitions in the same way it would in a non-virtual TypeScript project.

md
```ts twoslash
// @filename: node_modules/@types/mylib/index.d.ts
export function doit(): string

// @filename: index.ts
import { doit } from 'mylib'
console.log(doit)
```
```ts twoslash
// @filename: node_modules/@types/mylib/index.d.ts
export function doit(): string

// @filename: index.ts
import { doit } from 'mylib'
console.log(doit)
```

You can also set up a JSON object which can be imported in a TypeScript file:

ts
ts
// @filename: app.json
{ "version": "23.2.3" }
 
// @filename: index.ts
import appSettings from "./app.json"
appSettings.version
              
(property) "version": string
ts
// @filename: app.json
{ "version": "23.2.3" }
 
// @filename: index.ts
import appSettings from "./app.json"
appSettings.version
              
(property) "version": string
md
```ts twoslash
// @resolveJsonModule
// @filename: app.json
{ "version": "23.2.3" }

// @filename: index.ts
import appSettings from "./app.json"
appSettings.version
//           ^?
```
```ts twoslash
// @resolveJsonModule
// @filename: app.json
{ "version": "23.2.3" }

// @filename: index.ts
import appSettings from "./app.json"
appSettings.version
//           ^?
```

Finally, the following code allows importing non-TypeScript content. There is a .d.ts file which globally says 'md files are OK to import' and 'the module "react" exists, but don't worry about the details'.

Then for a user, they only see the imports and exports inside index.tsx.

ts
ts
import React from "react"
import MultiFileDocs from "./MultiFileDocs.mdx"
 
export default () => <MultiFileDocs/>
ts
import React from "react"
import MultiFileDocs from "./MultiFileDocs.mdx"
 
export default () => <MultiFileDocs/>
md
```ts twoslash
// @filename: ambient.d.ts
declare module '*.mdx' {
    export default any
}
declare module "react"

// @filename: MultiFileDocs.mdx
## Hello world

// @filename: index.tsx
// ---cut---
import React from "react"
import MultiFileDocs from "./MultiFileDocs.mdx"

export default () => <MultiFileDocs/>
```
```ts twoslash
// @filename: ambient.d.ts
declare module '*.mdx' {
    export default any
}
declare module "react"

// @filename: MultiFileDocs.mdx
## Hello world

// @filename: index.tsx
// ---cut---
import React from "react"
import MultiFileDocs from "./MultiFileDocs.mdx"

export default () => <MultiFileDocs/>
```