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

// test interpolate(a, b) signature ----------------------------------------------------

iNum = d3Interpolate.interpolate('1', 5);


// color interpolator returning a color string
iString = d3Interpolate.interpolate('seagreen', d3Color.rgb(100, 100, 100));
iString = d3Interpolate.interpolate('seagreen', d3Hsv.hsv(60, 1, 0.2, 0.4));
iString = d3Interpolate.interpolate('seagreen', 'steelblue'); // as used with valid color name string

// date interpolator
iDate = d3Interpolate.interpolate(new Date(2016, 6, 1), new Date(2016, 6, 31));

// regular string interpolator interpolating number strings (as the strings are not valid color strings)
iString = d3Interpolate.interpolate(1, '5');
iString = d3Interpolate.interpolate('a: 1', 'a: 5');
iString = d3Interpolate.interpolate(new StringCoercible('a: 1'), 'a: 5');

iArrayNum = d3Interpolate.interpolate(['1', '2'], [4, 8]);
iArrayStr = d3Interpolate.interpolate(['1', '2'], ['4', '8']);
// two element array with first element date and second element string
iArrayMixed = d3Interpolate.interpolate<[Date, string]>([new Date(2016, 6, 1), 'b: 2'], [new Date(2016, 6, 31), 'b: 8']);

// Coercible to number

iNum = d3Interpolate.interpolate(12, new NumCoercible(20));
iNum = d3Interpolate.interpolate(new NumCoercible(2), new NumCoercible(20));

// Key Value

iKeyVal = d3Interpolate.interpolate({ x: 0, y: 1 }, { x: 1, y: 10, z: 100 });

// test interpolate(a, b) signature ----------------------------------------------------

iNum = d3Interpolate.interpolate('1', 5);


// color interpolator returning a color string
iString = d3Interpolate.interpolate('seagreen', d3Color.rgb(100, 100, 100));
iString = d3Interpolate.interpolate('seagreen', d3Hsv.hsv(60, 1, 0.2, 0.4));
iString = d3Interpolate.interpolate('seagreen', 'steelblue'); // as used with valid color name string

// date interpolator
iDate = d3Interpolate.interpolate(new Date(2016, 6, 1), new Date(2016, 6, 31));

// regular string interpolator interpolating number strings (as the strings are not valid color strings)
iString = d3Interpolate.interpolate(1, '5');
iString = d3Interpolate.interpolate('a: 1', 'a: 5');
iString = d3Interpolate.interpolate(new StringCoercible('a: 1'), 'a: 5');

iArrayNum = d3Interpolate.interpolate(['1', '2'], [4, 8]);
iArrayStr = d3Interpolate.interpolate(['1', '2'], ['4', '8']);
// two element array with first element date and second element string
iArrayMixed = d3Interpolate.interpolate<[Date, string]>([new Date(2016, 6, 1), 'b: 2'], [new Date(2016, 6, 31), 'b: 8']);

// Coercible to number

iNum = d3Interpolate.interpolate(12, new NumCoercible(20));
iNum = d3Interpolate.interpolate(new NumCoercible(2), new NumCoercible(20));

// Key Value

iKeyVal = d3Interpolate.interpolate({ x: 0, y: 1 }, { x: 1, y: 10, z: 100 });

iDate = d3Interpolate.interpolate(new Date(2016, 6, 1), new Date(2016, 6, 31));

// regular string interpolator interpolating number strings (as the strings are not valid color strings)
iString = d3Interpolate.interpolate(1, '5');
iString = d3Interpolate.interpolate('a: 1', 'a: 5');
iString = d3Interpolate.interpolate(new StringCoercible('a: 1'), 'a: 5');

iArrayNum = d3Interpolate.interpolate(['1', '2'], [4, 8]);
iArrayStr = d3Interpolate.interpolate(['1', '2'], ['4', '8']);
// two element array with first element date and second element string
iArrayMixed = d3Interpolate.interpolate<[Date, string]>([new Date(2016, 6, 1), 'b: 2'], [new Date(2016, 6, 31), 'b: 8']);

// Coercible to number

iNum = d3Interpolate.interpolate(12, new NumCoercible(20));
iNum = d3Interpolate.interpolate(new NumCoercible(2), new NumCoercible(20));

// Key Value

iKeyVal = d3Interpolate.interpolate({ x: 0, y: 1 }, { x: 1, y: 10, z: 100 });

d3Interpolate.interpolate(new NumCoercible(1), new NumCoercible(5));
d3Interpolate.interpolate({ a: 1 }, new NumCoercible(5));

// test interpolateNumber(a, b) signature ----------------------------------------------------

iNum = d3Interpolate.interpolateNumber(0, 100);
iNum = d3Interpolate.interpolateNumber(new NumCoercible(0), new NumCoercible(100));
num = iNum(0.5);

// test interpolateNumber(a, b) signature ----------------------------------------------------

function(d) {
      const interpolator = interpolate(d.endAngle, newAngle);

      return t => {
        d.endAngle = interpolator(t); // eslint-disable-line no-param-reassign

        return arc(d);
      };
    }
  )

.attrTween("d", function(d) {
				const updated = $$.updateAngle(d);

				if (!updated) {
					return () => "M 0 0";
				}

				if (isNaN(this._current.startAngle)) {
					this._current.startAngle = 0;
				}

				if (isNaN(this._current.endAngle)) {
					this._current.endAngle = this._current.startAngle;
				}

				const interpolate = d3Interpolate(this._current, updated);

				this._current = interpolate(0);

				return function(t) {
					const interpolated = interpolate(t);

					interpolated.data = d.data; // data.id will be updated by interporator
					return $$.getArc(interpolated, true);
				};
			})
			.attr("transform", withTransform ? "scale(1)" : "")

this.destination = data

    // Update the interpolators
    for (let key in this.destination) {
      if (!Object.prototype.hasOwnProperty.call(this.destination, key)) {
        continue
      }
      if (ignore.indexOf(key) > -1) {
        this.interpolators[key] = null
        continue
      }
      if (this.origin[key] === this.destination[key]) {
        this.interpolators[key] = null
        continue
      }
      this.interpolators[key] = interpolate(
        this.origin[key],
        this.destination[key]
      )
    }

    // Reset the startTime and the progress
    this.startTime = now()
    this.progress = 0
    if (!this.wasAnimating) {
      this.lastRenderTime = now()
    }

    // Be sure to render the origin frame
    this.renderProgress()

    // Animate if needed

return function (d: DefaultArcObject) {
        const startInterpolate = d3Interpolate(d.startAngle, startAngle);
        const endInterpolate = d3Interpolate(d.endAngle, endAngle);
        return function (t: number): string {
            d.startAngle = startInterpolate(t);
            d.endAngle = endInterpolate(t);
            return arc(d)!;
        };
    };
}

        { ...gribs1[0], data: gribs1[0].data.map((d, i) => interpolate(d, gribs2[0].data[i])(k)) },
        { ...gribs1[1], data: gribs1[1].data.map((d, i) => interpolate(d, gribs2[1].data[i])(k)) },

function(d) {
      const newAngle = type === TRANSITION.OUT ? START_ANGLE : d;
      const interpolator = interpolate(this._current, newAngle);

      this._current = interpolator(0);

      return t => arc(interpolator(t));
    }
  )

_animateValue(newAngle) {
    const interpolateFn = interpolate(this._current, newAngle);

    this._current = interpolateFn(0);

    return t => this.arc(interpolateFn(t));
  }
}