We use cookies to enhance your experience on the site

Environment configuration (tsconfig.json)

Introduction: The Jurassic Park map

In the previous lesson we learned about TypeScript as an advanced security system for our Jurassic Park. Now it's time to understand how to configure this system - it's like designing a map of the park, defining security zones and setting access levels.

In the TypeScript world, this configuration is provided by the tsconfig.json file. It determines how the TypeScript compiler works, what options are enabled, how strict the typing rules are, and many other aspects.

Dr. Henry Wu, the park's chief geneticist, likes to say: "Control is an illusion." But in the case of TypeScript, proper configuration gives us real control over our code.

Creating the tsconfig.json file

Let's start by creating a basic configuration file for our Jurassic Park management system:

1# If you have TypeScript installed globally, you can use:
2tsc --init
3
4# Or using npx:
5npx tsc --init

This command will generate a basic tsconfig.json file with the most important options (most of them will be commented out). For our dinosaur park, we can create a custom configuration:

1{
2  "compilerOptions": {
3    "target": "es2016",
4    "module": "commonjs",
5    "outDir": "./dist",
6    "rootDir": "./src",
7    "strict": true,
8    "esModuleInterop": true,
9    "skipLibCheck": true,
10    "forceConsistentCasingInFileNames": true
11  },
12  "include": ["src/**/*"],
13  "exclude": ["node_modules", "**/*.spec.ts"]
14}

It's as if Dr. Hammond prepared guidelines for how the individual zones of the park should function.

The most important configuration options

Basic project structure

Just as in the park we need to designate zones for different dinosaur species, in a TypeScript project we need to define where the source files are and where the output files will be generated:

1{
2  "compilerOptions": {
3    "outDir": "./dist",    // Output directory where .js files will be generated
4    "rootDir": "./src",    // Source directory where .ts files are located
5    "baseUrl": ".",        // Base URL for relative paths
6    "paths": {             // Aliases for import paths
7      "@models/*": ["src/models/*"],
8      "@utils/*": ["src/utils/*"],
9      "@config/*": ["src/config/*"]
10    }
11  }
12}

It's like having a park map with markings:

"src" is our main operational base
"dist" is the area accessible to visitors
We also have shortcuts to important places in the park (laboratory, control center, etc.)

ECMAScript version

Just as the park must be compatible with different dinosaur species, our TypeScript code must be compatible with different JavaScript environments:

1{
2  "compilerOptions": {
3    "target": "es2016",     // Which JS version to compile to
4    "module": "commonjs",   // Module system (commonjs, ES modules, etc.)
5    "lib": ["dom", "es2016", "dom.iterable", "scripthost"] // Definition libraries
6  }
7}

In our park:

"target" is like specifying which dinosaur species we're able to work with
"module" is like the transport system in the park (jeeps, monorail, etc.)
"lib" is like specifying what tools and equipment we have available

Strictness level

Depending on the dinosaur species in the park, we need different security levels. Similarly in TypeScript, we can regulate the level of strictness in type checking:

1{
2  "compilerOptions": {
3    "strict": true,                // Enables all strict options below
4    "noImplicitAny": true,         // Requires explicit "any" type declaration
5    "strictNullChecks": true,      // Requires checking for null and undefined
6    "strictFunctionTypes": true,   // Stricter function type checking
7    "strictBindCallApply": true,   // Type checking for bind, call and apply methods
8    "strictPropertyInitialization": true, // Checks if class properties are initialized
9    "noImplicitThis": true,        // Requires explicit "this" type
10    "alwaysStrict": true           // Parses code in strict mode
11  }
12}

In the context of Jurassic Park:

```
strict: true
```
is like implementing the highest security level in all park sectors
```
noImplicitAny
```
is like the rule "always identify the dinosaur species before placing it in an enclosure"
```
strictNullChecks
```
is like checking that the fences are actually connected to power instead of assuming everything works

Module and import configuration

Managing the park, we need a clear communication system between different departments. In TypeScript we configure how modules communicate with each other:

1{
2  "compilerOptions": {
3    "module": "esnext",            // Module system
4    "moduleResolution": "node",    // Module resolution strategy
5    "esModuleInterop": true,       // Better interoperability with CommonJS modules
6    "allowSyntheticDefaultImports": true, // Allows default import from modules without default export
7    "resolveJsonModule": true      // Allows importing JSON files
8  }
9}

