Modern Front-end Development for Rails/

...

/

TypeScript Configuration Options

TypeScript Configuration Options

Learn how to configure TypeScript.

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:

Press + to interact
{
  "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 ...