1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
To install the TypeScript definitions for Bun's built-in APIs, install `bun-types`.
```sh
$ bun add -d bun-types # dev dependency
```
Then include `"bun-types"` in the `compilerOptions.types` in your `tsconfig.json`:
```json-diff
{
"compilerOptions": {
+ "types": ["bun-types"]
}
}
```
At this point, you should be able to reference the `Bun` global in your TypeScript files without seeing errors in your editor.
```ts
console.log(Bun.version);
```
## Suggested `compilerOptions`
Bun supports things like top-level await, JSX, and extensioned `.ts` imports, which TypeScript doesn't allow by default. Below is a set of recommended `compilerOptions` for a Bun project, so you can use these features without seeing compiler warnings from TypeScript.
```jsonc
{
"compilerOptions": {
// add Bun type definitions
"types": ["bun-types"],
// enable latest features
"lib": ["ESNext"],
"module": "esnext",
"target": "esnext",
// if TS 5.x+
"moduleResolution": "bundler",
"noEmit": true,
"allowImportingTsExtensions": true,
"moduleDetection": "force",
// if TS 4.x or earlier
// "moduleResolution": "nodenext",
"jsx": "react-jsx", // support JSX
"allowJs": true, // allow importing `.js` from `.ts`
// best practices
"strict": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"composite": true,
"downlevelIteration": true,
"allowSyntheticDefaultImports": true
}
}
```
If you run `bun init` in a new directory, this `tsconfig.json` will be generated for you.
```sh
$ bun init
```
## DOM types
Unfortunately, setting a value for `"types"` means that TypeScript will ignore other global type definitions, including `lib: ["dom"]`. If you need to add DOM types into your project, add the following [triple-slash directives](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) at the top of any TypeScript file in your project.
```ts
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
```
|
