Typescript Config

Base tsconfig.json for using Typescript in the various projects at LottieFiles.

Table of contents

• Installation
• Usage
• Changelog

Installation

1. Install config and Typescript.

Install Typescript and the shared config by running:

# Normal repository? Install in the project root.
pnpm add -D typescript @lottiefiles/tsconfig

# Monorepo? Install Prettier in the project root workspace.
pnpm add -DW typescript @lottiefiles/tsconfig

2. Create configuration file

Create a tsconfig.json file in your project root with the contents below:

{
  "extends": "@lottiefiles/tsconfig",

  "compilerOptions": {
    // Compiled output JS and source maps output directory
    "outDir": "./dist",

    // Source root directory
    "rootDir": "./src",
  }
}

Usage

Monorepo Recommendation

tsconfig.build.json

Create a tsconfig.build.json in the project root that extends from @lottiefiles/tsconfig. This file will be used for build processes.

{
  // Extend from the org config
  "extends": "@lottiefiles/tsconfig",

  "compilerOptions": {
    // Use composite mode to enable building using projects and project references
    "composite": true,

    // Allow emit (required for composite mode)
    "noEmit": false
  },

  "exclude": [
    // Exclude tests and snapshots
    "**/test",
    "**/*.test.ts",
    "**/__mocks__",
    "**/__tests__",
    "**/__snapshots__",
    "**/coverage",

    // Exclude builds
    "**/dist",
    "**/dist-dev",
    "**/artifacts"
  ]
}

tsconfig.dev.json

Create a tsconfig.dev.json in the project root that extends from @lottiefiles/tsconfig. This file will be used for linting processes.

{
  // Extend from the org config
  "extends": "@lottiefiles/tsconfig",

  "compilerOptions": {
    // Allow non-module Typescript files (e.g. scripts)
    "isolatedModules": false
  },

  "exclude": [
    // Exclude non-code test resources
    "**/__snapshots__",
    "**/coverage",

    // Exclude builds
    "**/dist",
    "**/dist-dev",
    "**/artifacts"
  ],

  // Include all Javascript, Typescript, JSX, CommonJS and Module files
  "include": ["**/*.js", "**/*.jsx", "**/*.json", "**/*.ts", "**/*.tsx", "**/*.mjs", "**/*.cjs", "**/.*.cjs"]
}

tsconfig.json

Create a tsconfig.json in the root that extends from the tsconfig.build.json file and add any development/IDE relevant customization necessary for Typescript typechecking.

{
  // Must be set to empty [] array
  "files": [],

  "compilerOptions": {
    "disableSourceOfProjectReferenceRedirect": true
  },

  "references": [{ "path": "../path-to-package1" }, { "path": "../path-to-package2" }]
}

3. For every package in the workspace, create a tsconfig.json file that extends from the root tsconfig.build.json file (and depending on use case, a tsconfig.dev.json that extends from the root tsconfig.dev.json file).

{
  // Extend from the build config
  "extends": "../../tsconfig.build.json",

  // Compiler options
  "compilerOptions": {
    // Compiled output JS and source maps output directory
    "outDir": "./dist",

    // Source root directory
    "rootDir": "./src"
  },

  "include": ["./src", "./types"],

  // Setup project references
  "references": [{ "path": "../path-to-package2" }]
}

Use references path list to allow Typescript to pickup other packages in the workspace and typing information to be extracted.

Changelog

See CHANGELOG.md for the latest changes.