Port to TypeScript: Infrastructure setup with gradual migration approach

.eslintrc.json

@@ -3,6 +3,15 @@
         "es6": true,
         "browser": true
     },
+    "extends": [],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": 2019
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
     "rules": {
         "no-mixed-spaces-and-tabs": "error",
         "indent": ["error", 4, {
@@ -14,10 +23,18 @@
         "curly": ["error", "all"],
         "semi": ["error", "always"],
         "brace-style": ["error", "1tbs", {"allowSingleLine": true}],
-        "quotes": ["error", "double", {"avoidEscape": true}]
+        "quotes": ["error", "double", {"avoidEscape": true}],
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-inferrable-types": "off"
     },
-    "parserOptions": {
-        "sourceType": "module",
-        "ecmaVersion": 2019
-    }
+    "overrides": [
+        {
+            "files": ["*.js"],
+            "rules": {
+                "@typescript-eslint/no-var-requires": "off"
+            }
+        }
+    ]
 }

.gitignore

@@ -23,6 +23,9 @@ node_modules/
 jspm_packages/
 .npm
 
+# TypeScript
+*.tsbuildinfo
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]

README.md

@@ -5,6 +5,8 @@ corgis-blockly
 
 BlockPy is a web-based Python environment that lets you work with blocks, text, or both. Designed for Data Science and equipped with powerful tools like the State Explorer and Guided Feedback, the goal of BlockPy is to let you solve authentic, real-world problems.
 
+**🚀 Now with TypeScript Support!** BlockPy is being gradually migrated to TypeScript for improved type safety and developer experience. See [TYPESCRIPT_MIGRATION.md](TYPESCRIPT_MIGRATION.md) for details.
+
 The goal of BlockPy is to give you a gentle introduction to Python but eventually mature you into a more serious programming environment (such as Spyder or PyCharm). Long-term, we may support some game/animation design stuff that Scratch/Snap does, but that's not the real goal.
 
 The BlockPy project is aimed at solving some hard technical problems: having a block-based environment for a dynamic language can be tricky - are a given pair of square brackets representing list indexing or dictionary indexing? Our goal is to use advanced program analysis techniques to provide excellent support to learners.

TYPESCRIPT_MIGRATION.md

@@ -0,0 +1,111 @@
+# TypeScript Migration Guide
+
+BlockPy is now configured to support TypeScript alongside existing JavaScript code. This allows for gradual migration and improved type safety.
+
+## Current Status
+
+✅ **TypeScript Configuration Complete:**
+- Added TypeScript compiler configuration (`tsconfig.json`)
+- Updated webpack to handle `.ts` and `.tsx` files
+- Configured ESLint for TypeScript support
+- Added TypeScript dependencies
+
+✅ **Example Conversions:**
+- `src/utilities.ts` - Utility functions with full type annotations
+- `src/storage.ts` - LocalStorage wrapper converted to TypeScript class
+- `src/typescript-test.ts` - Test file demonstrating TypeScript functionality
+
+## How to Use TypeScript
+
+### 1. Creating New TypeScript Files
+Simply create files with `.ts` extension in the `src/` directory. They will be automatically processed by webpack.
+
+### 2. Converting Existing JavaScript Files
+To convert a JavaScript file to TypeScript:
+1. Rename the file from `.js` to `.ts`
+2. Add type annotations gradually
+3. Fix any type errors reported by TypeScript
+4. Update imports in other files if needed
+
+### 3. Type Annotations Examples
+
+**Before (JavaScript):**
+```javascript
+export function capitalize(s) {
+    if (typeof s !== "string") {
+        return "";
+    }
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+```
+
+**After (TypeScript):**
+```typescript
+export function capitalize(s: string | null | undefined): string {
+    if (typeof s !== "string") {
+        return "";
+    }
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+```
+
+## Configuration Files
+
+### TypeScript Configuration (`tsconfig.json`)
+- **Target**: ES2017 for broad browser compatibility
+- **Module**: ES2020 for modern module system
+- **Strict mode**: Disabled initially for gradual migration
+- **allowJs**: true - JavaScript files work alongside TypeScript
+
+### Webpack Configuration
+- Added `ts-loader` for processing TypeScript files
+- Extended file extensions to include `.ts` and `.tsx`
+- TypeScript files are processed before babel for modern features
+
+### ESLint Configuration
+- Added `@typescript-eslint/parser` and plugin
+- Configured rules to work with both JavaScript and TypeScript
+- Relaxed rules for easier migration (no-explicit-any: off)
+
+## Migration Strategy
+
+### Phase 1: Infrastructure (✅ Complete)
+- Set up TypeScript tooling and configuration
+- Ensure existing JavaScript continues to work
+- Create example TypeScript files
+
+### Phase 2: Utility Functions (🔄 In Progress)
+- Convert utility functions and helpers
+- Add type definitions for commonly used interfaces
+- Create type definitions for external libraries
+
+### Phase 3: Core Components (⏳ Future)
+- Convert main components (dialog, feedback, etc.)
+- Add comprehensive type definitions for the BlockPy model
+- Type the main BlockPy class and its interfaces
+
+### Phase 4: Advanced Features (⏳ Future)
+- Add strict type checking
+- Create comprehensive type definitions for Skulpt integration
+- Full type coverage with strict mode enabled
+
+## Benefits
+
+1. **Type Safety**: Catch errors at compile time instead of runtime
+2. **Better IDE Support**: Enhanced autocomplete, refactoring, and navigation
+3. **Self-Documenting Code**: Type annotations serve as inline documentation
+4. **Gradual Adoption**: No need to convert everything at once
+5. **Improved Maintainability**: Easier to understand and modify complex code
+
+## Development Workflow
+
+1. **Build with TypeScript**: `npm run build` processes both JS and TS files
+2. **Type Checking**: `npx tsc --noEmit` to check types without compilation
+3. **Linting**: ESLint works with both JavaScript and TypeScript files
+
+## Next Steps
+
+1. Convert more utility modules to TypeScript
+2. Add type definitions for external dependencies (jQuery, Knockout, etc.)
+3. Create interfaces for the main BlockPy model structure
+4. Gradually convert core components with proper type annotations