typescript - ionic2 TypeScript 显示错误 : Cannot find name 'google' and '$' , 但谷歌地图和 jquery 仍然有效

Question

我正在尝试使用 TypeScript 构建一个 ionic2 应用程序。

在 index.html 中，我尝试在 cordova.js 之前将 jquery 和 google map JS API 插入其中:

  <!-- Vendor -->
  <script src="https://maps.googleapis.com/maps/api/js?key=XXXXX&signed_in=false"></script>
  <script src="asset/jquery.min.js"></script>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

应用程序内的 google map 和 jquery 工作正常，但只是想知道为什么当我运行“ionic serve”命令时会显示这些错误消息

TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(15,21): Error TS2304: Cannot find name 'google'.
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(30,18): Error TS2304: Cannot find name 'google'.
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(37,24): Error TS2304: Cannot find name 'google'.
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(39,5): Error TS2304: Cannot find name '$'.
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(39,42): Error TS2304: Cannot find name '$'.
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(39,76): Error TS2304: Cannot find name '$'.

这是我在 step1.ts 中的部分代码:

  ngOnInit() {
    this.gmap = new google.maps.Map(document.getElementById('gmap_canvas'), {
            center: {
                lat: 22.280102,
                lng: 114.183751
            },
            zoom: 16,
            streetViewControl: false,
            styles : [{
                featureType: "poi",
                elementType: "labels",
                stylers: [
                    { visibility: "off" }
                ]
            }],
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP]
            },
            overviewMapControl: false,
            mapTypeControl: false,
        });

    this.gmap.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('gmep_center_marker'));

    $('#gmep_center_marker').css({ top: ($('#gmap_canvas').height() / 2) - $('#gmep_center_marker').height() });
  }

Answer 1

简单的解决方法是在文件顶部添加变量声明:

import {...} from '...';

declare var google: any;
declare var $: any;

不过，我建议安装正确的类型定义文件。我知道有一个 JQuery 可以像这样安装:

typings install jquery --ambient --save

然后在顶部的组件文件中添加:

///<reference path="../typings/jquery/jquery.d.ts"/>

import {...} from '...';

我不知道 google api 的类型文件，所以您不妨使用上面提到的快速修复来使用 google。