在 angular 中出現打字稿錯誤，無法正確綁定

Question

const stateObj = {
        indicators: stateIndicators,
        filters: stateFilters,
        benchmarks: stateBenchmarks,
        request: stateRequest,
        ready: stateReady,
        visualization: stateVisualization,
        dimensions: stateDimensions,
        datasets: stateDatasets
      };

extend({
        getDefaultIndicators: function () {
          return stateObj.indicators.enabledIndicators
            .map((indicator) => find(stateObj.indicators.indicators, { name: indicator }));
        },
        getEnabledIndicators: function () {
          return this.request.indicators
            .map((i) => find(stateObj.indicators.indicators, { name: i }));
        },
        getEnabledBenchmarks: function () {
          return filter(stateObj.benchmarks, 'selected');
        },
        save: function () {
          if (tile) { return; }
          let serializedState = this.serialize();
          this.userStorage.saveExploreState(entity, serializedState);
        },
        serialize: function () {
          return {
            request: this.request,
            benchmarks: map(this.getEnabledBenchmarks(), 'name'),
            visualization: this.visualization,
            dimensions: this.dimensions,
            datasetId: datasetId
          };
        }
      }, stateObj);

Property 'request' does not exist on type '{ getDefaultIndicators: () => (Indicator | undefined)[]; getEnabledIndicators: () => any; getEnabledBenchmarks: () => { selected: boolean; name: string; }[]; save: () => void; serialize: () => any; }

Extend 是 lodash 函數，我收到“this.dimensions”、“this.visualization”的類型錯誤，因為“this”未與 stateObj 綁定，而且“this.userStorage”是類屬性，如何解決此問題。

Answer 1

使用箭頭函數綁定此上下文。

嘗試這個：

extend({
        getDefaultIndicators: () => {
          return stateObj.indicators.enabledIndicators
            .map((indicator) => find(stateObj.indicators.indicators, { name: indicator }));
        },
        getEnabledIndicators:  () => {
          return this.request.indicators
            .map((i) => find(stateObj.indicators.indicators, { name: i }));
        },
        getEnabledBenchmarks: ()=> {
          return filter(stateObj.benchmarks, 'selected');
        },
        save:() => {
          if (tile) { return; }
          let serializedState = this.serialize();
          this.userStorage.saveExploreState(entity, serializedState);
        },
        serialize: ()=> {
          return {
            request: this.request,
            benchmarks: map(this.getEnabledBenchmarks(), 'name'),
            visualization: this.visualization,
            dimensions: this.dimensions,
            datasetId: datasetId
          };
        }
      }, stateObj);