[TypeScript] 型

### マップ型
stringのキーのマップ型

type stringArray = {
    [key in string]: string
}

const data1:stringArray = {
    'start': 'start',
    'middle': 'middle',
    'end': 'end'
}

data1['finish'] = '**end**'
data1[100] = 'ok'
console.log(data1)

enum

enum human {name='name', mail='mail'}

type HumanMap = {
    [key in human]: string
}

const taro:HumanMap = {
    name: 'taro',
    mail: 'taro@yamada'
}
console.log(taro)
const hana:HumanMap = {
    name: 'hanako',
    mail: 'hanak@gmail.com'
}
console.log(hana)

ユニオン型

class Student {
    name:string
    school:string
    grade:number

    constructor(nm:string, sc:string, gr:number){
        this.name = nm
        this.school = sc
        this.grade = gr
    }

    print():void{
        console.log('<< ' + this.name + ',' +
            this.school + ':' + this.grade + ' >>')
    }
}
class Employee {
    name: string
    title: string
    department:string

    constructor(nm:string, tt:string, dp:string){
        this.name = nm
        this.title = tt
        this.department =dp
    }

    print():void {
        console.log(this.name + '[' + this.title + 
            ',' + this.department + ']')
    }
}

type People = Student | Employee

const taro:People = new Student('taro', 'high school', 3)
const hana:People = new Employee('hanako', 'president', 'sales')
const sachi:People = new Student('schiko', 'jinir-high school', 1)
const jiro:People = new Employee('jiro', 'director', 'labo')

const data:People[] = [taro, hana, sachi, jiro]
for(let item of data){
    item.print()
}

ユニオン型を個別に処理

class Human {
    data: People[] = []

    add(item:People):void {
        this.data.push(item)
    }
    print():void {
        for(let item of this.data){
            let ob
            switch(item.constructor.name){
                case 'Student':
                ob = item as Student
                console.log(ob.name + ', ' + ob.school
                    + '(' + ob.grade + ')')
                break
                case 'Employee':
                ob = item as Employee
                console.log(ob.name + ':' + ob.title
                    + ':' + ob.department)
                break
                default:
                console.log('cannot print.')
            }
        }
    }
}

### テンプレートリテラル
${}で埋め込む

const data = [10, 20, 30]
const msg = `data is [${data}]`
console.log(msg)
const result = `total is ${data[0]+data[1]+data[2]} !`
console.log(result)

### テンプレートリテラル型

type val_name = "sample"|"private"|"public"
type data_type = `${val_name}_data`
type prop_type = `${val_name}_property`
type method_type = `${val_name}_method`

const s:data_type = "sample_data"
const t:prop_type = "public_property"
const u:method_type = "private_method"
const v:data_type = "personal_data"

### レコード型

type prop_name = 'name' | 'mail' | 'age'
type Person = Record<prop_name, string|number>

const taro:Person = {
    name: 'taro',
    mail:'taro@gmail.com',
    age: 39
}

console.log(taro)

### Pick型

type person_data = {
    name:string,
    mail:string,
    address:string,
    age:number
}

type person_keys = 'name' | 'age'
type human_keys = 'name' | 'mail' | 'address'

type person = Pick<person_data, person_keys>
type human = Pick<person_data, human_keys>

const taro:person = {
    name: 'taro',
    age: 39
}
const hana:human = {
    name: 'hanako',
    mail: 'hanako@gmail.com',
    address: 'chiba'
}
console.log(taro)
console.log(hana)

### イテレータ

class MyData<T> {
    data:T[ ] = []

    constructor(...data: T[]){
        this.data = data
    }

    add(val:T) {
        this.data.push(val)
    }

    [Symbol.iterator](){
        let pos = 0;
        let items = this.data;

        return {
            next(): IteratorResult<T>{
                if(pos < items.length) {
                    return {
                        done: false,
                        value: items[pos++]
                    }
                } else {
                    return {
                        done: true,
                        value: null
                    }
                }
            }
        }
    }
}
const data = new MyData<string>('one','two','three')

for(let item of data){
    console.log(item)
}

OKなのかNGなのかすらわからん

[TypeScript] メモアプリ

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	<script src="main.js"></script>
</head>
<body>
	<h1 class="bg-primary text-white p-2">Memo page</h1>
	<div class="container">
		<p class="h5">type message:</p>
		<div class="alert alert-primary">
			<input type="text" class="form-control" id="message">
			<button class="btn btn-primary mt-2" id="btn">
			Save</button>
		</div>
		<table class="table" id="table"></table>
		<div class="text-center">
			<button class="btn btn-danger mt-4" id="initial">
				Initialize
			</button>
		</div>
	</div>
</body>
</html>

index.ts

let table:HTMLTableElement
let message:HTMLInputElement

function showTable(html:string){
	table.innerHTML = html
}

function doAction(){
	const msg = message.value
	memo.add({message:msg, date:new Date()})
	memo.save()
	memo.load()
	showTable(memo.getHtml())
}

