Skip to main content

tsconfig

API BackendFrontendTooling

This documentation provides details about the TypeScript configuration files to be used in your project. It encompasses configurations tailored for various scenarios, including default settings, Next.js projects, and React libraries.

Installation

yarn add @octopop/tsconfig

You can import and use one of the provided tsconfig.json files as an extended version in another tsconfig.json file. Follow these steps to do so:

  1. Create or Open a tsconfig.json File:

    Create a new tsconfig.json file if you don't have one, or open an existing tsconfig.json file where you want to use the imported configuration.

  2. Add an extends Property:

    Inside your tsconfig.json file, add an extends property and set its value to the path of the tsconfig.json file you want to import. This path can be relative or absolute.

    {
      "extends": "@octopop/tsconfig/base"
    }
    

Configs

base.json

javascript

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "composite": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "inlineSources": false,
    "isolatedModules": true,
    "moduleResolution": "node",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "strict": true,
    "strictNullChecks": true
  },
  "exclude": ["node_modules"]
}

next.json

next-js

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Next.js",
  "extends": "./base.json",
  "compilerOptions": {
    "plugins": [{ "name": "next" }],
    "allowJs": true,
    "declaration": false,
    "declarationMap": false,
    "incremental": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "resolveJsonModule": true,
    "strict": false,
    "target": "es5"
  },
  "include": ["src", "next-env.d.ts"],
  "exclude": ["node_modules"]
}

react-library.json

react-js

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "React Library",
  "extends": "./base.json",
  "compilerOptions": {
    "lib": ["ES2015", "DOM"],
    "module": "ESNext",
    "target": "ES6",
    "jsx": "react-jsx",
    "noEmit": true
  }
}