React TypeScript Configuration Setup

A small utility script that generates TypeScript configuration files for React-based projects.

Capabilities

Detects project framework type

• Given a package.json with "next" as a dependency, the function identifies the framework as "next.js" @test
• Given a package.json with "vite" and "react" as dependencies, the function identifies the framework as "vite-react" @test
• Given a package.json with "react-native" as a dependency, the function identifies the framework as "react-native" @test

Generates appropriate TypeScript configuration

• For a Next.js project, the function creates a tsconfig.json that extends the appropriate base configuration @test
• For a Vite React project, the function creates a tsconfig.json that extends the appropriate base configuration @test
• For a React Native project, the function creates a tsconfig.json that extends the appropriate base configuration @test

Adds custom compiler options

• The generated tsconfig.json includes custom compiler options passed by the user (such as "baseUrl" or "outDir") @test

Implementation

@generates

API

export interface PackageJson {
  dependencies?: Record<string, string>;
  devDependencies?: Record<string, string>;
}

export interface TsConfigOptions {
  compilerOptions?: Record<string, any>;
}

/**
 * Detects the React framework type from a package.json file.
 * Returns one of: "next.js", "vite-react", "react-native", or "unknown"
 */
export function detectFramework(packageJson: PackageJson): string;

/**
 * Generates a TypeScript configuration object for the detected framework.
 * The configuration extends the appropriate @tsconfig base and includes custom options.
 */
export function generateTsConfig(
  framework: string,
  customOptions?: TsConfigOptions
): object;

Dependencies { .dependencies }

@tsconfig/vite-react { .dependency }

Provides base TypeScript configuration for Vite React projects.

@tsconfig/next { .dependency }

Provides base TypeScript configuration for Next.js projects.

@tsconfig/react-native { .dependency }

Provides base TypeScript configuration for React Native projects.