Tsreact
Uploaded by
Aravind AriharasudhanTsreact
Uploaded by
Aravind AriharasudhanTYPESCRIPT INTO
REACT JS
THIS BOOK
This book is written (typed) by
Ari, who hails from the South
and has keen interests in
Computer Science, Biology,
and Tamil Literature.
Occasionally, he updates his
website, where you can reach
out to him.
https://arihara-sudhan.github.io
Intro and Installation
I hope you guys know
React JS, TypeScript and
JS very well or to an extent.
This is a prerequisite to get
the most out of this book.
As the title says, it is a kutty
book that describes the
interesting facets of React
with TypeScript. So, without
reading much, let’s get into
the installation part.
>> npx create-react-app teact --template typescript
The flag, “template” installs
the react application with
TypeScript configurations.
When we see the “Happy
Hacking” message, it is the
time to start. Get into our
project folder, “teact” and
type “npm start”.
We can witness the
rotating atom. But, there is
little difference in the UI.
It’s not App.jsx or App.js
but App.tsx! Yes! It is the
first facet of React when it
is mingled with TypeScript.
Let me code something
now. All the files in our
project folder are atypical!
C
A
S
S
O
W
A
R
Y
THE PROJECT
We’ll be learning the stuff
with a practical hands-on.
Let me first clean the
folder. I just want it to
render a HERE message
for now and it does.
Alright! I am going to
create a page like the
following.
Yes! It is instagram profile
banner... (Don’t take it as a
shameless self promotion).
Let’s learn some basics
and create our page.
COMPONENT TYPE
We can assign the FC
(Functional Component)
type to A Functional
Component.
It is not necessary to
import React (In 17+
versions or React).
If you want to make it
explicit, ah I mean clear to
newbies, just write the type
as FunctionComponent.
Here, we have to
comprehend where it will
be useful.
PROPS TYPE
Props can be strictly typed
as shown below.
While rendering, all the
specified types must meet.
Missing props specified in
type specifications will
show squiggly lines. If I get
rid of onClick in App
rendering part, and <App
label="CLICK"/> is the only
thing left, The message will
be like, Property “onClick”
is missing in type “{label:
string;}” but required in
type “AppProps”. People
usually use destructed
props as the following.
We can directly set the
type without constructs like
interface.
We cannot have props
without their types defined
explicitly as of the current
versions of TypeScript in
JSX.
JSX TO TSX
But, there are some level of
type inferences in cases
like using an attribute
which doesn’t exist in a
particular element.
The error message looks
like, Type '{ children: string;
href: string; onClick: () =>
void; }' is not assignable to
type'DetailedHTMLProps<B
uttonHTMLAttributes<HTM
LButtonElement>,HTMLBut
tonElement>'.
Property 'href' does not
exist on type
'DetailedHTMLProps<Butto
nHTMLAttributes<HTMLBut
tonElement>,HTMLButtonEl
ement>'. Did you mean
'ref'? I believe that You
don’t like this message!
TypeScript can deduce the
types of variables as in
Vanilla JS.
OPTIONAL PROPS
It’s not a big deal for the
people who know interface
to define optional types in
Interface. It helps in
defining Optional Props.
It is not required to pass
the onClick props.
We can have default props
too...
If you like, you can also use
the defaultProps property
of the component object.
TYPE OF THE STATE
We can explicitly type the
state as shown below.
If we don’t have specified
the type explicitly, it will be
inferred.
In the snippet given above,
we are trying to set a string
value to a number state.
Since the type of the state
is inferred, it will cause
type mismatch as
“Argument of type 'string' is
not assignable to
parameter of type
'SetStateAction<number>'.”
Let’s play with complex types.
If we have to define an
array over there in the
state, there are two sort of
syntaxes. One is the usual
one we use! Meanwhile,
the other one is what uses
Array object.
No issues if you like to use
union of types.
We can also type the most
complex types and actions
in useReducer hook.
JUST USING THE TYPE
If the type is defined in
useState or useReducer
like state management
hook, just use them in
other hooks such as
useEffect as it turns out.
Meanwhile, it’s quite
fascinating with useRef
hook.
Types such as
HTMLInputElement in are
predefined types that
represent various DOM
elements.
There are more like this...
The types like these and
other DOM element types
can hold null when we
explicitly define them to
account for the possibility
that the reference might
not yet be assigned to an
element.
It can also be used for
normal types.
And why not to use them
for complex types?
TYPING THE EVENTS
It is possible to type the
events. TypeScript
provides specific types for
each kind of event, which
should be used to ensure
correct typing. The event
handler function signature
looks like the following:
Following includes an
example of defining an
event handler.
There are some such Event
Types.
CONTEXT API
To create a context in
TypeScript, we typically
start by defining the shape
of the context data and
then create the context
itself.
The context created can be
used accordingly.
THE PROJECT IS OUT
The Project I had a notion
to create is created! Check
it in my GitHub Repo:
You can check it here:
https://github.com/arihara-
sudhan/ts-ig-profilecard
Thank You from
CASSOWARI
