Today, I have another article about reactjs, today’s topic is with typescript. Great things and advantages while working with it.

I> Start:

1> About typescript:

It was developed by Microsoft, it is an open source programmer for developers. It’s a big deal, so it must be genuine and well received by many programmers.

The strengths from it:

• Inheriting the syntax from javascript makes it much easier to use than the similar source code
• In addition to inheriting from javascript versions, it also supports object-oriented syntax such as interfaces, classes, etc., so it is very powerful to apply design patterns.
• Recommended by lib / frameworks (because it is itself being gradually converted to writing in typescirpt)
• Large successful projects have also applied typescript
• Another thing is that it supports very well when using a tool that is visual code (microsoft goods) used by many ae frontend, suggest code support and extremely strong error when using typescirpt in this tool.

The following image shows the tools that support typescipt

2> Start installation:

To start working with Typescript Reactjs, we simply use the famous CRA (create-react-app) set:

If you use npm:

or if with yarn

Or follow the instructions from this article: https://create-react-app.dev/docs/adding-typescript/

Result: The .js files are all written in typescript

If you use visual code (you probably use it all), it’s the visual code that says you’re using Typescript (supported by default, and very strong)

Next: start app:

or

II> Learn about Reacjs, how to apply typescript:

1> How to create components:

• With function: The CRA will have 1 example:

Through the above example, we see that in order to specify a reactjs component, we need to add: React.FC after the component name to declare. To make it easy to learn, I will create an example of what makes the light bulb switch on and off. First, a component called SwitchButton.tsx :

Now I try to remove the word React.Fc, it will immediately warn to declare more types for it Or delete the return → very detailed warning:

2> State:

a) introduction and analysis

A common problem when working with Reacjs, this time I will rewrite the SwitchButton component with the component class.

• At this point, I will create it an interface named StateButton, here I can declare it the possible states in the component, here I create a state called stateLight type of boolean state indicating on / off state. switches.
• Then you pay attention in the component creation section:

(you do not care PropsButton, here I created before i)

b) error cases:

So I can use as usual already, assuming in the constructor I set state it is different from the boolen, what happens?

Oh, it reported a detailed error that stateLight can only be boolean, not numbered! Great, excellent, wonderfull

Suppose I added a new state called name without declaring any state in the interface:

Instant error, quite tight! Avoid messy declarations!

Through the above example, we can see that the construction of reactjs with typescript is very tight and professional! Very good support for programmers to warn them, and alert very quickly! Suggest code speed is also faster (maybe microsoft goods should match quickly, very good) !!

3> Props:

a) introduction and analysis

Usually we use propstype or flow-js, but with typecript we do not need to import and the support is very good.

(It is also recommended by Facebook to move into typescript that flowjs or other packages should be used)

• First, I changed the management state to turn the light on and off → props:

Similar to state, we also create interfaces to declare types for props

• This time I will create another parent component named House → will call this ButtonSwitch component:

b) error cases:

At this Component House when I call SwitchButton:

• The props stateLight passed another type of boolean
• Transmission missing props:
• Excessive transmission cases also report errors:

III> Conclusion:

• Typescript works well with reactjs, making reactjs tighter! It also supports programmers and is very well compatible with editors.
• In addition to the above applications, it also supports refs, events, … in reacjts! See you later!

IV> Reference:

• Install with create-react-app: https://create-react-app.dev/docs/adding-typescript/
• Typescript homepage: https://create-react-app.dev/docs/adding-typescript/