Toshiki's Note

Appearance

@types ​

Author:Anda Toshiki
Updated:3 months ago
Words:230
Reading:1 min

For most examples, you probably need to import external libraries into your code examples.

Twoslash works by faking a virtual file system over your existing file system. This means any @types or libraries with TypeScript definitions should work out of the box with no config.

Local Sources ​

Simply import locally installed libraries and Twoslash can pick up types:

ts
ts
import { defineConfig } from 'vitepress'
const config = defineConfig({})
        
const config: UserConfig<DefaultTheme.Config>
export default config
ts
import { defineConfig } from 'vitepress'
const config = defineConfig({})
        
const config: UserConfig<DefaultTheme.Config>
export default config
md
```ts twoslash
import { defineConfig } from 'vitepress'
const config = defineConfig({})
//    ^?
export default config
```
```ts twoslash
import { defineConfig } from 'vitepress'
const config = defineConfig({})
//    ^?
export default config
```

Globals ​

Setting up globals is a little bit more complex, but not drastically. You need to use the triple slash reference which adds a particular library to the global scope.

For example, setting up Node imports and globals etc.

ts
ts
import { writeFileSync } from 'fs'
writeFileSync('myfile.txt', '// TODO')
ts
import { writeFileSync } from 'fs'
writeFileSync('myfile.txt', '// TODO')
md
```ts twoslash
/// <reference types="node" />
// ---cut---
import { writeFileSync } from 'fs'
writeFileSync('myfile.txt', '// TODO')
```
```ts twoslash
/// <reference types="node" />
// ---cut---
import { writeFileSync } from 'fs'
writeFileSync('myfile.txt', '// TODO')
```

APIs like Vitest are similar cases where you would use a triple slash reference.

ts
ts
test('my tests', () => {
    expect('hello').toEqual('hello')
      
const expect: ExpectStatic
})
ts
test('my tests', () => {
    expect('hello').toEqual('hello')
      
const expect: ExpectStatic
})
md
```ts twoslash
/// <reference types="vitest/globals" />
// ---cut---

test('my tests', () => {
    expect('hello').toEqual('hello')
    // ^?
})
```
```ts twoslash
/// <reference types="vitest/globals" />
// ---cut---

test('my tests', () => {
    expect('hello').toEqual('hello')
    // ^?
})
```