Shared Typescript config for LottieFiles projects
npm install @lottiefiles/tsconfig> Base tsconfig.json for using Typescript in the various projects at LottieFiles.
* Installation
* Usage
* Changelog
#### 1. Install config and Typescript.
Install Typescript and the shared config by running:
``shNormal repository? Install in the project root.
pnpm add -D 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 beSee CHANGELOG.md for the latest changes.