redux - typescript - change index.js to support typescript

Git Commit

https://github.com/shooeugenesea/study-js/commit/ed8a7b35f8b3c73a27f0491aaea23b627d70b8ae

• Install typescript

npm install --save-dev typescript

• New Helloworld.ts

export class Helloworld {

    public name: String;

    public constructor(name:String) {

        this.name = name;

    }

    public greeting(): void {

        console.log(`Helloworld! ${this.name}`);

    }

}

• New TodoItem.ts

export class TodoItem {

    public constructor(public id:String, public task:String, public done:boolean) {

    }

    public printDetail():void {

        console.log(`${this.id} / ${this.task} / ${this.done}`);

    }

}

• New TodoItemCollection.ts

import {TodoItem} from "./TodoItem";

export class TodoItemCollection {

    constructor(public name:String, public todoItems: TodoItem[]) {

    }

    public addItem(item: TodoItem): number {

        return this.todoItems.push(item);

    }

    public getItemById(id:String): TodoItem | undefined {

        return this.todoItems.find(item => item.id === id);

    }

    public markDone(id:String) {

        const item = this.getItemById(id)

        if (item) {

            item.done = true

        }

    }

}

• Rename index.js to index.tsx

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import {createStore, applyMiddleware} from 'redux'

import { Provider } from 'react-redux'

import reducers from './reducers'

import thunk from "redux-thunk";

import {Helloworld} from './ts/Helloworld'

import {TodoItemCollection} from "./ts/TodoItemCollection";

import {TodoItem} from "./ts/TodoItem";

const store = createStore(reducers, applyMiddleware(thunk));

ReactDOM.render(

      <Provider store={store} >

          <App />

      </Provider>,

  document.getElementById('root')

);

const h = new Helloworld("KKK");

h.greeting();

const todos = new TodoItemCollection("name1", [

    new TodoItem("id1", "task1", false),

    new TodoItem("id2", "task2", false),

    new TodoItem("id3", "task3", false),

]);

todos.addItem(new TodoItem("id4", "task4", false));

console.log(todos);

todos.markDone("id2");

console.log(todos.getItemById("id2"));

• Check typescript works