Browserify plugin for compiling TypeScript files with seamless integration and incremental compilation support
—
Comprehensive error handling system in tsify for TypeScript compilation diagnostics and runtime errors.
Specialized error class for TypeScript compilation errors with detailed diagnostic information.
/**
* TypeScript compilation error with detailed diagnostics
* Extends SyntaxError to provide TypeScript-specific error information
*/
class CompileError extends SyntaxError {
/** File name where the error occurred */
fileName?: string;
/** Line number where the error occurred (1-based) */
line?: number;
/** Column number where the error occurred (1-based) */
column?: number;
/** Error name - always "TypeScript error" */
name: string;
/** Formatted error message with location and details */
message: string;
}Error Message Format:
filename.ts(line,column): category TS#### error messageTypeScript diagnostic errors are categorized by severity:
/** TypeScript diagnostic categories */
enum DiagnosticCategory {
Warning = 0,
Error = 1,
Suggestion = 2,
Message = 3
}Syntax Errors:
Semantic Errors:
noEmitOnError settingEmit Errors:
Basic Error Handling:
const browserify = require('browserify');
const tsify = require('tsify');
browserify()
.add('main.ts')
.plugin(tsify, { strict: true })
.bundle()
.on('error', function(error) {
console.error('Compilation failed:', error.message);
// Check if it's a TypeScript compilation error
if (error.fileName) {
console.error(`File: ${error.fileName}`);
console.error(`Location: ${error.line}:${error.column}`);
}
})
.pipe(process.stdout);Detailed Error Information:
browserify()
.add('main.ts')
.plugin(tsify)
.bundle()
.on('error', function(error) {
if (error instanceof Error) {
console.error('Error Name:', error.name);
console.error('Error Message:', error.message);
// TypeScript-specific properties
if (error.fileName) {
console.error('File:', error.fileName);
console.error('Line:', error.line);
console.error('Column:', error.column);
}
// Stack trace for debugging
console.error('Stack:', error.stack);
}
});Graceful Error Recovery:
function buildWithErrorRecovery() {
return new Promise((resolve, reject) => {
let hasErrors = false;
const bundle = browserify()
.add('src/main.ts')
.plugin(tsify, {
noEmitOnError: false // Continue bundling despite type errors
})
.bundle();
bundle.on('error', function(error) {
hasErrors = true;
console.warn('TypeScript error (continuing):', error.message);
});
let output = '';
bundle.on('data', chunk => output += chunk);
bundle.on('end', () => {
if (hasErrors) {
console.warn('Bundle completed with TypeScript errors');
}
resolve(output);
});
});
}Stop on Error (Default):
browserify()
.add('main.ts')
.plugin(tsify, {
noEmitOnError: true // Stop compilation on any error
})
.bundle();Continue on Error:
browserify()
.add('main.ts')
.plugin(tsify, {
noEmitOnError: false // Generate output despite errors
})
.bundle();Missing Type Definitions:
// Error: Cannot find module 'some-library' or its corresponding type declarations
browserify()
.add('main.ts')
.plugin(tsify, {
skipLibCheck: true // Skip type checking for .d.ts files
})
.bundle();Module Resolution Errors:
// Error: Cannot resolve module 'src/utils'
browserify()
.add('main.ts')
.plugin(tsify, {
baseUrl: './src',
paths: {
'@utils/*': ['utils/*']
}
})
.bundle();Strict Mode Errors:
// Error: Parameter 'x' implicitly has an 'any' type
browserify()
.add('main.ts')
.plugin(tsify, {
noImplicitAny: false, // Allow implicit any
strict: false // Disable all strict checks
})
.bundle();tsify emits errors through Browserify's standard error system:
/**
* Error events emitted by tsify:
*
* 'error' - Compilation errors (syntax, semantic, emit)
* - Includes CompileError instances with diagnostic information
* - Emitted for each error encountered during compilation
*
* Error handling occurs at multiple levels:
* 1. Tsifier level - Internal compilation errors
* 2. Plugin level - Integration errors with Browserify
* 3. Bundle level - Stream and bundling errors
*/When using with watchify for incremental compilation:
const watchify = require('watchify');
const b = browserify({
entries: ['src/main.ts'],
cache: {},
packageCache: {},
plugin: [watchify]
});
b.plugin(tsify);
b.on('update', bundle);
b.on('log', console.log);
function bundle() {
const stream = b.bundle();
stream.on('error', function(error) {
// Handle compilation errors without stopping watch
console.error('TypeScript Error:', error.message);
// Emit end event to continue watching
stream.emit('end');
});
return stream.pipe(process.stdout);
}
bundle();Enable debug logging for detailed error context:
# Enable tsify debug logging
DEBUG=tsify* browserify main.ts -p tsify > bundle.js
# Enable tsify trace logging
DEBUG=tsify*,tsify-trace* browserify main.ts -p tsify > bundle.jsinterface ErrorContext {
/** TypeScript diagnostic object */
diagnostic: any;
/** File where error occurred */
fileName?: string;
/** Error location */
location?: {
line: number;
column: number;
};
/** Error category */
category: 'Warning' | 'Error' | 'Suggestion' | 'Message';
/** TypeScript error code */
code: number;
/** Error message text */
messageText: string;
}
interface ErrorHandlingOptions {
/** Stop compilation on first error */
noEmitOnError?: boolean;
/** Skip type checking of .d.ts files */
skipLibCheck?: boolean;
/** Allow implicit any types */
noImplicitAny?: boolean;
/** Enable all strict type checking options */
strict?: boolean;
}Install with Tessl CLI
npx tessl i tessl/npm-tsify