TypeScript has become essential for React development. After migrating several large-scale applications to TypeScript, including projects with millions of users, I've identified patterns that significantly improve code quality and developer experience.
Why TypeScript Matters
TypeScript catches bugs at compile time, provides better IDE support, and makes refactoring safer. Here are the patterns I use daily.
1. Component Props with Generics
interface ListProps<T> {
items: T[];
renderItem: (item: T) => React.ReactNode;
keyExtractor: (item: T) => string;
}
function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
return (
<>
{items.map(item => (
<div key={keyExtractor(item)}>
{renderItem(item)}
</div>
))}
</>
);
}
// Usage with type safety
<List
items={users}
renderItem={user => <div>{user.name}</div>}
keyExtractor={user => user.id}
/>
2. Discriminated Unions for State
Avoid boolean flags; use discriminated unions:
// Bad
interface State {
loading: boolean;
error: Error | null;
data: User | null;
}
// Good
type State =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'error'; error: Error }
| { status: 'success'; data: User };
function UserProfile() {
const [state, setState] = useState<State>({ status: 'idle' });
if (state.status === 'loading') {
return <Spinner />;
}
if (state.status === 'error') {
return <Error message={state.error.message} />;
}
if (state.status === 'success') {
return <div>{state.data.name}</div>;
}
return null;
}
3. Utility Types for Props
// Extract component props
type ButtonProps = React.ComponentProps<'button'>;
interface CustomButtonProps extends ButtonProps {
variant: 'primary' | 'secondary';
}
// Make some props required
type RequiredUser = Required<Pick<User, 'id' | 'email'>> & Partial<User>;
// Exclude props
type InputWithoutType = Omit<React.ComponentProps<'input'>, 'type'>;
4. Type-Safe Event Handlers
interface FormElements extends HTMLFormControlsCollection {
email: HTMLInputElement;
password: HTMLInputElement;
}
interface LoginFormElement extends HTMLFormElement {
readonly elements: FormElements;
}
function LoginForm() {
const handleSubmit = (e: React.FormEvent<LoginFormElement>) => {
e.preventDefault();
const { email, password } = e.currentTarget.elements;
console.log(email.value, password.value);
};
return (
<form onSubmit={handleSubmit}>
<input name="email" type="email" />
<input name="password" type="password" />
<button type="submit">Login</button>
</form>
);
}
5. Custom Hook with Generics
function useLocalStorage<T>(
key: string,
initialValue: T
): [T, (value: T) => void] {
const [storedValue, setStoredValue] = useState<T>(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
return initialValue;
}
});
const setValue = (value: T) => {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
};
return [storedValue, setValue];
}
// Usage
const [user, setUser] = useLocalStorage<User>('user', { name: '', email: '' });
6. Async Component Pattern
type AsyncComponentState<T> =
| { loading: true }
| { loading: false; data: T }
| { loading: false; error: Error };
function useAsync<T>(
asyncFunction: () => Promise<T>
): AsyncComponentState<T> {
const [state, setState] = useState<AsyncComponentState<T>>({
loading: true,
});
useEffect(() => {
asyncFunction()
.then(data => setState({ loading: false, data }))
.catch(error => setState({ loading: false, error }));
}, []);
return state;
}
7. Context with TypeScript
interface AuthContextType {
user: User | null;
login: (email: string, password: string) => Promise<void>;
logout: () => void;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within AuthProvider');
}
return context;
}
function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<User | null>(null);
const login = async (email: string, password: string) => {
const user = await api.login(email, password);
setUser(user);
};
const logout = () => setUser(null);
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
}
8. Type Guards
function isUser(value: unknown): value is User {
return (
typeof value === 'object' &&
value !== null &&
'id' in value &&
'email' in value
);
}
// Usage
const data: unknown = await fetchData();
if (isUser(data)) {
console.log(data.email); // TypeScript knows it's a User
}
9. Const Assertions
const ROUTES = {
home: '/',
about: '/about',
profile: '/profile',
} as const;
type Route = typeof ROUTES[keyof typeof ROUTES]; // '/' | '/about' | '/profile'
function navigate(route: Route) {
// Type-safe navigation
}
10. Intersection Types for Component Variants
type BaseButtonProps = {
children: React.ReactNode;
onClick: () => void;
};
type PrimaryButton = BaseButtonProps & {
variant: 'primary';
color: 'blue' | 'red';
};
type SecondaryButton = BaseButtonProps & {
variant: 'secondary';
outlined: boolean;
};
type ButtonProps = PrimaryButton | SecondaryButton;
function Button(props: ButtonProps) {
if (props.variant === 'primary') {
// TypeScript knows props.color exists
return <button className={props.color}>{props.children}</button>;
}
// TypeScript knows props.outlined exists
return <button className={props.outlined ? 'outlined' : ''}>{props.children}</button>;
}
Common Mistakes to Avoid
1. Using any
// Bad
function process(data: any) {
return data.value;
}
// Good
function process(data: unknown) {
if (typeof data === 'object' && data !== null && 'value' in data) {
return data.value;
}
}
2. Not Using Strict Mode
Always enable in tsconfig.json:
{
"compilerOptions": {
"strict": true,
"strictNullChecks": true,
"noImplicitAny": true
}
}
3. Ignoring TypeScript Errors
// Bad
// @ts-ignore
const user = getUserData();
// Good - Fix the actual type issue
const user: User = await getUserData();
Real-World Impact
Migrating to TypeScript in our production apps:
- Reduced runtime errors by 40%
- Improved refactoring confidence by 80%
- Decreased bug fix time by 50%
- Enhanced developer onboarding experience
Key Takeaways
- Use discriminated unions for complex state
- Leverage generics for reusable components
- Type event handlers properly
- Use utility types to manipulate existing types
- Never use
any- useunknowninstead - Enable strict mode in TypeScript
- Create type guards for runtime validation
TypeScript is not just about adding types—it's about building more maintainable and robust applications. Start implementing these patterns today!
What TypeScript patterns do you use? Share in the comments!
Building type-safe applications at scale. Follow for more TypeScript and React insights!
SOCIAL SHARE CARD GENERATOR