TypeScript types cheat sheet. 13 Feb 2020 — Added void type (thx to AngularBeginner); 13 Feb 2020 — Added unknown type. Due to the great interest in previous Cheat Sheets and requests for another. Here you are, new cheat sheet, this time for React (finally!). Compressed overview for fundamental functionalities. Angular is a TypeScript based open-source web application framework used in building both web and mobile based applications. In this article, we will go through some of the angular features by explaining some of its core API. You can follow this angular cheat sheet and use in your project. TypeScript Cheat Sheet JavaScript. 2020-07-09: Var vs Let vs Const JavaScript. 2020-07-27: Why you should make your website responsive Web. 2020-04-27: ReactJS is.
Typescript provides some interfaces to help with writing React components. React.FC is one of those interfaces that is used in a lot of apps to define a functional component. The question you should ask yourself is: should you use React.FC for Typescript react components?
React.FC
This example shows how you can use React.FC in practice:
Typescript Cheat Sheet 2020 Pdf
and without React.FC:
- wondering what the
Tis about?
With React component props, use:
without
Typescript Cheat Sheet 2020 Excel
Pros of React.FC
1. Helps with Component props
React components have by default 4 props, e.g. Header.displayName.
With React.FC interface I get typings for these props, otherwise we get this type error:
2. Gives access to typed children
without
to fix this, we need to specify the children prop manually
Cons of React.FC
1. Doesn’t help with returning undefined
You cannot return undefined from a React component, and even with the React.FC type, the compiler will only tell you at runtime.
2. Provides access to props.children when you may not want it
With React.FC I can put children under my component and they won’t render but will be typed correctly.
Without this type I get a error instantly
3. Difficulty creating a Sub.Component pattern
It is very difficult to create the typical Component and Component.SubComponent pattern (without adding lots of additional workarounds) with React.FC.
e.g. without React.FC, to create this:
the types are simply
Overall
React.FC is useful for beginners getting into typed React components as it guides you with types. But due to unnecessary addition of children, that you normally do not need, you should stay away and simply type like a normal Typescript function.
More reading
Suggested
- 7 Best Practices for Cypress — 17 April 2020
I recently refactored and improved a large test suite library that used Cypress as the main test automation tool. Here are some best practices and common mistakes I found for working with this library.
- Learn Frontend in 2021 — 21 December 2020
Frontend engineer changes every year. Different technologies, libraries and techniques. This series is everything you need to know to get up to scratch with Frontend Engineering in 2021.
Written by Harry Mumford-Turner // See the blog code on GitHub