Development Setup

Get your local environment ready to contribute to TypeScript Exercises

Development Setup

This guide will help you set up your local development environment for contributing to TypeScript Exercises.

Prerequisites

Before you begin, ensure you have the following installed:

Node.js

Version 12 or higher (as specified in package.json)

Yarn

Yarn package manager (recommended) or npm

Git

For cloning and version control

Code Editor

VS Code recommended for TypeScript development

Installation Steps

1. Fork and Clone the Repository

   Fork the repository on GitHub and clone it to your local machine:

   SSH

   git clone [e-mail]:YOUR_USERNAME/typescript-exercises.git
   cd typescript-exercises
   
2. Install Dependencies

   Install all project dependencies using Yarn:

   Yarn

   yarn install
   

   The project uses Yarn by default (as mentioned in README.md). Using Yarn is recommended for consistency.

3. Start the Development Server

   Launch the development server to see the exercises in action:

   yarn start
   

   This runs EXTEND_ESLINT=true react-app-rewired start and opens the application at http://localhost:3000

   The development server uses react-app-rewired with extended ESLint configuration. Make sure all dependencies are properly installed.

4. Verify Your Setup

   Once the server is running, you should see the TypeScript Exercises interface. Try navigating through different exercises to ensure everything works correctly.

Available Scripts

The project includes several npm scripts for development:

Development & Build

Start Development Server

yarn start
# Starts the development server with hot reloading
# Uses EXTEND_ESLINT=true react-app-rewired start

Linting & Code Quality

Run Linter

yarn lint
# Checks TypeScript and TSX files for lint errors
# Runs: eslint 'src/**/*.ts{,x}'

The project uses Husky for Git hooks. A pre-commit hook automatically runs npm run lint before each commit to ensure code quality.

Advanced

Eject Configuration

yarn eject
# ⚠️ One-way operation - use with caution!
# Ejects react-app-rewired configuration

Do NOT run yarn eject unless you have a specific need to customize the build configuration. This is a one-way operation that cannot be undone.

Key Technologies

The project is built with the following technologies:

Core Framework

• React (v16.13.1) - UI library
• TypeScript (~3.7.2) - Type-safe JavaScript
• React Scripts (v4.0.3) - Build tooling
• React App Rewired - Custom build configuration

Code Editor

• Monaco Editor (v0.20.0) - VS Code-based code editor
• Monaco Editor Webpack Plugin - Integration with build system

Linting & Formatting

• ESLint (v7.11.0) - Code linting
• @typescript-eslint (v4.28.2) - TypeScript-specific rules
• Prettier (v2.3.2) - Code formatting
• Husky (v4.2.5) - Git hooks for pre-commit linting

State & Utilities

• RxJS (v6.5.5) - Reactive programming
• Emotion - CSS-in-JS styling
• React Redux - State management (if needed)

TypeScript Configuration

The project uses strict TypeScript settings:

tsconfig.json highlights

{
  "compilerOptions": {
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "target": "es5",
    "module": "esnext",
    "jsx": "react"
  },
  "exclude": [
    "src/exercises"
  ]
}

The src/exercises directory is excluded from the main TypeScript compilation. Each exercise has its own isolated type checking.

Exercise Structure

Exercises are located in src/exercises/[number]/:

src/exercises/
├── 1/
│   ├── index.ts           # Exercise starter code
│   ├── index.solution.ts  # Solution code
│   └── test.ts           # Test cases
├── 2/
│   ├── index.ts
│   ├── index.solution.ts
│   └── test.ts
└── ...

Troubleshooting

Port 3000 already in use

If port 3000 is already in use, you can specify a different port:

PORT=3001 yarn start

ESLint errors on start

Make sure your code follows the project’s linting rules:

yarn lint-fix

Some errors may need manual fixing.

TypeScript compilation errors

Clear the TypeScript cache and reinstall dependencies:

rm -rf node_modules
yarn install

Monaco Editor not loading

The Monaco Editor requires specific webpack configuration. Make sure monaco-editor-webpack-plugin is properly installed and configured in config-overrides.js.

Next Steps

Now that your environment is set up:

Read the Guidelines

Learn about code style and contribution standards

Explore Exercises

Navigate through existing exercises to understand the structure