Configuring TypeScript 16 exercises
explainer

Recommended Base Configuration

The tsconfig.json file is the core of how you configure TypeScript to do what you want it to do. At first glance, it might seem overwhelming, but it's really just a few key choices wrapped up in a bundle of compiler options.

Let's break it down into some recommended base options, strictness setti

Loading explainer

Transcript

00:00 In this section we're going to look at the tsconfig.json file. This can feel like a terrifying, terrifying file to look at, but I like to think of it as really only two or three choices wrapped up in a big bundle of compiler options. So we have here, this this file is basically the core

00:17 of how you configure TypeScript to do what you want it to do, and I recommend some base options, some strictness options, and then a couple of choices on top which we will dive into. So the base options are relatively simple. We have a skip lib check true, which we've seen before,

00:32 basically disables type checking on .d.ts files, which is important. Then you have this target attribute here, which basically is the target of the TypeScript version or JavaScript version that we're trying to emit and produce. Then, which we will dive into this later, don't worry,

00:48 es module interrupt basically makes working with common.js export.default a little bit easier. Allow.js lets you import js files. Resolve.json module lets you import .json files. Module detection force I'm pretty sure we've covered before. Isolated modules we'll cover in a bit,

01:06 and verbatim module syntax we'll cover in a bit too. So these are just the base options I recommend for any project. Literally any project will benefit from these options. Then we have strictness settings here. I only recommend three strictness settings, strict true, no unchecked index access true, and no implicit override true. We've had a look at no implicit override true. We will take a

01:26 look at both of these in this section. Now we get to our first choice point. If you are transpiling with TypeScript, in other words, if you're using TSC to turn your TypeScript files into JavaScript files, you should choose these three settings. So we have module node next, outdir dist, and

01:45 source map true. Outdir dist basically says take my TypeScript files and put them in a folder called dist. Source map generates some source maps for that, which can be really useful when working with node. And module node next basically says emulate the behavior of node when you produce

02:01 module code. Then if you're building for a library, you kind of want to add declaration files as well. You want to produce .d.ts files. And if you're building inside a monorepo, you want composite true and declaration map true. Again, we're going to cover that later. But if you're not transpiling with TypeScript, then you can turn all of these off and instead have module

02:20 preserve and no emit true. No emit true basically turns TypeScript into more of a linter. This means that you can use TypeScript with an external bundler like esbuild or next or Vite or remix or anything really. Remix isn't a bundler. Vite bundled it for it, but you get the idea. So if

02:39 you're not transpiling with TSC, any other tool, you basically say module preserve and no emit true. And that's it. And you've got two final choices. If your code runs in the DOM, you want to include the DOM types. If it doesn't run in the DOM, for instance, you're working on a backend

02:54 application, then you've got lib es 2022 there and you exclude the DOM and DOM iterable types. So that's not that many choices. There are a few extra sprinkles on top of that, like whether you want to include JSX or not, whether you want path aliases or not, but really this base options,

03:12 these base options will get you very, very far. And you should think of tsconfig.json as a set of base options you should always include. And then a few sprinkles on top that will make it feel a lot less complicated.