TsConfig Presets

The configuration file can contain a variety of presets that can be used for generating Tsconfig files.

These presets contain all of the fields of a normal tsconfig.json file, with the addition of an extra field called extend-presets, which allows you to extend a basic preset from another one.

ℹ️ You can omit the ts_config field entirely, and the defaults will be used.

Example

Let's start with some basic starting point here:

Here we define two typical tsconfig settings to use for the packages in our workspace.

The app preset will not emit any .d.ts or .js files, whereas the library preset, which can be used for internal packages, will have emitDeclarationOnly set to true.

typescript:
  tsconfig_presets:
    app:
      compilerOptions:
        noEmit: true
      include:
        - src

    lib:
      compilerOptions:
        emitDeclarationOnly: true

Now let's say that we want to create another preset which starts from the app preset but adds the tests directory to include:

    testing:
      extend_presets: ["app"]
      # The two lists will be merged and deduped
      include: ["tests"]

Now we will set up a package that will generate 2 tsconfig files.

• A basic tsconfig.json file, which we will define literally, and it will have just the files field set to an empty array.
• One which will use the lib preset and extend it with an extra feature of our choice, and that will apply only to the files inside src. We will generate this in tsconfig.src.json.
• A separate config that will take care of typechecking the files inside the tests directory, without emitting files. We will create this inside tsconfig.dev.json.

  package_presets:
    tsconfig-example:
      dir: packages/tsconfig-example
      name: "@examples/tsconfig"

      # Tsconfig can also be not defined at all,
      # and the default presets will be used.
      ts_config:
        - output: tsconfig.json
          # Literal definition
          config:
            files: []

        - output: tsconfig.dev.json
          # Only specifying the preset id here
          config: testing

        - output: tsconfig.src.json
          config:
            # Literal definition that extends a preset
            extend_presets: ["lib"]
            compilerOptions:
              verbatimModuleSyntax: true

After running the command

sketch ts package --preset tsconfig-example

We get the following files:

tsconfig.json

{
  "files": []
}

tsconfig.src.json

{
  "compilerOptions": {
    "emitDeclarationOnly": true,
    "verbatimModuleSyntax": true
  }
}

✏️ Note how the two configs have been merged!

tsconfig.dev.json

{
  "include": [
    "src",
    "tests"
  ],
  "compilerOptions": {
    "noEmit": true
  }
}