How to add tms layer in openlayer 6?

Question

I used OpenLayer2, Mapproxy, Mapnik and tilecache for generating map. I added TMS layers in openlayer2. Now I want to upgrade my openlayer, for that I chose latest version ol6. How do I add a TMS layer in ol6.

My openlayer 2 js is like this

var layer = new OpenLayers.Layer.TMS('District', 'http://127.0.0.1:8080/tms/', {layername: 'district/distgrid', type: 'png', isBaseLayer:true,transitionEffect:"resize" });
map.addLayer(layer);

Answer 1

In OpenLayers TMS layers are tile layers using a XYZ source:

import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

const layer = new TileLayer({
  source: new XYZ({
    url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  })
});

However, I am not sure about the properties you have provided (please check the docs). Read also this answer.