, wie Tippfehler Eigenschaft Charts gibt es nicht auf Typ "Typof Google" in Google-Säulendiagramm

Question

Ich versuche, Google-Säulendiagramm in angular2 und typescript.Aber ich habe die Fehlereigenschaft Charts existiert nicht auf Typ 'typeof Google 'in Google-Säulendiagrammen.Wenn ich den Befehl npm starte, dann zeigt es Fehler. Hier mein Code

google.charts.load('44', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawColColors); 

function drawColColors() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('timeofday', 'Time of Day'); 
     data.addColumn('number', 'Motivation Level'); 
     data.addColumn('number', 'Energy Level'); 

     data.addRows([ 
      [{v: [8, 0, 0], f: '8 am'}, 10, 7,], 
      [{v: [9, 0, 0], f: '9 am'}, 6, 8], 
      [{v: [10, 0, 0], f:'10 am'}, 3, 9], 
      [{v: [11, 0, 0], f: '11 am'}, 4, 2.25], 
      [{v: [10, 0, 0], f:'10 am'}, 3, 8], 
      [{v: [11, 0, 0], f: '11 am'}, 4, 6], 
     ]); 

     var options = { 
      colors: ['#9575cd', '#33ac71','#FF0000','#FFFF00'], 
      legend: 'none', 
      bar: {groupWidth: "80%"}, 
      hAxis: { 
       textPosition: 'none', 
        gridlineColor: '#fff', 
      }, 
      vAxis: { 
      //baselineColor: '#fff', 
      gridlineColor: '#fff', 
      textPosition: 'none' 

      } 
     }; 

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 
     } 

bekam ich folgende error.Please mir helfen, wie zu lösen.

D:\Veraction1st\ows-veraction-repo>npm start 

    > angular2-app@0.0.0 start D:\Veraction1st\ows-veraction-repo 
    > gulp serve.dev --color 

    [15:11:24] Requiring external module ts-node/register 
    TSError: ? Unable to compile TypeScript 
    app\pages\item-details\components\item_details.ts (113,8): Property 'charts' doe 
    s not exist on type 'typeof google'. (2339) 
    app\pages\item-details\components\item_details.ts (114,8): Property 'charts' doe 
    s not exist on type 'typeof google'. (2339) 
    app\pages\item-details\components\item_details.ts (152,44): Property 'ColumnChar 
    t' does not exist on type 'typeof visualization'. (2339) 
     at getOutput (D:\Veraction1st\ows-veraction-repo\node_modules\ts-node\src\ts 
    -node.ts:210:13) 
     at Object.loader (D:\Veraction1st\ows-veraction-repo\node_modules\ts-node\sr 
    c\ts-node.ts:225:23) 
     at Module.load (module.js:458:32) 
     at tryModuleLoad (module.js:417:12) 
     at Function.Module._load (module.js:409:3) 
     at Module.require (module.js:468:17) 
     at require (internal/module.js:20:19) 
     at Liftoff.handleArguments (D:\Veraction1st\ows-veraction-repo\node_modules\ 
    gulp\bin\gulp.js:116:3) 
     at Liftoff.<anonymous> (D:\Veraction1st\ows-veraction-repo\node_modules\lift 
    off\index.js:198:16) 
     at module.exports (D:\Veraction1st\ows-veraction-repo\node_modules\flagged-r 
    espawn\index.js:17:3) 

    npm ERR! Windows_NT 6.3.9600 
    npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\ 
    node_modules\\npm\\bin\\npm-cli.js" "start" 
    npm ERR! node v6.3.1 
    npm ERR! npm v3.10.3 
    npm ERR! code ELIFECYCLE 
    npm ERR! angular2-app@0.0.0 start: `gulp serve.dev --color` 
    npm ERR! Exit status 1 
    npm ERR! 
    npm ERR! Failed at the angular2-app@0.0.0 start script 'gulp serve.dev --color'. 

    npm ERR! Make sure you have the latest version of node.js and npm installed. 
    npm ERR! If you do, this is most likely a problem with the angular2-app package, 

    npm ERR! not with npm itself. 
    npm ERR! Tell the author that this fails on your system: 
    npm ERR!  gulp serve.dev --color 
    npm ERR! You can get information on how to open an issue for this project with: 
    npm ERR!  npm bugs angular2-app 
    npm ERR! Or if that isn't available, you can get their info via: 
    npm ERR!  npm owner ls angular2-app 
    npm ERR! There is likely additional logging output above. 

    npm ERR! Please include the following file with any support request: 
    npm ERR!  D:\Veraction1st\ows-veraction-repo\npm-debug.log 

Answer 1

Try

declare let google:any 

vor Ihrer Komponente Erklärung hinzuzufügen:

import { Component } from '@angular/core' 

declare let google:any 

@Component({ 
    selector:'your-selector', 
    template: '<div id="chart_div"></div>' 
}) 
export class YourComponent implements OnInit { 


}