TypeScript and React are two of the most industry-relevant skills for junior developers, but I mostly see people choosing one or the other. The fact is, though, that they work perfectly well together, and take little configuration.
What is React?
The past decade has given us a number of important JavaScript libraries that shape the web today. React is one developed and maintained by Facebook, and it’s very widely used.
React exists to rationally organize a UI; it does this via nested and dynamically-rendered components which pass information among themselves. If you’re looking at a page rendered in React, each identifiable element on the page is likely its own component file, as is each grouping of elements.
If you look at an old website — something from fifteen, twenty, twenty-five years ago, you can really tell that each era has its own look. Well, React is a significant part of the DNA of the past five years. For example, Facebook, Netflix and Reddit are made in React.
What is TypeScript?
TypeScript is a JavaScript variant, or more accurately a JS “superset”, meaning that any valid JS code is also valid TS code. TS just adds a few things, most notably typing (hence the name). If you’ve looked at code in different languages, you might have realized that a lot of them have users explicitly call out data types (static typing), while JS doesn’t (dynamic typing). Bolded words in the following are examples of type declarations.
// how you might declare a fizzBuzz function in Java
public static void fizzBuzz(int num)
// how you might declare a fizzBuzz function in JavaScript
function fizz_buzz(num) {
// how you might declare a fizzBuzz function in TypeScript
function fizzbuzz(num: number): string | number {Dynamic typing is less tedious to write, but it can be more tedious to debug. With static typing, it’s possible to catch a lot of problems before you even run the program, right in your code editor; Microsoft developed TypeScript for this purpose, with relevant tools being built right into its own Visual Studio Code. If you’re tired of trying to figure out what’s happening with your data in JS (and you are), TS is a good solution.
Put ’em together
Using the two together will lead to a thoroughly modern and well-organized project. They don’t interfere or conflict with each other, there’s no weirdness.
If you need to learn TypeScript first, here are the docs, conveniently organized to help you based on your existing programming background. Then look up how TypeScript is supported by your code editor of choice, since that’s one of the main points.
If you need to learn React first, here are the docs.
Once you’re ready, here is the guide to using create-react-app to make a TypseScript React project. (create-react-app is covered in the React docs)
