Goodbye JavaScript
After working with JavaScript for nearly 10 years I think its time to say farewell old friend, I have outgrown you. Here I’ll cover my switch to TypeScript and why I will never turn back.
I recently finished a large web-based project https://www.tomorrowapp.io which handles the scheduling and payment of classes. This was originally written in JavaScript but overtime I started dabbling with better type support. By completion, everything was written in TypeScript.
Scalability
It became obvious to me early on that TypeScript had much better scalability. I could easily familiarise myself with code I hadn't worked on in months whereas JavaScript required more cognitive effort. This allowed me to work on much more ambitious features and be confident that everything would just work.
Working inside VSCode has made development much more pleasant. Being able to hover over variables and see type information is great. I could now begin to write code that would run first time since VSCode spots common errors and mistakes and provides contextual information about types.
Connecting the dots
This overall project consists of several key systems:
- GraphQL API
- Checkout Page
- Admin Panel
- UI Library
You don't need to spend tons of time writing types. It can mostly be automated by choosing the right stack. Through doing this I had automatic type support from database to react component.
The flow of data looks something like:
Server: Postgres → Prisma Client → GraphQL API → Client: Apollo Client → React
To interface with the database, I used https://www.prisma.io. Prisma automatically generated types based on your database schema by running:
prisma generateThe will generate a client which can be used in code to access data.
Since the API interfaces in GraphQL, I could then use https://graphql-code-generator.com to automatically generate types based on the GraphQL schema.
Doing this means TypeScript will inform me of any error if the incorrect value is returned from a resolver.
See here, for example, the resolver “getFilter” is expecting an object of type “Filter” to be returned. When I return an empty object, you see an error since its the wrong type.
Codegen can also be used to introspect the GraphQL API and provide type information to the client. Now that same information about the filter can be accessed from the client. For my use case I am using react hooks, and thus used the typescript-react-apollo plugin which automatically generates hooks to query data.
Now I can guarantee the shape of the data coming from the API. This provides a very powerful workflow to write code quickly and with confidence. I can’t see myself going back anytime soon.
