JSFiddle - React, Tailwind, and code Playground

by mahny

HTML

<div id="app">ここに色々表示</div>

TypeScript

class HogeDto {
    public v1: string;
    public v2: string;
    private _v3: string;
    
    constructor(v1: string = null, v2: string = null, v3: string = null) {
        this.v1 = v1;
        this.v2 = v2;
        this._v3 = v3;
    }
    
    get v3(): string {
        return this._v3;
    }
    
    toString(isOneLiner: boolean = true): string {
    	return isOneLiner ? JSON.stringify(this) : JSON.stringify(this, null, '  ');
    }
}
const hoge: HogeDto = new HogeDto('aaa', 'bbb', 'ccc');

const app = document.getElementById('app');
app.innerHTML = `<pre>
--- JSON.stringify() で呼出 ---
${JSON.stringify(hoge, null, '  ')}

--- メンバを個別に呼出 ---
v1 : ${hoge.v1}
v2 : ${hoge.v2}
_v3: ${hoge._v3}
v3 : ${hoge.v3}

--- オーバーライド実験 / そのまま出力 ---
${hoge}

--- オーバーライド実験 / パラメータ省略 ---
${hoge.toString()}

--- オーバーライド実験 / パラメータ付き ---
${hoge.toString(false)}
</pre>`;