Typescript and tailwind css

#typescript #tailwindcss

What is Typescript?
Typescript is a programming language, It is an open source and it is a superset of javascript.It adds optional static typig to hte language. Actually it is designed for the development of large applications na transcompiles to javascript.

Why do I use Typescript in large application?
At first , I will say, typescript simplifies to javascript.It helps us to write clean and properly structured code.It makes code easier to read and understand. It is very smooth, flexible and with almost no overhead rather than migration process from JavaScript.
It has some benefits; like:

WE can avoid errors like 'undefined'is not a function. *WE can directly see our coding errors in our visual studio code.It is easier to refactor code without breaking it significantly.
Typescript upholds interfaces.
TypeScript has better documentation for APIs which is in a state of harmony with a source code. A few organizations report a decrease in bugs when they change to TypeScript.
Typescript runs in any program or javascript.

How to install typescript in our project?

<> If we want to set typescript with HTML , then we will install only this
npm i typescript
<> If we set want to typescript with React Framework ,then
npx create-react-app my-app --template typescript
or

yarn create react-app my-app --template typescript
And If we want ro set typescript with previous any project,then we can follow this link;

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

Types of Typescript
The Typescript has some common built-in data types which are given below:

Number *String * boolean * null *undefined *enum *void * never * any *Array *unknown * any.

We can declare these types in variable.If we don't declare type with variable, then en error has occured. so, we must declare type with variable. Example;
let countryName:string = "Bangladesh";
let isBeautiful:boolean=true;
let age:number = 25; and etc.

Interface of Typescript
Interfaces are able to describe the widw range of shapes that JavaScript objects can take. When we declare an object ,then we need interface or type to do our code neat and clean.

We also declare in this system. But we always try to declare in interface rather than type.

I have explored typescript and have done some projects using typescript and I am still learning typescript to do better performance. From this, I shared some code example of my Todo App.

At last, we use typescript rather than JavaScript in our project because typescript is a superset of javascript.We can code both javascript and typescript in typescript. We can declare what types of my code. We can solve error directly in our code.The code is easier to refactor.It supports third-parties package.TypeScript performs type checks at compilation time, it helps prevent runtime errors before the application is even started. Those benefits increase time for writing Typescript code with higher requirements for all the developer's qualification.

Tailwind Css

What is Tailwind CSS?
Tailwind css is utility-first css framework.It is used for rapidly building custom user interface(UI). It is a highly customizable, low-level css framework that gives us more flexibility designs without boring opinionated styles that we have to fight to override. Personally, I like tailwind css framework.

How to install tailwind css in our project?
If we want to set i HTML, tailwind setup is very complex to me but its benefits many. So,we will setup tailwind css installation with carefully and will move step by step. We must have to read more and more tailwind css documentation and how to install it.
We can follow this link: https://tailwindcss.com/docs/installation

If we want to setup tailwind css with react. Then, we can follw this link: https://tailwindcss.com/docs/guides/create-react-app
or
we can follow the youtube vedio.
https://www.youtube.com/watch?v=YL5deOIXbPc

I have used tailwind css in my react typescript project.There are many free designable components in tailwind css that helps us in many ways for styling in our project. We can do easily responsive for any devices using tailwind css. Some code of my project;

At last, I can say in this blog.it is very helpful for begginers.We can use tailwind css framework with any frontend framework.Typescript is very popular language and superset of JavaScript. Its' demand is increasing day by day.