function doInitial(){
	memo.data = []
	memo.save()
	memo.load()
	message.value = ''
	showTable(memo.getHtml())
}

type Memo = {
	message:string,
	date:Date
}

class MemoData {
	data:Memo[] = []

	add(mm:Memo):void {
		this.data.unshift(mm)
	}

	save():void {
		localStorage.setItem('memo_data', JSON.stringify(this.data))
	}
	load():void{
		const readed = JSON.parse(localStorage.getItem('memo_data'))
		this.data = readed ? readed : []
	}

	getHtml():string {
		let html = '<thead><th>memo</th><th>data</th></thead><tbody>'
		for(let item of this.data){
			html += '<tr><td>' + item.message + '</td><td>'
				+ item.date.toLocaleString() + '</td></tr>'
		}
		return html + '</tbody>'
	}
}

const memo = new MemoData()

window.addEventListener('load', ()=> {
	table = document.querySelector('#table')
	message = document.querySelector('#message')
	document.querySelector('#btn').addEventListener('click', doAction)
	document.querySelector('#inital').addEventListener('click', doInitial)
	memo.load()
	showTable(memo.getHtml())
})

これなんだよな やりたいこと

[TypeScript] クラス2

### インターフェイス

interface Human {
    name:string
    print():void
}

class Person implements Human {
    name:string = 'no-name'
    mail:string
    age:number

    constructor(name:string, mail:string = 'no-mail', age:number = -1){
        this.name = name
        this.mail = mail
        this.age = age
    }

    print():void {
        console.log(this.name + '(' + this.mail + ',' + this.age + ')')
    }
}

class Student implements Human {
    name:string = 'no-name'
    school?:School
    grade?:number

    constructor(name:string,school?:School, grade?:number){
        this.name = name
        this.school = school
        this.grade = grade
    }

    print():void {
        let gd:string = this.grade ? String(this.grade) : '-'
        console.log(this.name + '(' + this.school + ' school: ' + gd + ' grade)') 
    }
}

const taro:Person = new Person('taro', 'taro@yamada', 39)
const hanako:Student = new Student('hanako', School.high, 39)
const sachiko:Person = new Person('sachiko')
const jiro:Student = new Student('jiro')

const data:Human[] = [taro, hanako, sachiko, jiro]

for(let item of data){
    item.print()
}

### インターフェイスの継承

interface People extends Human {
    birth:Date
}

class Employee implements People {
    name:string = 'no-name'
    company:string = ''
    birth:Date = new Date()

    constructor(nm:string, cm:string, bth:Date){
        this.name = nm
        this.company = cm
        this.birth = bth
    }

    print():void {
        console.log(this.name + ' [' + this.company + ']')
    }
}

const ichiro = new Employee('ichiro',
    'Baseball Inc.', new Date('1982/10/10'))
ichiro.print()

### 静的メンバー

class StaticHuman {
    static fullname:string
    static age:number
    
    static set(nm:string, ag:number):void {
        this.fullname = nm
        this.age = ag
    }

    static print():void {
        console.log(this.fullname + '(' + this.age + ')')
    }
}

StaticHuman.set('taro',39)
StaticHuman.print()
StaticHuman.set('hanako',29)
StaticHuman.print()

### パラメータープロパティ

class Human {
    constructor(readonly name:string, readonly age:number){

    }

    print():void {
        console.log(this.name + '(' + this.age + ')')
    }
}

const taro = new Human('taro', 39)
taro.print()
const hana = new Human('hanako', 28)
hana.print()

### 総称型

class Data<T> {
    data?:T[]

    constructor(...item:T[]){
        this.data = item
    }

    print():void {
        if(this.data) {
            for(let item of this.data){
                console.log(item)
            }
        } else {
            console.log('no data...')
        }
    }
}

const data1 = new Data<string>('one','two','three')
const data2 = new Data<number>(123,456,78,90)
data1.print()
data2.print()

### ユーティリティ型
Readonly, Required, Partial

type Human = {
    name:string
    mail?:string
    age?:number
}

class Person {
    human:Required<Human>

    constructor(nm:string, ml:string, ag:number){
        this.human = {name:nm, mail:ml, age:ag}
    }

    print():void {
        console.log(this.human.name
            + ' (' + this.human.age + '::'
            + this.human.mail + ')')
    }
}
const taro = new Person('taro', 'taro@yamada', 39)
taro.print()

OK

[TypeScript] クラス1

### クラス

class Person {
    name:string = 'no-name'
    mail?:string
    age?:number
    print():void {
        const ml:string = this.mail ? this.mail : 'no-mail'
        const ag:number = this.age ? this.age : -1
        console.log(this.name + '(' + ml + ',' + ag + ')')
    }
}

const taro = new Person()
taro.name = 'taro'
taro.mail = 'taro@gmail.com'
taro.age = 39
taro.print()

### コンストラクタ

class Person {
    name:string = 'no-name'
    mail?:string
    age?:number

