What I Learned from a 2-Hour Crash Course on GraphQL and TypeScript

Annie Liao - Oct 23 '20 - - Dev Community

As someone with a solid understanding of JavaScript and Ruby but not much of other programming languages, I've always wanted to learn more about a toolset many JavaScript developers are praising: TypeScript.

Another relatively new tool I have noticed being thrown around in the dev world is GraphQL.

With very little bandwidth to dive deep into both tools, I was delighted to find a comprehensive FREE video tutorial that covers both topics:
Building Your First GraphQL Server with Node and TypeScript
course poster

Even though the course is 2.5 hours long, it actually took me at least double the amount of time to complete. And it was time well spent.

In addition to getting the gist of TypeScript and GraphQL, you would also be greeted with a beginner-friendly walkthrough of code environment setup and some Node package configurations.

Here are 4 key takeaways from my journey with the course:

TypeScript is a Typechecker for JavaScript

Simply put, TypeScript is a typed extension of JavaScript.

Because JavaScript is weakly (or dynamically) typed, e.g. one variable can be reassigned to different data types, it helps to have a strongly-typed superset to reduce production issues where data types were misplaced.

TypeScript is that superset. Introduced by Microsoft in 2012, it serves as a development tool to help JavaScript developers avoid painful bugs and make code easier to follow.

TypeScript will eventually be transformed into valid JavaScript during the compilation process, as clients and servers do NOT recognize TypeScript.

GraphQL Playground is Powerful

As the course creator eloquently puts it:

GraphQL is a query language for making requests to APIs. With GraphQL, the client tells the server exactly what it needs and the server responds with the data that has been requested.

Not only that, I was blown away by the smooth, intuitive, modernly-designed interface of the GraphQL Playground. Here are some screenshots, but I encourage you to try it out and witness its power:
Alt Text
Alt Text

Monokai Pro is Beautiful

During the initial environment setup of the code editor, I was introduced to a lovely VS Code extension called Monokai Pro. As a visual learner, it also helps to code along with the course using the same editor/color scheme.

Node Problem? No Problem!

OK, I admit this catchy tagline might be a bit confusing. What I meant to say was I personally have very limited knowledge of NodeJS. Sure, I use npm to install various JavaScript libraries, but coming from a Rails background, I had not yet built a Node server before taking the course.

If you share a similar background, fear no more. This tutorial actually starts by introducing Node. You even get to build a simple Node:Express server!


Overall, I benefitted greatly from this tutorial and highly recommend it to anyone who is pressed for time but just wants to see the power of TypeScript and GraphQL.

. . . . . . . . . . . . . . . . . . . . . . . . . . .