When i try to compile typescript code into javascript, getting **Type 'NodeListOf<Element>' is not an array type or a string type**

Related searches

When i try to compile typescript code into javascript, getting Type 'NodeListOf' is not an array type or a string type.

if (query.length) {                                              
  var regex = new RegExp("(" + query + ")", "gm"); 
  var li = document.querySelectorAll("#id li"); //error                 
    for (var Element of li){                                   
      Element.innerHTML = Element.innerHTML.replace(regex, '<span class="classname">$1</span>'); 

The below compiles fine and I've added comments inline.

let query = '';
if (query.length) {
    var pattern = new RegExp("(" + query + ")", "gim");
    var li: NodeListOf<Element> = document.querySelectorAll("#test li");
    // ES5 does not allow TS iteration of NodeListOf<Element> nor use of Array.from 
    // so it is necessary to loop over it manually.
    // Note that Element is an existing type which caused a conflict with "(var Element of list)".
    // It was necessary to rename Element to element.
    for (let i = 0; i < li.length; i++) {
        let element = li[i];
        element.innerHTML = element.innerHTML.replace(pattern, '<span class="target">$1</span>');

Handbook - Migrating from JavaScript, During our JS to TS migration, we'll need to separate our input files to prevent if you try running tsc at the root of your project, you should see output files in the built TypeScript will also warn about unreachable code and labels, which you can If, for instance, you don't want TypeScript to compile to JavaScript in the face� Mixed TypeScript and JavaScript projects. It is possible to have mixed TypeScript and JavaScript projects. To enable JavaScript inside a TypeScript project, you can set the allowJs property to true in the tsconfig.json. Tip: The tsc compiler does not detect the presence of a jsconfig.json file automatically.

This does also work:

let elements: any = document.querySelectorAll(".class");
for(let ele of elements) {
     // do stuff

Handbook - tsconfig.json, A project is compiled in one of the following ways: For example, if you were writing a project which uses Node.js version 12 and above, then you could use the� To compile TypeScript into JavaScript you need to have TypeScript installed. To install TypeScript using the Node Package Manager (npm) type the command: npm install -g typescript As long as you don't get any errors (warning are OK) you now have TypeScript installed onto your system.

Try this.. will solve the problems.

if (query.length) {                                              
  var pattern = new RegExp("(" + query + ")", "gim"); 
  var li = document.querySelectorAll("#test li");                 
   for (var Element of <any> li){                                   
      Element.innerHTML = Element.innerHTML.replace(pattern, '<span class="target">$1</span>'); 

TypeScript Compiling with Visual Studio Code, The easiest way to install TypeScript is through npm, the Node.js Package Manager. a working Hello World program, open a terminal and type tsc helloworld.ts . to try out the latest TypeScript features in VS Code is to install the JavaScript� Nevertheless, this change does not bring much change. We still can put normal JS code and get no help from what TypeScript has to offer. In order to TS to force us to actually type our code, we need to change the ‘tsconfig.json’ file. In particular, we will focus on two compiler options that will force our code to be actually typed:

TypeScript Tutorial For Beginners: Your Friendly Guide, TypeScript is a layer because you can write TypeScript code in your editor. A boolean for example can later become string (save the following code in a file named types.js): Now let's try to compile again (npm run tsc) and here it is: Marius Schulz blog**, a software engineer passionate about all the� You use Babel 7 + TypeScript preset to compile, and have the TypeScript compiler only do the type-checking. You use the TypeScript compiler to both type-check and compile your code.

One of the benefits of TypeScript’s compiler is that it can transform code with JavaScript classes into legacy JavaScript code that conforms with pre-2015 standards. TypeScript date

Embed all the JavaScript code into the HTML code. static type-checking. It is done at compile time. whereas TypeScript is a superset of JavaScript. TypeScript code needs to be compiled

  • I'm guessing the error is on the forEach line, not the querySelector line. The problem is what it is saying it is, which is that a NodeList is not an array type. Try [...li] or Array.from(li). Also, why are you looping twice, once with forEach and then again with for...of?
  • @torazaburo after removing for each loop still getting same error.
  • As I said, you have to do for (var Element of Array.from(li)). Or, if you don't have Array.from available, then for (var x = 0; x < li.length; x++) li[x].innerHTML....
  • Weird! Turns out that an absent tsconfig.json file will cause tsc to assume that Array.from is available, even though it's an ES2015 capability. I've corrected.
  • Have you tested this? Casting li to any will suppress the error message, but I'm not sure that it resolves the underlying incompatibility.