How to use the d3-interpolate.interpolateRgbBasis function in d3-interpolate

// arrStr = d3Interpolate.quantize(d3Interpolate.interpolateRound(-1, 2), 4); // test fails, due to explicit typing v argument type mismatch

// test interpolateRgb(a, b) signatures ----------------------------------------------------------------

// without gamma correction
iString = d3Interpolate.interpolateRgb('seagreen', 'steelblue');
iString = d3Interpolate.interpolateRgb(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateRgb(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));
str = iString(0.5);

// with gamma correction
iString = d3Interpolate.interpolateRgb.gamma(2.2)('purple', 'orange');

// test interpolateRgbBasis(color) and  interpolateRgbBasisClosed(color) signatures -------------------------

iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Color.rgb('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasisClosed(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);

// test interpolateHsl(a, b) and interpolateHslLong(a, b)----------------------------------------------------------------

iString = d3Interpolate.interpolateHsl('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

iString = d3Interpolate.interpolateHslLong('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHslLong(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHslLong(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

// test interpolateLab(a, b) --------------------------------------------------------------------------------------------

iString = d3Interpolate.interpolateLab('seagreen', 'steelblue');

}

    var obj = this._widgetModel.getAutoStyle();

    if (_.isEmpty(obj) || _.isEmpty(obj.definition)) {
      return false;
    }

    var self = this;
    var geometryDefinition = obj.definition[Object.keys(obj.definition)[0]]; // Gets first definition by geometry
    var colorsRange = geometryDefinition && geometryDefinition.color && geometryDefinition.color.range;
    var interpolatedColors = d3Interpolate.interpolateRgbBasis(colorsRange);
    var colorsRangeHover = _.map(colorsRange, function (color) {
      return d3.rgb(color).darker(0.3).toString();
    });
    var interpolatedHoverColors = d3Interpolate.interpolateRgbBasis(colorsRangeHover);
    var data = this.model.get('data');
    var domain = this._calculateDataDomain();
    var domainScale = d3.scale.linear().domain(domain).range([0, 1]);
    var defs = d3.select(this.el).append('defs');
    var stopsNumber = 4; // It is not necessary to create as many stops as colors

    this._linearGradients = defs
      .selectAll('.gradient')
      .data(data)
      .enter()
      .append('linearGradient')
      .attr('class', 'gradient')
      .attr('id', function (d, i) {
        // This is the scale for each bin, used in each stop within this gradient
        this.__scale__ = d3.scale.linear()
          .range([ self._getMinValueFromBinIndex(i), self._getMaxValueFromBinIndex(i) ])

_generateFillGradients: function () {
    if (!this._widgetModel || !this._widgetModel.isAutoStyleEnabled()) {
      return false;
    }

    var obj = this._widgetModel.getAutoStyle();

    if (_.isEmpty(obj) || _.isEmpty(obj.definition)) {
      return false;
    }

    var self = this;
    var geometryDefinition = obj.definition[Object.keys(obj.definition)[0]]; // Gets first definition by geometry
    var colorsRange = geometryDefinition && geometryDefinition.color && geometryDefinition.color.range;
    var interpolatedColors = d3Interpolate.interpolateRgbBasis(colorsRange);
    var colorsRangeHover = _.map(colorsRange, function (color) {
      return d3.rgb(color).darker(0.3).toString();
    });
    var interpolatedHoverColors = d3Interpolate.interpolateRgbBasis(colorsRangeHover);
    var data = this.model.get('data');
    var domain = this._calculateDataDomain();
    var domainScale = d3.scale.linear().domain(domain).range([0, 1]);
    var defs = d3.select(this.el).append('defs');
    var stopsNumber = 4; // It is not necessary to create as many stops as colors

    this._linearGradients = defs
      .selectAll('.gradient')
      .data(data)
      .enter()
      .append('linearGradient')
      .attr('class', 'gradient')

tableau_red_blue:           red_blue_diverging,
  tableau_gold_purple:        gold_purple_diverging,
  tableau_red_green_gold:     red_green_gold_diverging,
  tableau_sunrise_sunset:     sunrise_sunset_diverging,
  tableau_orange_blue_white:  orange_blue_white_diverging,
  tableau_red_green_white:    red_green_white_diverging,
  tableau_green_blue_white:   green_blue_white_diverging,
  tableau_red_blue_white:     red_blue_white_diverging,
  tableau_red_black_white:    red_black_white_diverging,

  // cyclic interpolators
  rainbow:     _.interpolateRainbow,
  sinebow:     _.interpolateSinebow,

  // extended interpolators
  blueorange:  interpolateRgbBasis(peek(blueOrange))
};

function add(name, suffix) {
  schemes[name] = _['interpolate' + suffix];
  discretized[name] = _['scheme' + suffix];
}

// sequential single-hue
add('blues',    'Blues');
add('greens',   'Greens');
add('greys',    'Greys');
add('purples',  'Purples');
add('reds',     'Reds');
add('oranges',  'Oranges');

// diverging

_generateFillGradients: function () {
    if (!this._widgetModel || !this._widgetModel.isAutoStyleEnabled()) {
      return false;
    }

    var obj = this._widgetModel.getAutoStyle();

    if (_.isEmpty(obj) || _.isEmpty(obj.definition)) {
      return false;
    }

    var self = this;
    var geometryDefinition = obj.definition[Object.keys(obj.definition)[0]]; // Gets first definition by geometry
    var colorsRange = geometryDefinition && geometryDefinition.color.range;
    var data = this.model.get('data');
    var interpolatedColors = d3Interpolate.interpolateRgbBasis(colorsRange);
    var domain = this._calculateDataDomain();
    var domainScale = d3.scale.linear().domain(domain).range([0, 1]);
    var defs = d3.select(this.el).append('defs');
    var stopsNumber = 4;  // It is not necessary to create as many stops as colors

    this._linearGradients = defs
      .selectAll('linearGradient')
      .data(data)
      .enter()
      .append('linearGradient')
      .attr('id', function (d, i) {
        // This is the scale for each bin, used in each stop within this gradient
        this.__scale__ = d3.scale.linear()
          .range([ self._getMinValueFromBinIndex(i), self._getMaxValueFromBinIndex(i) ])
          .domain([0, 1]);
        return 'bar-' + self.cid + '-' + i;

export default function(scheme) {
  return interpolateRgbBasis(scheme[scheme.length - 1]);
}

export const Satellites = {
    Color: Colors._Highlight
}

/*
 * e.g. load color brewer values via
 * import { interpolateYlOrBr as interpolateScheme } from 'd3-scale-chromatic'
 * 
 * interpolateGnBu - blue earth
 * interpolateOrRd - red earth etc
 * 
 * Below is a custom 'brown' earth
 */ 
export const Globes = {
    Color: Colors.Water,
    Scheme: interpolateRgbBasis([ 
                "rgb(252, 237, 177)",
                "rgb(252, 220, 88)",
                "rgb(252, 202, 3)",
                "rgb(166, 133, 2)",
                "rgb(166, 144, 58)",
                "rgb(166, 156, 116)",
                "rgb(77, 72, 54)"].map(color))
}

const introDuration_MS = 2000;

export const View = {
    Depth: 350,
    Scale: 1.0,
    Color: Colors.Background,
    IntroLineColor: Colors.Pins,

export function schemeDiscretized(name, schemeArray, interpolator) {
  if (arguments.length > 1) {
    discretized[name] = schemeArray;
    schemes[name] = interpolator || interpolateRgbBasis(peek(schemeArray));
    return this;
  }

  return discretized.hasOwnProperty(name)
    ? discretized[name]
    : undefined;
}

const getColorScale = (
  domain: string[],
  colors: string[]
): Scale => {
  let scaleRange = []

  if (domain.length <= colors.length) {
    scaleRange = colors.slice(0, domain.length)
  } else {
    const interpolator = interpolateRgbBasis(colors)

    scaleRange = range(domain.length).map(k =>
      interpolator(k / (domain.length - 1))
    )
  }

  const scale = scaleOrdinal()
    .domain(domain)
    .range(scaleRange)

  return scale
}

export const getContinuousColorScale = (
  domain: [number, number],
  colors: string[]
): Scale => {
  const colorScheme = interpolateRgbBasis(colors)
  const scale = scaleSequential(colorScheme).domain(domain)

  return scale
}