https://github.com/bikramai/typescript

Create a React to-do app with TypeScript using hooks (useState, useEffect) and type-safe components. Set up a Node.js API with Express and TypeScript for CRUD operations on to-dos, ensuring type-safe requests and responses. Use axios or fetch to connect the frontend with the backend.
https://github.com/bikramai/typescript

abstraction api-rest axios classes crud-operation express fetch getters-and-setters inheritance interfaces oop polymorphism static-members typescript useeffect

Last synced: 2 months ago
JSON representation

Create a React to-do app with TypeScript using hooks (useState, useEffect) and type-safe components. Set up a Node.js API with Express and TypeScript for CRUD operations on to-dos, ensuring type-safe requests and responses. Use axios or fetch to connect the frontend with the backend.

• Host: GitHub
• URL: https://github.com/bikramai/typescript
• Owner: Bikramai
• Created: 2024-08-25T17:14:32.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-10-22T01:46:03.000Z (8 months ago)
• Last Synced: 2025-02-09T05:41:29.387Z (4 months ago)
• Topics: abstraction, api-rest, axios, classes, crud-operation, express, fetch, getters-and-setters, inheritance, interfaces, oop, polymorphism, static-members, typescript, useeffect
• Language: TypeScript
• Homepage:
• Size: 282 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

## 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