In the park:

```
moduleResolution
```
is like the radio communication system - defines how we find and contact different teams
```
esModuleInterop
```
is like ensuring older and newer communication systems work together
```
resolveJsonModule
```
is like the ability to read standard report forms

Developer options

Dr. Wu needs tools to create new dinosaur species. We also need developer tools:

1{
2  "compilerOptions": {
3    "sourceMap": true,            // Generates .map files for easier debugging
4    "declaration": true,          // Generates .d.ts files with type declarations
5    "declarationMap": true,       // Generates .map files for .d.ts files
6    "incremental": true,          // Speeds up compilation by caching previous builds
7    "tsBuildInfoFile": "./dist/.tsbuildinfo" // File with compilation info
8  }
9}

In the park:

```
sourceMap
```
is like detailed DNA documentation for each dinosaur - helps understand what went wrong
```
declaration
```
is like a registry of all dinosaur species
```
incremental
```
is like optimizing the cloning process to avoid repeating the same procedures

Options for React projects

If you use React (hypothetically, interactive attractions in Jurassic Park), additional options are useful:

1{
2  "compilerOptions": {
3    "jsx": "react",               // JSX syntax support
4    "jsxFactory": "React.createElement", // Function used to compile JSX
5    "jsxFragmentFactory": "React.Fragment" // Fragment component
6  }
7}

It's like configuring interactive displays in the visitor center that show animations and information about dinosaurs.

Configuration for specific cases

Node.js project for the park security system

1{
2  "compilerOptions": {
3    "target": "es2018",
4    "module": "commonjs",
5    "outDir": "./dist",
6    "rootDir": "./src",
7    "strict": true,
8    "esModuleInterop": true,
9    "skipLibCheck": true,
10    "forceConsistentCasingInFileNames": true,
11    "lib": ["es2018"]
12  },
13  "include": ["src/**/*"],
14  "exclude": ["node_modules", "**/*.spec.ts"]
15}

Frontend application for the park management dashboard

1{
2  "compilerOptions": {
3    "target": "es5",
4    "lib": ["dom", "dom.iterable", "esnext"],
5    "allowJs": true,
6    "skipLibCheck": true,
7    "esModuleInterop": true,
8    "allowSyntheticDefaultImports": true,
9    "strict": true,
10    "forceConsistentCasingInFileNames": true,
11    "module": "esnext",
12    "moduleResolution": "node",
13    "resolveJsonModule": true,
14    "isolatedModules": true,
15    "noEmit": true,
16    "jsx": "react"
17  },
18  "include": ["src"]
19}

Extending configuration

In a large dinosaur park there may be different zones with their own safety regulations, but all are subject to general rules. Similarly, in TypeScript we can extend configurations:

1// tsconfig.base.json - main configuration
2{
3  "compilerOptions": {
4    "target": "es2016",
5    "module": "commonjs",
6    "strict": true
7  }
8}
9
10// tsconfig.backend.json - backend configuration
11{
12  "extends": "./tsconfig.base.json",
13  "compilerOptions": {
14    "outDir": "./dist/backend",
15    "rootDir": "./src/backend"
16  },
17  "include": ["src/backend/**/*"]
18}
19
20// tsconfig.frontend.json - frontend configuration
21{
22  "extends": "./tsconfig.base.json",
23  "compilerOptions": {
24    "outDir": "./dist/frontend",
25    "rootDir": "./src/frontend",
26    "jsx": "react"
27  },
28  "include": ["src/frontend/**/*"]
29}

It's like a park map with different zones that share common safety rules but also have their own specific guidelines.

Practical example: Monitoring system for Jurassic Park

Let's imagine we're creating a new monitoring system for the park, here's the configuration we might use:

