or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

formatters.mdindex.mdissues-filtering.mdplugin-configuration.mdplugin-hooks.mdtypescript-configuration.md
tile.json

index.mddocs/

Fork TS Checker Webpack Plugin

A webpack plugin that runs TypeScript type checking on a separate process to speed up webpack compilation by moving type checking out of the main build process. It supports modern TypeScript features like project references and incremental mode, provides formatted error messages with code frames, and offers comprehensive configuration options for memory limits, TypeScript configuration overrides, issue filtering, and diagnostic selection.

Package Information

  • Package Name: fork-ts-checker-webpack-plugin
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev fork-ts-checker-webpack-plugin

Core Imports

import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";

For CommonJS:

const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

Basic Usage

// webpack.config.js
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";

export default {
  context: __dirname, // to automatically find tsconfig.json
  entry: './src/index.ts',
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true // Important: disable type checking in ts-loader
        }
      }
    ]
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: false, // Run synchronously for production builds
      typescript: {
        configFile: './tsconfig.json',
        memoryLimit: 4096
      }
    })
  ]
};

Architecture

Fork TS Checker Webpack Plugin is built around several key components:

  • Plugin Class: Main ForkTsCheckerWebpackPlugin class that integrates with webpack's plugin system
  • Worker Processes: Separate Node.js processes for type checking and dependency analysis
  • Hook System: Extensible hooks for intercepting type checking lifecycle events
  • Issue System: Structured error and warning representation with location and severity information
  • Formatter System: Configurable output formatting for type checking results
  • Configuration System: Comprehensive options for TypeScript, issue filtering, formatters, and logging

Capabilities

Plugin Configuration

Core plugin instantiation and configuration options for integrating with webpack builds.

class ForkTsCheckerWebpackPlugin {
  constructor(options?: ForkTsCheckerWebpackPluginOptions);
  apply(compiler: webpack.Compiler): void;
  static getCompilerHooks(compiler: webpack.Compiler): ForkTsCheckerWebpackPluginHooks;
  static readonly version: string;
  static readonly issuesPool: object;
  static readonly dependenciesPool: object;
}

interface ForkTsCheckerWebpackPluginOptions {
  async?: boolean;
  typescript?: TypeScriptWorkerOptions;
  formatter?: FormatterOptions;
  issue?: IssueOptions;
  logger?: Logger | 'webpack-infrastructure';
  devServer?: boolean;
}

Plugin Configuration

TypeScript Configuration

Advanced TypeScript compiler configuration including memory limits, config file overrides, build modes, and diagnostic options.

interface TypeScriptWorkerOptions {
  memoryLimit?: number;
  configFile?: string;
  configOverwrite?: TypeScriptConfigOverwrite;
  context?: string;
  build?: boolean;
  mode?: 'readonly' | 'write-tsbuildinfo' | 'write-dts' | 'write-references';
  diagnosticOptions?: Partial<TypeScriptDiagnosticsOptions>;
  profile?: boolean;
  typescriptPath?: string;
}

TypeScript Configuration

Issue Types and Filtering

Type checking issue representation, severity levels, location information, and filtering options.

interface Issue {
  severity: IssueSeverity;
  code: string;
  message: string;
  file?: string;
  location?: IssueLocation;
}

type IssueSeverity = 'error' | 'warning';

interface IssueLocation {
  start: IssuePosition;
  end: IssuePosition;
}

interface IssueOptions {
  include?: IssuePredicateOption;
  exclude?: IssuePredicateOption;
}

Issues and Filtering

Formatter Configuration

Output formatters for displaying type checking results with customizable path formats and code frame options.

type FormatterOptions =
  | undefined
  | FormatterType
  | BasicFormatterOptions
  | CodeframeFormatterOptions
  | Formatter;

type Formatter = (issue: Issue) => string;

interface BasicFormatterOptions {
  type: 'basic';
  pathType?: FormatterPathType;
}

interface CodeframeFormatterOptions {
  type: 'codeframe';
  pathType?: FormatterPathType;
  options?: BabelCodeFrameOptions;
}

Formatters

Plugin Hooks System

Extensible hook system for intercepting and customizing type checking lifecycle events.

interface ForkTsCheckerWebpackPluginHooks {
  start: AsyncSeriesWaterfallHook<[FilesChange, webpack.Compilation]>;
  waiting: SyncHook<[webpack.Compilation]>;
  canceled: SyncHook<[webpack.Compilation]>;
  error: SyncHook<[unknown, webpack.Compilation]>;
  issues: SyncWaterfallHook<[Issue[], webpack.Compilation | undefined], void>;
}

function getPluginHooks(compiler: webpack.Compiler | webpack.MultiCompiler): ForkTsCheckerWebpackPluginHooks;

Plugin Hooks

Global Types

Logger Interface

interface Logger {
  log: (message: string) => void;
  error: (message: string) => void;
}

Files Change Tracking

interface FilesChange {
  changedFiles?: string[];
  deletedFiles?: string[];
}

/**
 * Get current files change for a webpack compiler
 * @param compiler - Webpack compiler instance
 * @returns Current files change state
 */
function getFilesChange(compiler: webpack.Compiler): FilesChange;

/**
 * Consume and clear files change for a webpack compiler
 * @param compiler - Webpack compiler instance  
 * @returns Files change state before clearing
 */
function consumeFilesChange(compiler: webpack.Compiler): FilesChange;

/**
 * Update files change for a webpack compiler
 * @param compiler - Webpack compiler instance
 * @param change - Files change to merge
 */
function updateFilesChange(compiler: webpack.Compiler, change: FilesChange): void;

/**
 * Clear files change for a webpack compiler
 * @param compiler - Webpack compiler instance
 */
function clearFilesChange(compiler: webpack.Compiler): void;

/**
 * Aggregate multiple files changes into one
 * @param changes - Array of files changes to aggregate
 * @returns Aggregated files change
 */
function aggregateFilesChanges(changes: FilesChange[]): FilesChange;

Issue Position

interface IssuePosition {
  line: number; // 1-based line number
  column: number; // 0-based column number
}

Issue Predicate Option

type IssuePredicateOption = IssuePredicate | IssueMatch | (IssuePredicate | IssueMatch)[];
type IssuePredicate = (issue: Issue) => boolean;
interface IssueMatch {
  file?: string;
  code?: string;
  severity?: IssueSeverity;
}

Path Type

type FormatterPathType = 'relative' | 'absolute';