Automattic / Automattic/liveblog

Add TypeScript for type safety in JavaScript codebase

Open
#797 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
PHP
Stars
313
Forks
129
Avg merge
18h 33m
Merged PRs (30d)
1

Description

## Summary

Adopt TypeScript for the JavaScript codebase to improve type safety, IDE support, and catch errors at compile time. Now that we have a proper build system with webpack, TypeScript integration is straightforward.

## Benefits

1. **Catch errors early** - Type mismatches caught at build time, not runtime
2. **Better IDE support** - Autocomplete, refactoring, go-to-definition
3. **Self-documenting** - Types serve as inline documentation
4. **Safer refactoring** - Compiler catches breaking changes
5. **Better React props** - Replace PropTypes with interfaces (smaller bundle)

## Example

```typescript
// Before: JavaScript with PropTypes
const Entry = ({ id, content, authors }) => { /* ... */ };

Entry.propTypes = {
id: PropTypes.number.isRequired,
content: PropTypes.string.isRequired,
authors: PropTypes.arrayOf(PropTypes.object),
};

// After: TypeScript
interface Author {
id: number;
name: string;
avatar?: string;
}

interface EntryProps {
id: number;
content: string;
authors: Author[];
}

const Entry: React.FC = ({ id, content, authors }) => { /* ... */ };
```

## Migration Strategy

### Phase 1: Setup (1 day)
- Install TypeScript: `npm install -D typescript @types/react @types/react-dom`
- Configure `tsconfig.json` with `allowJs: true` for gradual adoption
- Update webpack to handle `.ts`/`.tsx` files

### Phase 2: Type Definitions (1 week)
- Create types for Redux state shape
- Create types for API responses
- Create types for WordPress globals (`window.liveblog_settings`)

### Phase 3: Gradual Migration
- Rename files `.js` → `.tsx` one at a time
- Start with utility functions (low risk)
- Then reducers and actions
- Then components (simpler first)
- Enable stricter options incrementally

### Phase 4: Cleanup
- Remove `prop-types` dependency
- Enable `strict: true` in tsconfig
- Add type coverage reporting to CI

## Considerations

1. **Learning curve** - Team needs TypeScript familiarity
2. **Build time** - Slightly slower builds (minimal with modern tooling)
3. **Third-party types** - Most libraries have types, but some may need `@types/*` packages
4. **Gradual adoption** - Can coexist with JavaScript during migration

## Configuration

```json
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"lib": ["ES2020", "DOM"],
"jsx": "react-jsx",
"allowJs": true,
"checkJs": false,
"strict": false,
"esModuleInterop": true,
"skipLibCheck": true,
"outDir": "./build",
"rootDir": "./src"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "build"]
}
```

## Success Metrics

- [ ] TypeScript configured and building
- [ ] Core types defined (Entry, Author, Config, State)
- [ ] New code written in TypeScript
- [ ] 50%+ of existing code migrated
- [ ] PropTypes dependency removed

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the existing webpack configuration and the JavaScript sources under src/**/* to determine the current build and migration boundaries. Use the proposed tsconfig.json settings and migration phases as the checklist; done would require TypeScript building, core types, migrated code, strict configuration, and removal of PropTypes as described.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, redux, typescript, webpack
Domain
build-system, developer-experience, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.