TypeScriptAdvanced
প্র্যাকটিক্যাল মিনি প্রজেক্ট (Todo CLI)
টাইপ-সহ কনসোলভিত্তিক todo app — types, functions, main ও run — Real-world প্রয়োগের পূর্ণ চিত্র।
10টি অংশবাংলা ভাষায়
এখন পর্যন্ত যা শিখলেন তা এক সুন্দর ছোট প্রজেক্টে জুড়ে দেখুন — একটি টাইপ-সুরক্ষিত Todo CLI।
Step 1: Types
src/types.tstypescript
typescript
export type TodoStatus = "pending" | "done";
export interface Todo {
id: number;
title: string;
status: TodoStatus;
createdAt: Date;
}
export type NewTodo = Omit<Todo, "id" | "createdAt">;Step 2: Store (State + Logic)
src/store.tstypescript
typescript
import type { NewTodo, Todo, TodoStatus } from "./types";
export class TodoStore {
private todos: Todo[] = [];
add(input: NewTodo): Todo {
const todo: Todo = {
...input,
id: this.nextId(),
createdAt: new Date(),
};
this.todos.push(todo);
return todo;
}
toggle(id: number): void {
const todo = this.todos.find((item) => item.id === id);
if (!todo) throw new Error("Todo পাওয়া যায়নি");
todo.status = todo.status === "pending" ? "done" : "pending";
}
byStatus(status: TodoStatus): Todo[] {
return this.todos.filter((item) => item.status === status);
}
private nextId(): number {
return this.todos.length
? Math.max(...this.todos.map((t) => t.id)) + 1
: 1;
}
}Step 3: Main
src/index.tstypescript
typescript
import { TodoStore } from "./store";
const store = new TodoStore();
store.add({ title: "TypeScript শেখা", status: "pending" });
store.add({ title: "Mini project লেখা", status: "pending" });
store.toggle(1);
function printList(status: TodoStatus): void {
const items = store.byStatus(status);
console.log(status.toUpperCase() + ":");
items.forEach((todo) => console.log(" [" + todo.id + "] " + todo.title));
}
printList("pending");
printList("done");Step 4: Run
# dev (tsx)
npx tsx src/index.ts
# production
npx tsc
node dist/index.jsকোথা থেকে এগোবেন?
এখন File system (fs) ও readline এ রূপান্তর করুন — storage-এ file, UI-তে ইন-অ্যাকশন। API-দ্বারা cloud storage যোগ করলে intermediate-advanced অনুশীলন পূর্ণ হবে।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।