# Multi-file | Toshiki's Note
Twoslash code examples aren't limited to creating a single file. You can write any file to the virtual file system used by TypeScript to power your code examples.
Author: Anda Toshiki
Keywords: Toshiki, Anda Toshiki, andatoshiki, GitHub, GitHub action, Vitepress, Vite, Notebook, Knowledge base, Programming, Programming Notes, Academic, Personal, Notebook, Productivity, Journal, Note-taking, Markdown, Notepad, Organization, Tutorial

Skip to content

####

# Multi-file ​

Author:Anda Toshiki
Updated:a minute 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:

outputmarkdown
ts

    ts// I'm index.ts

    ts// I'm index.ts

1
md

    ```ts twoslash
    // I'm index.ts
    ```

    ```ts twoslash
    // I'm index.ts
    ```

1
2
3
outputmarkdown
tsx

    tsx// I'm index.tsx

    tsx// I'm index.tsx

1
md

    ```tsx twoslash
    // I'm index.tsx
    ```

    ```tsx twoslash
    // I'm index.tsx
    ```

1
2
3
outputmarkdown
js

    js// I'm index.tjs

    js// I'm index.tjs

1
md

    ```js twoslash
    // I'm index.tjs
    ```

    ```js twoslash
    // I'm index.tjs
    ```

1
2
3

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:

outputmarkdown
ts

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

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

1

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)
    ```

1
2
3
4
5
6
7
8

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

outputmarkdown
ts

    ts// @filename: app.json{ "version": "23.2.3" } // @filename: index.tsimport appSettings from "./app.json"appSettings.version              (property) "version": string

    ts// @filename: app.json{ "version": "23.2.3" } // @filename: index.tsimport appSettings from "./app.json"appSettings.version              (property) "version": string

1
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
    //           ^?
    ```

1
2
3
4
5
6
7
8
9
10

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`.

outputmarkdown
ts

    tsimport React from "react"import MultiFileDocs from "./MultiFileDocs.mdx" export default () => <MultiFileDocs/>

    tsimport React from "react"import MultiFileDocs from "./MultiFileDocs.mdx" export default () => <MultiFileDocs/>

1
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/>
    ```

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17