gistlib - create a todo app in typescript

Here's a simple example of creating a ToDo app in TypeScript with React and Node.js:

Set up a basic Node.js+React development environment.
Create a new project directory and initialize a package.json file:


index.ts
mkdir my-todo-app
cd my-todo-app
npm init -y
45 chars
4 lines

Install TypeScript, React, React DOM, and the necessary @types for the project:


index.ts
npm install typescript react react-dom @types/react @types/react-dom --save-dev
80 chars
2 lines

Create a new tsconfig.json file to configure TypeScript:


index.ts
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "jsx": "react",
    "sourceMap": true,
    "outDir": "dist",
    "strict": true
  },
  "exclude": [
    "node_modules"
  ]
}
228 chars
15 lines

Create a new src directory and add the following files:

index.html


index.ts
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My ToDo App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./dist/index.js"></script>
  </body>
</html>
197 chars
12 lines

index.tsx


index.ts
import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface Props {}
interface State {}

class App extends React.Component<Props, State> {
  render() {
    return (
      <div>Hello, world!</div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
291 chars
16 lines

Create a build script in package.json to build and watch for changes in the source files:


index.ts
"scripts": {
  "build": "tsc -w",
},
37 chars
4 lines

Run npm run build to start the TypeScript compiler and watch for changes.
Open the index.html file in your browser and you should see "Hello, world!" displayed in the page.
Add basic functionality to the app by creating a new component for the ToDo list:


index.ts
interface Todo {
  title: string;
  completed: boolean;
}

interface Props {}
interface State {
  todos: Todo[];
  newTodo: string;
}

class TodoList extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      todos: [],
      newTodo: ''
    };
    this.handleNewTodo = this.handleNewTodo.bind(this);
    this.addTodo = this.addTodo.bind(this);
    this.toggleTodo = this.toggleTodo.bind(this);
  }

  handleNewTodo(e: React.ChangeEvent<HTMLInputElement>) {
    this.setState({
      newTodo: e.target.value
    });
  }

  addTodo() {
    const newTodo: Todo = {
      title: this.state.newTodo,
      completed: false
    };
    this.setState({
      todos: [newTodo, ...this.state.todos],
      newTodo: ''
    });
  }

  toggleTodo(index: number) {
    const newTodos = this.state.todos.slice();
    newTodos[index].completed = !newTodos[index].completed;
    this.setState({
      todos: newTodos
    });
  }

  render() {
    return (
      <div>
        <h1>Todos</h1>
        <input type="text" value={this.state.newTodo} onChange={this.handleNewTodo} />
        <button onClick={this.addTodo}>Add Todo</button>
        <ul>
          {this.state.todos.map((todo: Todo, index: number) => (
            <li key={index} onClick={() => this.toggleTodo(index)} style={{textDecoration: todo.completed ? 'line-through' : 'none'}}>
              {todo.title}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
1485 chars
66 lines

Update the App component to render the TodoList:


index.ts
class App extends React.Component<Props, State> {
  render() {
    return (
      <div>
        <TodoList />
      </div>
    );
  }
}
135 chars
10 lines

That's it! You now have a simple ToDo app using TypeScript, React, and Node.js.

create a todo app in typescript

similar typescript code snippets

related categories