typescript - use map

• Commit 

https://github.com/shooeugenesea/study-js/commit/2d22117a7b36ea1225b960892995e409bbc5e64f

https://github.com/shooeugenesea/study-js/commit/30cb24cd3a5dc57dde750fa6e90a04b88dba8084

• Declare class with map
export class TestMap {

    private map: Map<string, string> = new Map();


    put(key:string, val:string): void {
        if (key) {
            this.map.set(key, val);
        }
    }


    get(key:string): string | undefined {
        if (key) {
            return this.map.get(key)
        }
    }


    count(): number {
        return this.map.size;
    }


    clearByKeyPrefix(prefix: string) {
        this.map.forEach((v: string, k:string, m:Map<string,string>) => {
            if (k.startsWith(prefix)) {
                m.delete(k);
            }
        })
    }
}
• Put and get then print
const testMap = new TestMap();
testMap.put("ka", "vka");
testMap.put("kb", "vka");
testMap.put("kc", "vka");
testMap.put("kd", "vka");
testMap.put("ke", "vka");
testMap.put("aa", "vaa");
console.log(testMap);
console.log(testMap.count()); // 6
testMap.clearByKeyPrefix("k"); // print 6 entries
console.log(testMap.get("aa")); // print vaa

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