TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

What we will learn today.

1. What is typescript?

2. How does Typescript code run?

3. Typescript Compiler?

4. Basics Types in Typescript?

5. tsconfig.json file?

6. interface in typescript?

7. Use typescript in Typescript in React App

8. Use function as input in function in Typescript?

1. What is typescript?

   💡

   Typescript is a programming language Developed and maintained by Microsoft. It Does the static type checking.

2. How does Typescript code run?

   💡

   First of all Typescript code never runs in Browser. Typescript compiler converts typescript code into Javascript. Because Browser only understands javascript.

3. Typescript Compiler?

   a. Here Typescript compiler like [ esbuild, swc ] converts Typescript code into javascript code.

   

4. Basics Types in Typescript?

Basics Typescript are number,string,boolean, null,undefined

// number
function sum(num1: number, num2:number):number {
    return num1+num2
}

const result = sum(4,5)
console.log(result) => 9

// string
function greet(message:string):string{
    console.log("Welcome To Typescript")
    // or return some string
    return "Typescript"
}

sum() 
Output => Welcome To Typescript
Output => Typescript

// boolean
function isLegal(user:number): Boolean {
    if(user < 18){
        return false
    }
    return true
}

isLegal(12) => false
isLegal(20) => true

1. tsconfig.json file?

   💡

   The tsconfig.json file has a bunch of options that you can change to change the compilation process.
   💡

   target : specifies the ECMAScript target the version
   💡

   rootDir: Where should the compiler look for the .ts File
   💡

   outDir: Where should the compiler throw the .js File
   💡

   removeComments: Removes the all comments from js file, Enable it to True

2. interface in typescript?

   Interfaces are used for adding types to objects.

    interface User{
            title:string;
            description:string;
            createdAt:string,
            updatedAt:string;
            status:boolean;
    }
   

3. Now use Typescript in React App

4.    STEPS:
      1. npm create vite@latest
      2. project-name:todoApp
      3. Choose: React
      4. Choose: Typescript
   
      optional: install Typescript in your react App
      npm install -D tailwindcss postcss autoprefixer
   
      // this command will generate a tailwind.config.js File
      npx tailwindcss init -p
   
      // change the content  to 
      content: [
          "./index.html",
          "./src/**/*.{js,ts,jsx,tsx}",
        ],
   
      // Now runt the command 
      npm run dev
   

5. Use typescript in Typescript in React App

    import React from 'react'
   
    // creates a components Folder in src Directory
    // src > components > TodoTile.tsx
   
    interface TodoProp {
        title: string;
        description: string;
        createdAt: string;
        updatedAt: string;
        status: boolean;
    }
   
    // passing the props types AS interface
    function TodoTile(todo: TodoProp) {
        return (
            <div className='bg-slate-750 text-center pt-20  w-[25%] h-[50%]'>
               <div className='p-5  border-2 inline-block text-white bg-slate-800'>
                    <h2> {todo.title}</h2>
                    <h3> {todo.description}</h3>
                    <h3> {todo.createdAt}</h3>
                    <h3> {todo.updatedAt}</h3>
                    <h3> {todo.status}</h3>
                </div>
   
            </div>
        );
      }
   
    export default TodoTile
   

6. Use this component TodoTile.tsx file in App.tsx

import './App.css'

// import the component file App.tsx
import TodoTile from './components/TodoTile'

function App() {
      return (
        <div className='h-screen flex justify-center items-center  bg-slate-900'>
                  <TodoTile
                  title='Go to gym' 
                  description='Hpw the Josh Sir' 
                  createdAt='12:12:2321' 
                  updatedAt='21:21:1212' 
                  status={true}
                  />

        </div>

      )
}

export default App

// taking fn as parameter and returing void
function runinonesec(fn: () => void) {
    setTimeout(fn, 1000);
}

// caloing the runinonesec()
runinonesec(function() {
    console.log("hi there");
})