Typescript Configuration

In TypeScript, The configuration for a TypeScript project is typically defined in a tsconfig.json file.

This file allows us to specify various compiler options, including the target ECMAScript version, module system, file inclusion and exclusion patterns, and other settings.

Create a tsconfig.json file by Running below Command:

tsx --init

Note: Above Command will create tsconfig.json file with default configuration.

{
  "compilerOptions": {
    "target": "es2020",        // ECMAScript target version
    "module": "commonjs",      // Module system (e.g., "commonjs", "esnext")
    "strict": true,            // Enable strict checking options
    "esModuleInterop": true,   // Enable/disable emit interoperability between CommonJS and ES Modules
    "skipLibCheck": true,      // Skip type checking of declaration files
    "forceConsistentCasingInFileNames": true, // Enforces consistent file casing
    "outDir": "./dist",        // Output directory for compiled files
    "rootDir": "./src",        // Root directory of input files
    "sourceMap": true,         // Generate source maps
    "declaration": true,       // Generate declaration files (.d.ts)
    "noUnusedLocals": true,    // Report errors on unused local variables
    "noUnusedParameters": true, // Report errors on unused parameters
    "strictNullChecks": true,  // Enable strict null checks
    "strictFunctionTypes": true, // Enable strict checking of function types
    "noImplicitAny": true      // Raise error on expressions and declarations with an implied 'any' type
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

target: Specifies the ECMAScript target version (e.g., es5, es6, es2015, es2020, etc.).
module: Specifies the module system (e.g., commonjs, esnext, amd, umd, system, etc.).
strict: Enables all strict type-checking options.
esModuleInterop: Allows default imports from modules with no default export.
skipLibCheck: Skips type-checking of declaration files.
forceConsistentCasingInFileNames: Ensures consistent casing in file names.
outDir: Specifies the directory where the compiled JavaScript files should be placed.
rootDir: Specifies the root directory of your TypeScript source files.
include: Specifies the files to include in the compilation.
exclude: Specifies the files to exclude from the compilation.

Note: Update your tsconfig.json as per your project needed.

How to Run TypeScript Compiler:

Run the TypeScript compiler (tsc) in the terminal from the directory containing the tsconfig.json file.

The compiler will automatically use the configuration from this file.

Example:

tsc

Integrating with Build Tools:

we can use build tools like Webpack or Gulp, we can integrate Typescript into our build process by adding the necessary configurations to our build tool's configuration file.

Example:

 const path = require('path');

  module.exports = {
    entry: './src/index.ts',
   devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };

With Webpack help we can use `ts-loader` or `babel-loader` with `@babel/preset-typescript` to transpile Typescript files into `.js` file.

<-- Generics

Typescript Configuration

In TypeScript, The configuration for a TypeScript project is typically defined in a tsconfig.json file.

This file allows us to specify various compiler options, including the target ECMAScript version, module system, file inclusion and exclusion patterns, and other settings.

Create a tsconfig.json file by Running below Command:

tsx --init

Note: Above Command will create tsconfig.json file with default configuration.

{
  "compilerOptions": {
    "target": "es2020",        // ECMAScript target version
    "module": "commonjs",      // Module system (e.g., "commonjs", "esnext")
    "strict": true,            // Enable strict checking options
    "esModuleInterop": true,   // Enable/disable emit interoperability between CommonJS and ES Modules
    "skipLibCheck": true,      // Skip type checking of declaration files
    "forceConsistentCasingInFileNames": true, // Enforces consistent file casing
    "outDir": "./dist",        // Output directory for compiled files
    "rootDir": "./src",        // Root directory of input files
    "sourceMap": true,         // Generate source maps
    "declaration": true,       // Generate declaration files (.d.ts)
    "noUnusedLocals": true,    // Report errors on unused local variables
    "noUnusedParameters": true, // Report errors on unused parameters
    "strictNullChecks": true,  // Enable strict null checks
    "strictFunctionTypes": true, // Enable strict checking of function types
    "noImplicitAny": true      // Raise error on expressions and declarations with an implied 'any' type
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

target: Specifies the ECMAScript target version (e.g., es5, es6, es2015, es2020, etc.).
module: Specifies the module system (e.g., commonjs, esnext, amd, umd, system, etc.).
strict: Enables all strict type-checking options.
esModuleInterop: Allows default imports from modules with no default export.
skipLibCheck: Skips type-checking of declaration files.
forceConsistentCasingInFileNames: Ensures consistent casing in file names.
outDir: Specifies the directory where the compiled JavaScript files should be placed.
rootDir: Specifies the root directory of your TypeScript source files.
include: Specifies the files to include in the compilation.
exclude: Specifies the files to exclude from the compilation.

Note: Update your tsconfig.json as per your project needed.

How to Run TypeScript Compiler:

Run the TypeScript compiler (tsc) in the terminal from the directory containing the tsconfig.json file.

The compiler will automatically use the configuration from this file.

Example:

tsc

Integrating with Build Tools:

we can use build tools like Webpack or Gulp, we can integrate Typescript into our build process by adding the necessary configurations to our build tool's configuration file.

Example:

 const path = require('path');

  module.exports = {
    entry: './src/index.ts',
   devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };

With Webpack help we can use `ts-loader` or `babel-loader` with `@babel/preset-typescript` to transpile Typescript files into `.js` file.

<-- Generics