Typescript design pattern for rendering different objects with similarities
So I know there gotta be a better way but I found a satisfying one:
interface IBlock {
  getProperty() : string;
  render() : Object;
}

class ColorBlock {
  color: string;
  constructor(color: string) {
    this.color = color;
  }
  getProperty() : string {
    return this.color;
  }
  render(isFirstBlock: boolean) : Object/*Well it's an HTML dom object*/ {
    const tag = document.createElement('div');
    isFirstBlock? tag.classList.add('block-first') : tag.classList.add('block-lasts');
    tag.setAttribute('style', `background: ${this.color};`);
    return tag;
  }
}

class ImageBlock {
  url: string;
  constructor(url: string) {
    this.url = url;
  }
  getProperty() : string {
    return this.url;
  }
  render(isFirstBlock: boolean) : Object/*Well it's an HTML dom object*/ {
    const tag = document.createElement('div');
    isFirstBlock? tag.classList.add('block-first') : tag.classList.add('block-lasts');
    const image_tag = document.createElement('img');
    image_tag.src = this.url;
    image_tag.classList.add('image-block');
    tag.appendChild(image_tag);
    return tag;
  }
}

const global_x = 10;
const global_y = 10;

const world = new Array&lt;Array&lt;IBlock&gt;&gt;(global_x);

const default_ColorBlock = new ColorBlock('#ff00ff');

for(let i=0; i&lt;global_x; i++) {
  world[i] = new Array&lt;IBlock&gt;(global_y);
  world[i].fill(default_ColorBlock);
}

function render(world: Array&lt;Array&lt;IBlock&gt;&gt;) {
  const html_container = document.createElement('div');
  for(let i=0; i&lt;global_x; i++) {
    html_container.appendChild(world[i][0].render(true));
    for(let j=0; j&lt;global_y; j++) {
      html_container.appendChild(world[i][j].render(false));
    }
  }
  document.body.innerHTML = '';
  document.body.appendChild(html_container);
}

render(world);

CSS being:
:root {
  --global-width: 20px;
  --global-height: 20px;
}

.block-first, .block-lasts {
  width: var(--global-width);
  height: var(--global-height);
  border-radius: 50%;
  float: left;
}

.block-first {
  clear: both;
}

.image-block {
  width: var(--global-width);
  height: var(--global-height);
}

And no HTML outside of javascript (typescript) .