Search⌘ K
Home
Courses
Modern Front-end Development for Rails

TypeScript Configuration Options

Explore how to effectively configure TypeScript through the tsconfig.json file. Understand file inclusion and exclusion patterns, compiler behavior options, module resolution settings, and how strict type checking affects your project. This lesson helps you balance strictness and compatibility while managing project compilation.

We'll cover the following...

At this point, I think we have all the tools we need to start discussing TypeScript configuration.

tsconfig.json file

Here’s our tsconfig.json file, which controls the configuration of our compiler:

YAML
{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "jsx": "react",
    "module": "es6",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
        "*": ["node_modules/*", "app/javascript/*"]
    },
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "**/*.spec.ts",
    "node_modules",
    "vendor",
    "public"
  ],
  "compileOnSave": false
}

The configuration file has two main purposes:

  • Specifying the list of files to compile
  • Specifying the behavior of the compiler itself

You can specify the files explicitly using a files property that takes a list of files to compile. Or you can use include and exclude properties. If you don’t have a files or an include—as our project does not—the default behavior is to compile any .ts or .tsx files that are not on the exclude list.

Both include and exclude can be made up of explicit file names or you can use patterns with ? to match a single character, * to match any characters except ...