typescript类型的相关问题，该怎么修改类型定义？

Question

下面这个贴图中的告警怎么去除呢，需要怎么修改呢？

代码如下：

import PbfLayer from './MVTImageryProvider';

interface State{
    mapInstance: Map,
    pbfLayerInstance: PbfLayer
};

const state: State = reactive({
    mapInstance: {} as Map,
    pbfLayerInstance: {} as  PbfLayer
});

问题补充：

实例化后为其赋值时 ts警告：类型实例化过深，且可能无限

const pbfLayer = new PbfLayer();
await pbfLayer.initPbfLayer(
      'http://xxx.xx.xx.xx:xxxx/sj_vector/v6/api/style/10001/style.json?ak=mf72ff9295c740ec0f37e61433e8a3ad8d&mapbox=1',
      state.mapInstance.viewer
    );
state.pbfLayerInstance = pbfLayer;

PbfLayer这个类中的完整代码如下:

import MVTImageryProvider from '@/components/Map/MVTImageryProvider/lib';
import type { StyleSpecification, LayerSpecification } from '@/components/Map/MVTImageryProvider/lib';
import { ImageryProvider, ImageryLayer, Viewer } from 'cesium';
export * from '@/components/Map/MVTImageryProvider/lib';
import { cloneDeep } from 'lodash';
import axios from 'axios';

export default class PbfLayer {
  providers: MVTImageryProvider[] = [];
  layersSpecification: LayerSpecification[] = [];
  pbfLayers: ImageryLayer[] = [];

  defaultLon = 107.21833;
  defaultLat = 33.22319;
  defaultHeight = 9500000;
  /**
   * 初始化pbf图层
   */
  initPbfLayer = async (style: StyleSpecification | string, viewer: Viewer): Promise<boolean> => {
    return new Promise<boolean>(async (resolve, reject) => {
      const styles: StyleSpecification[] = []
      if (typeof style === 'string') {
        const { data } = await axios.get<StyleSpecification>(style);
        this.layersSpecification = data.layers;
        data.layers.forEach((layer) => {
          const newStyleItem = cloneDeep(data);
          newStyleItem.layers = [layer];
          newStyleItem.sources = {[layer.source]: data.sources[layer.source]};
          styles.push(newStyleItem)
        });
        if (data.center) {
          this.defaultLon = data.center[0];
          this.defaultLat = data.center[1];
        }
      };
      if (styles.length) {
        const providers = await this.createProvider(styles);
        this.addPbfProvide(viewer, providers);
      };
      resolve(true)
    })
  };
  /**
   * 创建一组MVTImageryProvider实例，并等待其异步初始化完成
   */
  private createProvider = (styles: StyleSpecification[]): Promise<MVTImageryProvider[]> => {
    const pList: MVTImageryProvider[] = [];
    return new Promise<MVTImageryProvider[]>(async (resolve, reject) => {
      const list = styles.map((style) => {
        const p = new MVTImageryProvider({ style });
        pList.push(p)
        return p.readyPromise
      })
      await Promise.all(list);
      resolve(pList)
    })
  };
  /**
   * 使用给定的MVTImageryProvider创建其栅格图层
   * 该操作将返回创建的图层并添加到当前图层集合，并展示倒地球
   */
  private addPbfProvide = (viewer: Viewer, providers: MVTImageryProvider[]) => {
    providers.forEach(provider => {
      const layer = viewer.imageryLayers.addImageryProvider(provider as unknown as ImageryProvider);
      this.pbfLayers.push(layer);
    });
    this.providers = providers
  };
  /**
   * 更新图层
   * 这里的更新实际上是修改provider对象，重新添加生成新的图层
   */
  updatePbfLayer = async (
    viewer: Viewer,
    layerSpecification: LayerSpecification
  ): Promise<ImageryLayer | undefined> => {
    if (this.providers.length === 0) {
      console.error('未初始化');
      return;
    };
    // 拿到要操作的图层在当前layer.imageryLayers中的索引
    const allLayerIndex = this.getLayerIndexByLayerSpecification(viewer, layerSpecification);
    // 因为layer.imageryLayers包含地球中默认的瓦片图层，这里先获取非pbfLayer图层的数量
    const defaultLayerNum = viewer.imageryLayers.length - this.pbfLayers.length;
    // 计算该图层在pbfLayer列表中的索引
    const pbfLayerIndex = allLayerIndex - defaultLayerNum;
    /**
     * 深拷贝一份该索引对应图层的原有的style对象，
     * 将新的样式更新到layers第一项，
     * 这里更新到第一项，是因为接下来要单独重新渲染这一个图层
     */
    const style = cloneDeep(this.providers[pbfLayerIndex].style);
    style.layers[0] = layerSpecification;
    /**
     * 使用样式创建MVTImageProvider实例，
     * 创建新图层并将新图层设置到旧图层的上层
     */
    const newProviders = await this.createProvider([style]);
    const newProvider = newProviders?.[0];
    if (!newProvider) return;
    this.pbfLayers[pbfLayerIndex] = viewer.imageryLayers.addImageryProvider(newProvider as unknown as ImageryProvider, allLayerIndex + 1);
    this.providers[pbfLayerIndex] = newProvider;
    /**
     * 延迟移除旧的图层，避免出现新图层正在载时的空白闪烁
     * 新图层正在加载是指，矢量瓦片的网络请求耗时这段时间。
     */
    setTimeout(() => {
      viewer.imageryLayers.remove(viewer.imageryLayers.get(allLayerIndex))
    }, 1000)
  };
  /**
   * 通过样式配置信息获取其所在图层的图层index
   */
  getLayerIndexByLayerSpecification = (viewer: Viewer, layerSpecification: LayerSpecification): number => {
    function getLayer(index: number): number {
      const layer = viewer.imageryLayers.get(index);
      if (!layer) return -1;
      if (layer.imageryProvider instanceof MVTImageryProvider) {
        if (layer.imageryProvider.style.layers[0]["source-layer"] === layerSpecification['source-layer']) {
          return index
        };
        return getLayer(index + 1);
      };
      return getLayer(index + 1);
    };
    return getLayer(0);
  }
}

Answer 1

你似乎搞错了概念，reactive() 的返回值不可能是 State，如下：

// number
const a = 1;
// 并不是 number，而是 Ref<number>
const b = ref(2);

在你的场景中，应当使用的是泛型来做限制，而不是去显式声明 state 的类型：

const state = reactive<State>({
  // ....
})

参见：

• reactive()