CODEWITHSUNDEEP
angular
Naturo Power
Naturo Power

Reputation: 883

Cannot find name in JavaScript file in Angular 4 TypeScript

I have my own script extraQU.js placed in index.html.

<script src="assets/extraQU/extraQU.js"></script>

In users.component.html I have:

<div [innerHTML]="someVar"></div>

In users.component.ts I have:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

export class UserPage {

  constructor(public navCtrl: NavController) {
  }

  someVar = extraQU(
    {
      numbers: [1, 3, 2, 0, 1, 0],
      letters: ['T', 'C', 'D', 'G', 'A', 'E'],
    }, 'letters'
  );

}

This works fine.

[innerHTML]="someVar" displays my function extraQU.

extraQU.js

render in user.component.html some <table> <td> <tr> etc...

I am satisfied.

But, I don't know why TypeScript highlights in red extraQU and show:

[ts] Cannot find name "extraQU". any

But, I have extraQU

function extraQU(object, show) {
   ...
}

in <script src="assets/extraQU/extraQU.js"></script> in index.html

In plain JS Website I used:

<script>
   var elem = document.getElementById('someVar');

   elem.innerHTML = extraQU(
       {
           numbers: [1, 3, 2, 0, 1, 0],
           letters: ['T', 'C', 'D', 'G', 'A', 'E'],
       }, 'letters'
   );
</script>

But how to make it work in TypeScript?

Upvotes: 2

Views: 2078

Answers (1)

santosh singh
santosh singh

Reputation: 28652

declare the extraQU variable on the top of the class

declare var extraQU:any;

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var extraQU:any;
export class UserPage {

  constructor(public navCtrl: NavController) {
  }

  someVar = extraQU(
    {
      numbers: [1, 3, 2, 0, 1, 0],
      letters: ['T', 'C', 'D', 'G', 'A', 'E'],
    }, 'letters'
  );

}

Upvotes: 6

Related Questions