ionic2 TypeScript显示错误:找不到名称'google'和'$',但谷歌地图和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>

应用程序内的谷歌地图和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 '...';

我不知道谷歌的API来分型的文件,所以你还不如用上述速战速决只是使用谷歌.