npm init -y
npm install parcel typescript
npx tsc --init

.
├── package.json
├── src
│   ├── category.ts
│   ├── index.html
│   ├── main.ts
│   ├── parent-category.ts
│   ├── style.css
│   ├── task-form.ts
│   └── todo-item.ts
└── tsconfig.json

npx parcel src/index.html --open

<script type="module" src="./**.ts"></script>

/**
 * タスク追加ボタン押下時に発火する関数の型
 * @param inputValue 入力値
 */
type RegisterAddTaskButtonClickEventCallbackType = (inputValue: string) => void;

/** タスク登録フォーム */
export class TaskForm {
  /** タスク名入力フォーム */
  private taskInput: HTMLInputElement;
  /** タスク追加ボタン */
  private addTaskButton: HTMLButtonElement;

  constructor() {
    this.taskInput = document.querySelector('#task-input')!
    this.addTaskButton = document.querySelector('#add-button')!
  }

  /** タスク追加ボタン押下イベントで発火する関数を登録 */
  registerAddTaskButtonClickEventFunc(f: RegisterAddTaskButtonClickEventCallbackType): void {
    this.addTaskButton.addEventListener('click', () => {
      f(this.taskInput.value);
    })
  }
}

/**
 * 説明
 * @param param パラメータ
 * @return 返却値
 */

export class ClassName

class MyClass {
    constructor() {}
}

private prop: Type;

element = document.querySelector('%query_selector%')!;

registerAddTaskButtonClickEventFunc(f: RegisterAddTaskButtonClickEventCallbackType): void {
    this.addTaskButton.addEventListener('click', () => {
        f(this.taskInput.value);
    })
}

type RegisterAddTaskButtonClickEventCallbackType = (inputValue: string) => void;

/**
 * アイテムクリック時イベントで発火する関数の型
 * @param event クリック時イベント
 * @param todoItem this
 */
type ClickEvent = (event: MouseEvent, todoItem: TodoItem) => void;
/** カテゴリの種別、およびそれぞれのID */
export type BoxIdLiteral = 'not-started-yet' | 'wip' | 'finish';

/** タスク */
export class TodoItem {
  /** タスクを一意に示すID */
  uuid: string;
  /** 現在所属するグループ */
  currentGroup: BoxIdLiteral = 'not-started-yet';
  /** Node */
  elm: HTMLDivElement | null = null;
  constructor(
    taskName: string,
    clickEvent: ClickEvent
  ) {
    this.uuid = crypto.randomUUID();
    const div = document.createElement('div');
    div.textContent = taskName;
    div.addEventListener(
      'click',
      (event) => clickEvent(event, this)
    );
    this.elm = div;
  }

  /** 自身を削除 */
  remove(): void {
    if (this.elm) {
      this.elm.remove();
      this.elm = null;
    } else {
      throw Error('[TodoItem.remove] this.elm = null');
    }
  }
}

type BoxIdLiteral = 'not-started-yet' | 'wip' | 'finish';

const div = document.createElement('div');

createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];

remove(): void {
  if (this.elm) {
    this.elm.remove();
    this.elm = null;
  } else {
    throw Error('[TodoItem.remove] this.elm = null');
  }
}

import { TodoItem, BoxIdLiteral } from './todo-item';

/** カテゴリ */
export class Category {
  /** 所属するタスク一覧 */
  children: TodoItem[] = [];
  /** Node */
  private categoryBox: HTMLDivElement;

  /**
   * @param boxId カテゴリ種別
   */
  constructor(private readonly boxId: BoxIdLiteral) {
    this.categoryBox = document.querySelector(`#${boxId}`)!;
  }

  /**
   * タスクの追加
   * @param item タスク
   */
  appendTodo(item: TodoItem): void {
    if (item.elm) {
      item.currentGroup = this.boxId;
      this.children.push(item);
      this.refreshCategoryBox();
    } else {
      throw Error('[Category.appendTodo] item.elm = null');
    }
  }

  /**
   * タスクをカテゴリから削除
   * @param itemUuid タスクのUUID
   */
  deleteTodo(itemUuid: string): void {
    this.children = this.children.filter((child) => child.uuid !== itemUuid);
    this.refreshCategoryBox();
  }

  /** 画面表示のリフレッシュ */
  private refreshCategoryBox(): void {
    while (this.categoryBox.firstChild) {
      this.categoryBox.removeChild(this.categoryBox.firstChild);
    }
    this.children.forEach((child) => {
      if (child.elm) {
        this.categoryBox.appendChild(child.elm);
      }
    })
  }
}

import { TodoItem, BoxIdLiteral } from './todo-item';

children: TodoItem[] = [];

new TodoItem(/** param */)

>> class A {
    constructor(a) {
        this.a = a;
    }
}
>> const ac = new A('a');
>> ac.constructor
class A {
    constructor(a) {
        this.a = a;
    }
}

>> ac instanceof A
true

>> typeof ['a', 'b', 'b']
'object'

>> ['a', 'b', 'c'].constructor
ƒ Array() { [native code] }
>> ['a', 'b', 'c'] instanceof Array
true
>> Array.isArray(['a', 'b', 'c'])
true
>> Array.isArray({a: 'aaa', b: 'bbb'})
false

>> {...['a', 'b', 'c']}
{0: 'a', 1: 'b', 2: 'c'}
>> const a = ['a', 'b', 'c'];
>> delete a[1]
true
>> a
['a', empty, 'c']
>> a[1]
undefined
>> {...a}
{0: 'a', 2: 'c'}

constructor(private readonly boxId: BoxIdLiteral) {}

private refreshCategoryBox(): void {
  while (this.categoryBox.firstChild) {
    this.categoryBox.removeChild(this.categoryBox.firstChild);
  }
  this.children.forEach((child) => {
    if (child.elm) {
      this.categoryBox.appendChild(child.elm);
    }
  });
}

