chapter five

5 TypeScript: Next Level JavaScript

This chapter covers

Using best practices with React and TypeScript
Introducing static typing with TypeScript
Reducing errors and increasing documentation with types

As we venture further into the realm of professional React development, we come across a pivotal tool in our arsenal: TypeScript. This chapter marks a significant step in enhancing your skills and understanding as a developer. TypeScript, often referred to as "JavaScript with superpowers," opens the door to a new world of possibilities in terms of robust, statically typed code and cleaner, more maintainable applications.

Over the past few years, TypeScript has gained widespread adoption in the JavaScript community. Its ability to catch bugs at compile time, provide improved code navigation and auto-completion, and enhance collaboration between developers has made it a go-to choice for building modern web applications. In this chapter, we will embark on a journey to understand TypeScript's fundamentals, advanced features, and its application within the React ecosystem.

Trying to introduce TypeScript in a few chapters is like trying to explain all of calculus in a single math class. TypeScript is a huge topic, well-deserving of its own complete books, and there already is a lot of great literature on the topic available.

5.1 Introduction to TypeScript

5.1.1 TypeScript files and React

5.1.2 Static types

5.1.3 Employee display

5 TypeScript: Next Level JavaScript

This chapter covers

5.1 Introduction to TypeScript

5.1.1 TypeScript files and React

5.1.2 Static types

5.1.3 Employee display

5.1.4 Adding optional properties

5.2 Advanced TypeScript with generics

5.2.1 What is a generic type?

5.2.2 Typing children

5.2.3 Extending interfaces

5.2.4 Spreading props in general

5.2.5 Restricting and loosening types

5.2.6 Optional and required properties

5.2.7 Either/or properties

5.2.8 Forwarding refs

5.3 Summary