    constructor(name:string, mail:string = 'no-mail', age:number = -1){
        this.name = name
        this.mail = mail
        this.age = age
    }

    print():void {
        console.log(this.name + '(' + this.mail + ',' + this.age + ')')
    }
}

const taro = new Person('taro', 'taro@gmail.com', 39)
const hanako = new Person('hanako', 'hanako@gmail.com')
const sachiko = new Person('sachiko')

taro.print()
hanako.print()
sachiko.print()

### インスタンスのクラスを調べる

console.log(taro instanceof Person === hanako instanceof Person === true)

console.log(taro.constructor.name)
console.log(hanako.constructor.name)
console.log(Person.name)

### クラスの継承
extendsで継承する

enum School {
    junior='junior',
    juniorHigh = 'juniorHigh',
    high = 'high',
    other = 'other'
}

class Student extends Person {
    school?:School
    grade?:number

    constructor(name:string, school:School, grade:number){
        super(name)
        this.school = school
        this.grade = grade
        switch(school){
            case School.junior:
            this.age = 6 + this.grade; break
            case School.juniorHigh:
            this.age = 12 + this.grade; break
            case School.high:
            this.age = 15 + this.grade; break
            default:
            this.age = -1
        }
    }
}

const taro = new Person('taro', 'taro@gmail.com', 39)
const hanako = new Student('hanako', School.high, 2)

taro.print()
hanako.print()

### メソッドのオーバーライド
– 継承しているクラスの中にメソッドを追加する

    print():void {
        let gd:string = this.grade ? String(this.grade) : '-'
        switch(this.grade){
            case 1:gd += 'st'; break
            case 2:gd += 'nd'; break
            case 3:gd += 'rd'; break
            default: gd += 'th'
        }
        console.log(this.name + '(' + this.school + ' school: ' + gd + ' grade)')
    }

### アクセス修飾子
public: 外部から自由にアクセス
protected: クラスおよびクラスを継承したサブクラス
private: クラス内のみ

    protected name:string = 'no-name'
    private mail:string
    public age:number

### setterとgetter

class Student extends Person {
    school?:School
    private grade_num:number = -1
    get gradeN():number {
        return this.grade_num
    }
    set gradeN(n:number){
        this.grade_num = n
        this.grade = String(n)
    }
    private gr_str:string = ''
    get grade(): string {
        return this.gr_str
    }
    private set grade(pr:string){
        let gd = pr
        switch(this.gradeN){
            case 1: gd += 'st'; break
            case 2: gd += 'nd'; break
            case 3: gd += 'rd'; break
            default: gd += 'th'
        }
        this.gr_str = gd
    }

    constructor(name:string, school:School, grade:number){
        super(name)
        this.school = school
        this.gradeN = grade
    }

    print():void {
        let gd:string = this.grade ? String(this.grade) : '-'
        console.log(this.name + '(' + this.school + ' school: ' + gd + ' grade)')
    }
}

ふむ

[TypeScript] オブジェクト

オブジェクトとは「値と処理をひとまとめに保管し、名前で取り出せるようにしたもの」
プロパティ: オブジェクトの中の値
メソッド: オブジェクトの中の関数

同じプロパティやメソッドを使う場合、this. と書く

const person = {
    name: "taro",
    age: 39,
    print: function(): void {
        console.log(this.name + '('
            + this.age + ')')
    }
}

person.print()
person.name = 'hanako'
person.age = 28
person.print()

### Objectによる生成

const person = Object()
person.name = "taro"
person.age = 39
person.print = function():void {
    console.log(this.name + '('
        + this.age + ')')
}

### ファクトリ関数
ファクトリとは値を作成するもの

function Person(n:string, a:number):
        {name:string, age:number, print:()=>void}{
    return {
        name: n,
        age: a,
        print: function(){
            console.log(this.name +
                '(' + this.age + ')')
        }
    }
}

const taro = Person('taro', 39)
const hana = Person('hanako', 28)
taro.print()
hana.print()

### オブジェクトに引数を通過う

type person = {name:string, age:number}

function setData(ob:person, n:string, a:number):person {
    ob.name = n
    ob.age = a
    return ob
}

const ob1:person = {name:'taro', age:39}
const ob2:person = setData(ob1, 'hanako', 28)

console.log(ob1)
console.log(ob2)

### オブジェクトの分割代入

type person = {name:{first:string, second:string}, age:number}

const ob1:person = {name:{first:'taro', second: 'yamada'}, age:39}
const {name:{first, second}, age} = ob1
console.log(first + "-" + second + '::' + age)

### プロパティのオプションとReadonly

type person = {readonly name:string, mail?:string, age?:number, print:()=>void}

const ob1:person = {
    name: 'taro',
    age: 39,
    print:function():void {
        console.log(this.name + ':' + this.age)
    }
}

const ob2:person = {
    name: 'hanako',
    mail: 'hanako@gmail.com',
    print:function():void {
        console.log(this.name + ':' + this.mail)
    }
}
ob1.print()
ob2.print()