import { Category } from './category';
import { BoxIdLiteral, TodoItem } from './todo-item';

/** カテゴリ全体を統括 */
export class ParentCategory {
  /** ダイアログ */
  private dialog: HTMLDialogElement;
  /** [ダイアログ]セレクトボックス */
  private selectInput: HTMLSelectElement;
  /** [ダイアログ]変更ボタン */
  private changeButton: HTMLButtonElement;
  /** [ダイアログ]削除ボタン */
  private removeButton: HTMLButtonElement;
  /** 未着手カテゴリ */
  private notStartedYetCategory: Category;
  /** 進行中カテゴリ */
  private wipCategory: Category;
  /** 完了カテゴリ */
  private finishCategory: Category;

  /** 現在選択中タスク */
  private currentSelectItem: TodoItem | null = null;

  constructor() {
    this.dialog = document.querySelector('#item-operate-dialog')!;
    this.selectInput = document.querySelector('#select-new-state')!;
    this.changeButton = document.querySelector('#change-button')!;
    this.removeButton = document.querySelector('#remove-button')!;
    this.notStartedYetCategory = new Category('not-started-yet');
    this.wipCategory = new Category('wip');
    this.finishCategory = new Category('finish');

    this.dialog.addEventListener('close', () => {
      if (this.currentSelectItem === null) {
        throw Error('[ParentCategory.constructor] this.currentSelectItem = null');
      }

      switch (this.dialog.returnValue) {
        case 'not-started-yet':
        case 'wip':
        case 'finish':
          this.moveItem(this.dialog.returnValue);
          break;
        case 'remove':
          this.deleteItem();
          break;
        default:
          return;
      }

      this.currentSelectItem = null;
    });

    this.changeButton.addEventListener('click', (event) => {
      event.preventDefault();
      this.dialog.close(this.selectInput.value);
    });

    this.removeButton.addEventListener('click', (event) => {
      event.preventDefault();
      this.dialog.close('remove');
    });
  }

  /**
   * 新アイテム追加
   * @param taskName タスク名
   * @note 新アイテムの追加は仕様上未着手にしか入らない
   */
  appendNewTask(taskName: string): void {
    const todoItem = new TodoItem(
      taskName,
      (_event, todoItem) => {
        this.currentSelectItem = todoItem;
        this.selectInput.value = todoItem.currentGroup;
        this.dialog.showModal();
      }
    );
    this.notStartedYetCategory.appendTodo(todoItem);
  }

  /**
   * アイテムの移動
   * @param category 移動先カテゴリ
   */
  private moveItem(category: BoxIdLiteral): void {
    if (this.currentSelectItem === null) {
      throw Error('[ParentCategory.moveItem] this.currentSelectItem = null');
    }

    this.removeItemInCategory();

    switch (category) {
      case 'not-started-yet':
        this.notStartedYetCategory.appendTodo(this.currentSelectItem);
        break;
      case 'wip':
        this.wipCategory.appendTodo(this.currentSelectItem);
        break;
      case 'finish':
        this.finishCategory.appendTodo(this.currentSelectItem);
        break;
    }

    this.currentSelectItem = null;
  }

  /** タスクの削除 */
  private deleteItem(): void {
    if (this.currentSelectItem === null) {
      throw Error('[ParentCategory.deleteItem] this.currentSelectItem = null');
    }

    this.currentSelectItem.remove();
    this.removeItemInCategory();
    this.currentSelectItem = null;
  }

  /** カテゴリからタスクを取り除く */
  private removeItemInCategory(): void {
    if (this.currentSelectItem === null) {
      throw Error('[ParentCategory.removeItemInCategory] this.currentSelectItem = null');
    }

    switch (this.currentSelectItem.currentGroup) {
      case 'not-started-yet':
        this.notStartedYetCategory.deleteTodo(this.currentSelectItem.uuid);
        break;
      case 'wip':
        this.wipCategory.deleteTodo(this.currentSelectItem.uuid);
        break;
      case 'finish':
        this.finishCategory.deleteTodo(this.currentSelectItem.uuid);
        break;
    }
  }
}

this.dialog.addEventListener('close', () => {...});

this.changeButton.addEventListener('click', (event) => {
    event.preventDefault();
    this.dialog.close(this.selectInput.value);
});

this.removeButton.addEventListener('click', (event) => {
    event.preventDefault();
    this.dialog.close('remove');
});

<button value="remove" formmethod="dialog">削除</button>

case 'not-started-yet':
case 'wip':
case 'finish':
    this.moveItem(this.dialog.returnValue);
    break;

case 'not-started-yet':
case 'wip':
case 'finish':

case 'not-started-yet':
    this.moveItem('not-started-yet');
    break;
case 'wip':
    this.moveItem('wip');
    break;
case 'finish':
    this.moveItem('finish');
    break;

// カテゴリから削除
this.removeItemInCategory();

// 選択された移住先カテゴリに追加
switch (category) {
  case 'not-started-yet':
    this.notStartedYetCategory.appendTodo(this.currentSelectItem);
    break;
  case 'wip':
    this.wipCategory.appendTodo(this.currentSelectItem);
    break;
  case 'finish':
    this.finishCategory.appendTodo(this.currentSelectItem);
    break;
}

this.currentSelectItem.remove();
this.removeItemInCategory();

import { TaskForm } from './task-form';
import { ParentCategory } from './parent-category';

function main(): void {
  const taskForm = new TaskForm();
  const parentCategory = new ParentCategory();
  taskForm.registerAddTaskButtonClickEventFunc((inputValue) => {
    parentCategory.appendNewTask(inputValue);
  });
}

window.addEventListener('load', main);