当使用带有TypeScript的openlayers时，如何修复'TileSource类型上的'Property'setTileUrlFunction'不存在'错误

Question

我正在尝试在带有typescript的react js项目中使用openlayers。但是出现错误，提示Property 'setTileUrlFunction' does not exist on type 'TileSource'

我使用yarn add ol安装了ol。最初，导入declarations file could not be found时出现import Map from 'ol/Map'错误。我安装了@types/openlayers，似乎根本没有帮助。然后我做了yarn add @types/ol。这消除了声明错误。但是现在使用setTileUrlFunction时出现上述错误。

这是我编写的组件。我正在尝试使用openlayers渲染高分辨率图像。图片取自openseadragon website。

import React, { Component } from 'react';
import Zoomify from 'ol/source/Zoomify';
import Tile from 'ol/layer/Tile';
import Map from 'ol/Map';
import View from 'ol/View';

export default class EditProject extends Component {
  componentDidMount() {
    const imgWidth = 7026;
    const imgHeight = 9221;

    const zoomifyUrl = 'https://openseadragon.github.io/example-images/highsmith/highsmith_files/{z}/{x}_{y}.jpg';

    const source = new Zoomify({
      url: zoomifyUrl,
      size: [imgWidth, imgHeight],
      crossOrigin: 'anonymous'
    });

    const layer = new Tile({ source })

    layer.getSource().setTileUrlFunction(function(tileCoord: any) {
      let z: any = tileCoord[0]+8
      let x: any = tileCoord[1]
      let y: any =  -(tileCoord[2]+1)
      return zoomifyUrl.replace(
        '{z}', z
      ).replace(
        '{x}', x
      ).replace(
        '{y}', y
      );
    });

    const extent = [0, -imgHeight, imgWidth, 0];

    const map = new Map({
      layers: [layer],
      target: 'mapContainer',
      view: new View({
        resolutions: layer.getSource().getTileGrid().getResolutions(),
        extent
      })
    });
  }

  render() {
    return (
      <div ref="mapContainer"></div>
    )
  }
} 

由于错误，图像无法渲染。