@scaffit/typescript

TypeScript configuration setup with strict configs.

Features

• Multi-framework support - Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js
• Automatic framework detection - Adapts configuration based on your project
• Strict TypeScript configs - Production-ready strict settings
• Customizable strictness - Choose between recommended, strict, or custom
• Path mapping - Framework-specific path aliases
• Build optimization - Optimized compiler options for each framework

Installation

Option 1: Using Scaffit CLI (Recommended)

# Add TypeScript scaffold (no installation needed!)
npx scaffit add typescript

Alternative: Global Installation

# Install CLI globally
npm install -g scaffit

# Add TypeScript scaffold
scaffit add typescript

Option 2: Direct npm package usage

# Install scaffold directly
npm install @scaffit/typescript

# Use in your code
import { setupTypeScript, previewTypeScript } from '@scaffit/typescript';

// Setup TypeScript with custom options
const result = await setupTypeScript({
  strictnessLevel: 'recommended',
  includePathMapping: true,
  includeBuildScripts: true,
  projectRoot: './my-project'
});

// Preview changes before applying
const preview = await previewTypeScript({
  strictnessLevel: 'recommended',
  includePathMapping: true
});

Note: Both approaches require @scaffit/core to be installed (automatically handled).

Configuration Options

• Strictness level: Choose between recommended, strict, or custom
• Path mapping: Enable framework-specific path aliases
• Build optimization: Optimize for development vs production
• Framework: Automatically detected (Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js)

Generated Files

tsconfig.json

Framework-specific TypeScript configuration:

Next.js:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/lib/*": ["./src/lib/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

React/Vue/Angular/Svelte:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/lib/*": ["./src/lib/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "build"]
}

Express/Fastify/Node.js:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["es2022"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": false,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "incremental": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/lib/*": ["./src/lib/*"],
      "@/types/*": ["./src/types/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Dependencies Added

• typescript - TypeScript compiler
• @types/node - Node.js type definitions (for Node.js projects)

Package.json Scripts Added

• type-check - Run TypeScript type checking
• build - Build TypeScript project (for Node.js projects)
• dev - Development build with watch mode (for Node.js projects)

Framework-Specific Features

Next.js

• Next.js specific compiler options
• App Router support
• Next.js path mapping
• Next.js plugin configuration

React

• React JSX configuration
• React-specific path mapping
• Vite/CRA compatibility

Vue

• Vue-specific compiler options
• Vue path mapping
• Vue component support

Angular

• Angular-specific compiler options
• Angular path mapping
• Angular CLI compatibility

Svelte

• Svelte-specific compiler options
• SvelteKit support
• Svelte path mapping

Express/Fastify/Node.js

• Node.js environment configuration
• CommonJS module system
• Server-side specific options
• Build output configuration

Usage Examples

Type checking

npm run type-check

Building (Node.js projects)

npm run build

Development mode (Node.js projects)

npm run dev

VS Code Integration

Add to your VS Code settings.json:

{
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always"
}

Configuration Levels

Recommended (Default)

• strict: true - Enable all strict type checking
• noImplicitAny: true - Error on expressions with implied any
• strictNullChecks: true - Enable strict null checks
• noImplicitReturns: true - Error when not all code paths return a value

Strict

• All recommended settings plus:
• noImplicitThis: true - Error when this is implicitly any
• alwaysStrict: true - Parse in strict mode and emit "use strict"
• noUnusedLocals: true - Error on unused locals
• noUnusedParameters: true - Error on unused parameters

Custom

• Minimal configuration with basic type checking
• Suitable for gradual TypeScript adoption

Path Mapping

Framework-specific path aliases are automatically configured:

• @/* - Points to src directory
• @/components/* - Points to components directory
• @/lib/* - Points to lib directory
• @/types/* - Points to types directory (Node.js)

Next Steps

1. Run npm run type-check to check for type errors
2. Set up your editor for TypeScript support
3. Consider adding ESLint with TypeScript rules
4. Add type definitions for external libraries
5. Configure build tools to use TypeScript

Troubleshooting

Common Issues

1. Module resolution errors: Check path mapping configuration
2. Type errors: Gradually enable strict options
3. Build errors: Verify target and module settings
4. Import errors: Check baseUrl and paths configuration

Migration Tips

1. Start with recommended settings
2. Gradually enable stricter options
3. Use any type temporarily for complex migrations
4. Leverage TypeScript's gradual adoption features