##[fit] Advanced TypeScript Patterns ^ - React Loves TypeScript React Heart TypeScript Advanced TypeScript Patterns Came up with the name without ever saying it out loud So.. React loves TypeScript it is!
^ For this talk we'll go over some of the TypeScript patterns that my team learned while rewriting SendGrid's Marketing Campaigns app for the 3rd time
^ - Just a quick show of hands How many of you use React on a daily basis?
^ - and how many use TypeScript? How about both React and TypeScript? So FIRST I want to talk a bit about what I find to be the #1 Benefit of TypeScript
^ A few major benefits to using TS When you break something, You know what you broke. No need to guess
- Confidence in refactoring
^ Lowers the cognitive load main goal in SendGrid architecture
- Confidence in refactoring
- Intellisense in IDEs
^ If you've ever had a quick bug fix and thought: Well I'll just let this function take an object OR and array TS will make sure that you do so in the safest way possible
- Confidence in refactoring
- Intellisense in IDEs
- Prevents "clever" code mistakes
^ TS allows our new engineers to understand our code much faster and become contributing team members super quickly
- Confidence in refactoring
- Intellisense in IDEs
- Prevents "clever" code mistakes
- Easier to read and understand
^ It's an exercise in reaching...
^ By that I mean: Making TypeScript do the heavy lifting for you You should only have to type a variable once, Once it's typed, TS should know what that is no matter How it's transformed or where it's passed to. You to create type interfaces as contracts between your components And TypeScript will tell you when you break those contracts BUT - Maximizing Type Inference is not super easy in React My team struggled a ton initially We knew patterns in React, but not how to get TS to stop complaining It took us a couple of sprints, but eventually we figured out some great patterns for typing React in an easy and reusable way
- State Management
- Redux Connected Components
- Higher Order Components
- Miscellaneous
^ If you've worked on a React/Redux app, you've probably seen a flow like this. This is the Flux Paradigm
- ✅ State Management
- Redux Connected Components
- Higher Order Components
- Miscellaneous
import { connect } from "redux";
import { login, logout } from "./actionCreators";
const mapStateToProps = state => {
return {
user: state.user
};
};
const mapDispatchToProps = dispatch => {
return {
login: (userId: string) => dispatch(login(userId)),
logout: () => dispatch(logout)
};
};
export const connectUser = connect(
mapStateToProps,
mapDispatchToProps
);
export default cmp => connectUser(cmp);- ✅ State Management
- ✅ Redux Connected Components
- Higher Order Components
- Miscellaneous
const ImagesFetcher = (Component) =>
class extends React.Component{
state = { isLoading: false }
public componentDidMount() {
if (!this.props.images.length && !this.state.isLoading) {
this.props.fetchImages("wheredidthesodago");
this.setState({ isLoading: true })
}
}
public componentDidUpdate(prevProps) {
if (this.props.images && this.state.isLoading) {
this.setState({ isLoading: false })
}
}
public render() {
return <Component {...this.props} isLoading={this.state.isLoading} />;
}
};- ✅ State Management
- ✅ Redux Connected Components
- ✅ Higher Order Components
- Miscellaneous
- Typed Webpack
- Type definition files
- Untyped dependancies
- Enums
- Conditional types
- Reading long error messages (don't panic)
- @Piotrwitek's React Redux TypeScript Guide
- React HoC Patterns in TypeScript
- Ultimate React Component Patterns
- A.Sharif's Notes on TypeScript
- TypeScript Deep Dive on Gitbooks
- React Hooks in TypeScript