Remainder App with React + TypeScript And

Reminder-API With Node and Express with TypeScript

Introduction

A programming language to address shortcomings of JavaScript. We can think brother and sister of JavaScript. JavaScript is kids like without any discipline who does whatever he or she wants. Typscript in otherhand like kids with discipline.

Technically, specking Typescript is programming language built on top of JavaScript. So, every JavaScript file is a valid Typescript file.

Benefits of Typescript or some of the features of Typescript that help us to build robust and maintainable application in less time.

• Static typing
  • We have two type of programming languages Statically-Typed (C++, C#, Java) and Dynamically-Typed(JavaScript, Python, Ruby)
• Code completion
• Refactoring
• Shorthand notations

TypeScript is essentially JavaScript with Type Checking. With TypeScript we explicitly set the type of a variable upon decoration just like how we code statically type languages then we pass our code into compilier and the compiler will tell us if we are doing something wrong so we can catch our a lot of mistakes as compile time. We can use where in frontend or backend.

Drawbacks of TypeScript:

• Compilation .ts ———> Compiler ———> .js Transpiration

• Discipline in Coding TypeScript ——> Medium to large projects JavaScript ———> Simple projects

You'll Learn

Section-1: Getting Staart With TypeScript

• Introduction to TypeScript
• Setting up the development environment
• Creating your first TypeScript program
• Configuring the TypeScript compiler
• Debugging TypeScript applications

Section-2: Fundamentals

• any Type
• Arrays
• Tuples
• Enums
• Functions
• Objects

Section-3: Advanced Types

• Type aliases
• Unions and intersections
• Type narrowing
• Nullable types
• Unknown type
• Never type

Section-4: Classes, Interfaces and Object-Oriented Programming

• OOP
• Classes
• Constructors
• Properties and Methods
• Access control Keywords
• Getters and setters
• Static members
• Index signatures
• Inheritance
• Ploymorphism
• Abstract classes
• Interfaces

Section-5: Generics

• Generics classes
• Generics functions
• Generics interfaces
• Generics constraints
• Type Mapping

Section-6: Decorators

• What are decorators
• Class decorators
• Method decorators
• Property decorators
• Accessor decorators
• Parameter decorators

Section-7: Modules

• Creating and using modules
• Module formats
• Default exports
• Wildcard imports
• Re-exporting

Section-8: Integration with JavaScript

How to run JavaScript and TypeScript side by side.

• Including JS code in TS projects
• Type checking JS code
• JSDocs
• Declaration (Type Definition)
• Using declaration files from @types/

Section-9: React with TypeScript

Project: Reminder App

• Build a React to-do app with TypeScript using useState, useEffect, and type-safe components to manage to-dos. The app will handle state updates, and render to-dos dynamically with strict typing to ensure safer and more predictable code.

• Creating a React App with TypeScript

• Add Bootstrap

• Creating a Component - Title

• Using the State Hook

• Calling the Backend

• Using the Effect Hook

• Handling Events

• Building Form Submission

• Additional Reading https://reactjs.org/docs/static-type-checking.html#adding-typescript-to-a-project

How to run this Project

• npm start

Section-10: Node and Express with TypeScript

Project: Reminder-API

• Set up a Node.js API with Express and TypeScript, defining type-safe CRUD routes to manage to-dos on the backend. Use axios or fetch in React to communicate with this API, ensuring type safety between the frontend and backend for a complete, type-safe application.

• Executing TypeScript Code with Node

• Setting up an Express Project

• Creating a Router

• Parsing Request Bodies

• Building an API

Note

Free To use no restrictions - developed and designed by https://github.com/Bikramai