npm package: @scaffit/typescript
Description: TypeScript configuration setup with strict configs for Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js projects
Author: Santosh Hanumaiah Ranganatha
Latest version: 1.0.4

# @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)
```bash
# Add TypeScript scaffold (no installation needed!)
npx scaffit add typescript
```

### Alternative: Global Installation
```bash
# Install CLI globally
npm install -g scaffit

# Add TypeScript scaffold
scaffit add typescript
```

### Option 2: Direct npm package usage
```bash
# 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:**
```json
{
  "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:**
```json
{
  "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:**
```json
{
  "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
```bash
npm run type-check
```

### Building (Node.js projects)
```bash
npm run build
```

### Development mode (Node.js projects)
```bash
npm run dev
```

### VS Code Integration

Add to your VS Code settings.json:

```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