Comprehensive TypeScript guidance covering compiler configuration, advanced types, utility types, type guards, strict mode workflows, and documentation patterns; use when configuring tsconfig, designing complex generics, making illegal states unrepresentable, fixing type errors, or writing testable and maintainable type-safe APIs.
Overall
score
99%
Does it follow best practices?
Validation for skill structure
Enable caching for faster rebuilds:
{
"compilerOptions": {
"incremental": true,
"tsBuildInfoFile": ".tsbuildinfo"
}
}Benefits:
For monorepos and large projects:
{
"compilerOptions": {
"composite": true,
"declaration": true
},
"references": [
{ "path": "../shared" }
]
}Benefits:
Build with:
tsc --build
tsc --build --watch # Watch mode
tsc --build --force # Clean rebuildSkip checking node_modules:
{
"compilerOptions": {
"skipLibCheck": true
}
}Trade-offs:
{
"include": ["src/**/*"],
"exclude": [
"node_modules",
"dist",
"**/*.test.ts",
"**/*.spec.ts"
]
}Alternative: Separate test configuration
// tsconfig.build.json (for production)
{
"extends": "./tsconfig.json",
"exclude": ["**/*.test.ts", "**/*.spec.ts"]
}Prevent runaway type computation:
{
"compilerOptions": {
"noErrorTruncation": false, // Truncate long error messages
"maxNodeModuleJsDepth": 0 // Don't infer types from .js files
}
}// Slow: Deep recursion
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object
? DeepPartial<T[P]>
: T[P];
};
// Limit recursion depth
type DeepPartial<T, Depth extends number = 5> = Depth extends 0
? T
: {
[P in keyof T]?: T[P] extends object
? DeepPartial<T[P], Prev[Depth]>
: T[P];
};
type Prev = [never, 0, 1, 2, 3, 4, 5];// Slow: Large union (100s of members)
type Color = "red" | "blue" | "green" | ... // 100+ values
// Fast: Use string index
type Color = string;
const COLORS = {
red: "#ff0000",
blue: "#0000ff",
// ...
} as const;
type Color = keyof typeof COLORS;// Slow: Recalculate every time
function process<T>(value: ComplexType<ComplexType<T>>) {}
// Fast: Cache intermediate type
type CachedComplex<T> = ComplexType<ComplexType<T>>;
function process<T>(value: CachedComplex<T>) {}// Recalculates type each time
function a(value: { id: string; name: string; age: number }) {}
function b(value: { id: string; name: string; age: number }) {}
// Fast: Reuse type
type User = { id: string; name: string; age: number };
function a(value: User) {}
function b(value: User) {}Use fork-ts-checker-webpack-plugin or similar:
// webpack.config.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = {
plugins: [
new ForkTsCheckerWebpackPlugin({
async: true, // Non-blocking
typescript: {
configFile: 'tsconfig.json'
}
})
]
};Only use TypeScript for type checking:
# Type check
tsc --noEmit
# Transpile (fast)
esbuild src/index.ts --bundle --outfile=dist/index.js
# or
swc src -d distBenefits:
{
"compilerOptions": {
"assumeChangesOnlyAffectDirectDependencies": true
},
"watchOptions": {
"excludeDirectories": ["**/node_modules", "dist"],
"excludeFiles": ["**/*.test.ts"]
}
}{
"exclude": [
"node_modules",
"dist",
"build",
"coverage",
".cache"
]
}{
"compilerOptions": {
"types": [] // Only include explicit @types packages
}
}@ts-nocheck for Problematic Files// @ts-nocheck
// Large generated file or vendor codetsc --generateTrace trace
# Analyze with: https://ui.perfetto.dev/tsc --diagnostics
# or more detail
tsc --extendedDiagnosticsOutput includes:
tsc --generateTrace trace --extendedDiagnosticsLook for:
Compilation times to aim for:
If slower:
incremental: trueskipLibCheck: trueInstall with Tessl CLI
npx tessl i pantheon-ai/typescript-advanced@0.1.1references