DEV Community


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

Annie Liao
Hybrid dev/designer currently exploring a variety of front-end magic.
Updated on ・2 min read

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.

Discussion (6)

mr_steelze profile image
Odunayo Ogungbure

Nice write up 💯.
Just a little correction here:
Because JavaScript is weakly (or statically) typed.

Or statically should instead be dynamically (typed). This means that types can change at run time.

liaowow profile image
Annie Liao Author

Corrected. Thanks so much for catching that!

nomoredeps profile image
NoMoreDeps • Edited

Yep, Typescript is a language, even if it shares a lot with JS for its parser.

Js is a target for the compiler, but technically TS is a fully implemented language :-)

liaowow profile image
Annie Liao Author

Oh really?! Hmmm, so I guess I should say it's a language that gets compiled to JS?

nomoredeps profile image
NoMoreDeps • Edited

You're free to say what you want lol, just saying ha ha

Thread Thread
liaowow profile image
Annie Liao Author

Haha, thanks for pointing out though!