javascript - 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，如下：

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

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

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

参见：

• reactive()