Svelte is an alternative to React and VUE.

Creating a Svelte application is easy:

npx degit sveltejs/template todolist
cd todolist
npm install
npm start dev
Copy the code

It launches port 5000, and when opened, looks like this:

To have hints in VS Code, you need to install Svelte for VS Code in VS Code.

For a better hint, type a command that supports typescript:

node scripts/setupTypeScript.js
npm install
npm run dev
Copy the code

At this point, it already supports typescript.

Create SRC \stores. Ts and set todolist’s list here:

import { writable } from 'svelte/store';

interface Todo{
    done:boolean,
    text:string
}

const todo:Todo[]=[
    {
        done:true,
        text:'test-1'
    },{
        done:false,
        text:'test-2'
    }
]

export const list_store = writable(todo);
Copy the code

Then, in SRC \ app. svelte, import list:

import { list_store } from './stores.ts';
Copy the code

Since list_Store is an object, we need to set one more variable:

let list:Todo[];
Copy the code

And get the value:

const unsubscribe = list_store.subscribe((value) => {
	list = value;
});
Copy the code

We can now use a loop to list todo:

{#each list as todo} <div class:done={todo.done}> <input type="checkbox" checked={todo.done} /> <input placeholder="What  needs to be done?" value={todo.text} /> </div> {/each}Copy the code

The effect at the moment is:

Add event handling for checkbox next:

on:change={() => { todo.done = ! todo.done; }}Copy the code

Similarly, input text input needs to be processed:

on:change={(event) => {
	todo.text = event.target.value;
}}
Copy the code

Next, add an Add button and a delete button.

<button on:click={() => { list = list.concat({ done: false, text: '' }); } }>add</button> <button on:click={() => { list = list.filter((todo) => ! todo.done); }}>clear</button>Copy the code

There is also a display status:

<p>{remaining} remaining</p>
Copy the code

Remaining is defined like this:

$: remaining = list.filter((t) => ! t.done).length;Copy the code

SRC \ app. svelte

<script lang="ts"> import { list_store } from "./stores.ts"; interface Todo { done: boolean; text: string; } let list: Todo[]; const unsubscribe = list_store.subscribe((value) => { list = value; }); $: remaining = list.filter((t) => ! t.done).length; </script> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> <main> <h1>todo list</h1> {#each list as todo} <div class:done={todo.done}> <input type="checkbox" checked={todo.done} on:change={() => { todo.done = ! todo.done; console.log(todo.done); }} /> <input on:change={(event) => { todo.text = event.target.value; }} placeholder="What needs to be done?" value={todo.text} /> </div> {/each} <p>{remaining} remaining</p> <button on:click={() => { list = list.concat({ done: false, text: '' }); }}>add</button> <button on:click={() => { list = list.filter((todo) => ! todo.done); }}>clear</button> </main>Copy the code

The effect is as follows:

In the end, all the code in: git.code.tencent.com/codetyphon/…