TypeScript के साथ Todo App

एक Todo application interfaces, classes या functions, arrays, events, और DOM APIs को combine करने का एक practical तरीका है। यह दिखाता है कि TypeScript everyday application code को कैसे improve करता है।

In this page:

Core Concept
Basic Setup
Typed Example
Project Usage
Best Practices

Syntax

typescript

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}

const todos: Todo[] = [];

Core Concept

एक typed todo app एक common first TypeScript project है क्योंकि इसका data model छोटा है (एक id, एक text string, एक completed flag) लेकिन फिर भी end-to-end typing demonstrate करता है: typed state, typed props, और typed event handlers सब एक जगह।

उदाहरण: Core Concept

typescript

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}
const todo: Todo = { id: "1", text: "Buy milk", completed: false };
console.log(todo);

Basic Setup

एक basic setup एक interface Todo { id: string; text: string; completed: boolean } और एक typed array Todo[] app के central piece of state के रूप में define करता है, चाहे useState, एक class field, या एक store से manage हो।

उदाहरण: Basic Setup

typescript

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}
const todos: Todo[] = [];
console.log(todos.length);

Typed Example

एक typed example: function addTodo(text: string): Todo { return { id: crypto.randomUUID(), text, completed: false } } guarantee करता है कि हर नया todo object की exact right shape हो, कोई missing fields possible न हों।

उदाहरण: Typed Example

typescript

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}
function addTodo(text: string): Todo {
  return { id: String(Date.now()), text, completed: false };
}
console.log(addTodo("Write code"));

Project Usage

एक असली project में, यही Todo interface add form, list-rendering component, और toggle/delete handlers में reuse होता है, इसलिए todo shape में एक change (जैसे एक priority field जोड़ना) हर जगह catch होता है जहां यह उपयोग होता है, सिर्फ वहां नहीं जहां यह defined है।

उदाहरण: Project Usage

typescript

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}
function toggleTodo(todos: Todo[], id: string): Todo[] {
  return todos.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t));
}
console.log(toggleTodo([{ id: "1", text: "Task", completed: false }], "1"));

Best Practices

Todo type को इसके अपने छोटे module में रखें जिसे जहां भी ज़रूरत हो import किया जाए, हर component में अलग से एक inline {id, text, completed} object type redefine करने के बजाय।

उदाहरण: Best Practices

typescript

// todo.ts (its own small module)
export interface Todo {
  id: string;
  text: string;
  completed: boolean;
}
console.log("Todo interface imported everywhere it's needed, defined once");

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson Common Migration Issues Next Lesson → REST API with Express + TypeScript

TypeScript के साथ Todo App

Core Concept

Basic Setup

Typed Example

Project Usage

Best Practices

Chapter Quiz — Complete all 14 topics to unlock

Login to run this code