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:

``sh


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:

`json
{
"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.

`json
{
// 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.

`json
{
// 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.

`json
{
// 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).

`json
{
// 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.