Created a type for todos

src/components/MoreActions.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
  import { createEventDispatcher } from 'svelte';
+ import type { TodoType } from '../types/todo.type';
 
  const dispatch = createEventDispatcher();
 
- export let todos: { id: number; name: string; completed: boolean }[];
+ export let todos: TodoType[];
 
  let completed = true;
 

src/components/Todo.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
  import { createEventDispatcher, tick } from 'svelte';
  import { focusOnInit, selectOnFocus } from '$lib/actions';
- export let todo: { id: number; name: string; completed: boolean };
+ import type { TodoType } from '../types/todo.type';
+ export let todo: TodoType;
 
  const dispatch = createEventDispatcher();
 
@@ -11,9 +12,6 @@
  let editButtonPressed = false;
 
  function update(updatedTodo: { id?: number; name?: string; completed?: boolean }) {
- console.log('Todo: ', todo);
- console.log('updatedTodo: ', updatedTodo);
- console.log('Combined: ', { ...todo, ...updatedTodo });
  dispatch('update', { todo: { ...todo, ...updatedTodo } });
  }
 

src/components/Todos.svelte

@@ -6,8 +6,9 @@
  import Todo from './Todo.svelte';
  import TodosStatus from './TodosStatus.svelte';
  import { alert } from '$lib/stores';
+ import type { TodoType } from '../types/todo.type';
 
- export let todos: { id: number; name: string; completed: boolean }[] = [];
+ export let todos: TodoType[] = [];
 
  let newTodoId: number;
  $: {
@@ -30,21 +31,21 @@
  $alert = 'Browsing completed todos';
  }
  }
- function filterTodos(filter: string, todos: { id: number; name: string; completed: boolean }[]) {
+ function filterTodos(filter: string, todos: TodoType[]) {
  return filter === 'active'
  ? todos.filter((t) => !t.completed)
  : filter === 'completed'
  ? todos.filter((t) => t.completed)
  : todos;
  }
 
- function removeTodo(todo: { id: number; name: string; completed: boolean }) {
+ function removeTodo(todo: TodoType) {
  todos = todos.filter((t) => t.id !== todo.id);
  $alert = `Todo named '${todo.name}' has been deleted`;
  todosStatus.focus();
  }
 
- function updateTodo(todo: { id: number; name: string; completed: boolean }) {
+ function updateTodo(todo: TodoType) {
  const i = todos.findIndex((t) => t.id === todo.id);
 
  if (todos[i].name !== todo.name) $alert = `Todo '${todos[i].name}' renamed to '${todo.name}'`;

src/components/TodosStatus.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
- export let todos: { id: number; name: string; completed: boolean }[];
+ import type { TodoType } from '../types/todo.type';
+ export let todos: TodoType[];
 
  export function focus() {
  headingEl.focus();

src/lib/localstore.ts

@@ -1,11 +1,9 @@
 import { writable } from 'svelte/store';
 import { browser } from '$app/environment';
+import type { TodoType } from '../types/todo.type';
 
-export function localStore(
- key: string,
- initial: { id: number; name: string; completed: boolean }[]
-) {
- function toString(value: { id: number; name: string; completed: boolean }[]) {
+export function localStore(key: string, initial: TodoType[]) {
+ function toString(value: TodoType[]) {
  return JSON.stringify(value, null, 2);
  }
  const toObj = JSON.parse;
@@ -19,7 +17,7 @@ export function localStore(
 
  return {
  subscribe,
- set(value: { id: number; name: string; completed: boolean }[]) {
+ set(value: TodoType[]) {
  localStorage.setItem(key, toString(value));
  return set(value);
  },

src/types/todo.type.ts

@@ -0,0 +1,5 @@
+export type TodoType = {
+ id: number;
+ name: string;
+ completed: boolean;
+};