1{
2  "compilerOptions": {
3    // ES version
4    "target": "es2018",
5    "module": "commonjs",
6    "lib": ["es2018", "dom"],
7
8    // Project structure
9    "outDir": "./dist",
10    "rootDir": "./src",
11    "baseUrl": ".",
12    "paths": {
13      "@park/*": ["src/park/*"],
14      "@security/*": ["src/security/*"],
15      "@monitoring/*": ["src/monitoring/*"],
16      "@types/*": ["src/types/*"]
17    },
18
19    // Strictness
20    "strict": true,
21    "noImplicitAny": true,
22    "strictNullChecks": true,
23
24    // Module management
25    "moduleResolution": "node",
26    "esModuleInterop": true,
27    "resolveJsonModule": true,
28
29    // Developer tools
30    "sourceMap": true,
31    "declaration": true,
32
33    // Additional rules
34    "forceConsistentCasingInFileNames": true,
35    "skipLibCheck": true,
36    "noUnusedLocals": true,
37    "noUnusedParameters": true
38  },
39  "include": ["src/**/*"],
40  "exclude": ["node_modules", "dist", "**/*.spec.ts"]
41}

With this configuration file, our Jurassic Park security system would be:

Modern and compatible with current standards (
```
es2018
```
)
Well organized with a clear directory structure
Strict in type checking, not allowing potential vulnerabilities
Flexible in module and dependency management
Easy to debug and with good type documentation
Free of unused variables and parameters that could cause confusion

Helper tools

Beyond the tsconfig.json file itself, it's also worth configuring helper tools that support working with TypeScript:

ESLint for TypeScript

ESLint is like an additional surveillance system in the park that catches potential threats:

1// .eslintrc.json
2{
3  "parser": "@typescript-eslint/parser",
4  "plugins": ["@typescript-eslint"],
5  "extends": [
6    "eslint:recommended",
7    "plugin:@typescript-eslint/recommended"
8  ],
9  "rules": {
10    "no-console": "warn",
11    "@typescript-eslint/explicit-function-return-type": "error",
12    "@typescript-eslint/no-explicit-any": "error"
13  }
14}

Prettier for code formatting

Prettier is like a dress code and code of conduct for park employees - everyone looks and acts consistently:

1// .prettierrc
2{
3  "semi": true,
4  "trailingComma": "all",
5  "singleQuote": true,
6  "printWidth": 100,
7  "tabWidth": 2
8}

Common problems and solutions

Problem: "Property 'x' does not exist on type 'y'"

This error is like the security system alarming that you're trying to use a non-existent access code to an enclosure:

1// Error
2const dino = { species: "T-Rex", age: 5 };
3console.log(dino.height); // Error: Property 'height' does not exist on type '{ species: string; age: number; }'.
4
5// Solution 1: Add the property to the type
6const dino: { species: string; age: number; height?: number } = {
7  species: "T-Rex",
8  age: 5
9};
10
11// Solution 2: Use an interface
12interface Dinosaur {
13  species: string;
14  age: number;
15  height?: number;
16}
17const dino: Dinosaur = { species: "T-Rex", age: 5 };

Problem: Configuration is not being applied

Sometimes, similar to when the park's security system isn't responding, the TypeScript configuration may not be properly applied:

Check that the paths in
```
include
```
and
```
exclude
```
are correct
Make sure you're using the right tsconfig.json file
Restart the TypeScript server in your IDE

1# Check which files are being processed by TypeScript
2tsc --listFiles
3
4# Check if the compiler finds tsconfig.json
5tsc --showConfig

Problem: Missing types for an external library

This is like discovering that documentation is missing for new safety equipment in the park:

1# Try to find type definitions for the library
2npm install --save-dev @types/library-name
3
4# If no official types exist, create your own
5touch src/types/library-name.d.ts

1// src/types/library-name.d.ts
2declare module 'library-name' {
3  export function function1(param: string): number;
4  export function function2(param: number): string;
5  export const constant: string;
6}

Summary

The tsconfig.json file is like a map of Jurassic Park - it defines zones, security levels and guidelines for all systems. Proper TypeScript configuration ensures:

Consistent code throughout the project
Early detection of potential problems
Better developer tool support
Clear rules for the entire programming team

Just as John Hammond spared no expense on park security, we shouldn't skip proper TypeScript configuration. It's an investment that pays off in more stable and secure code.

In the next lesson we'll look at the TypeScript compiler and learn how it transforms TypeScript code into JavaScript, similar to how the scientists in the laboratory transform DNA into living dinosaurs!

Go to CodeWorlds→