javascript - TypeScript equivalent of Array.from() - Stack Overflow

admin管理员组

文章数量:1325374

Is there an Array.from() equivalent in TypeScript?
Or, is there a way to use the Array.from() implementation that is found in browsers?

I'm trying to convert a NodeList into an array in order to use array methods.
This is what I would do with vanilla JavaScript:

const divs = document.querySelectorAll('div');
const arrDivs = Array.from(divs);
const result = arrDivs.map(e => {...});

Array.from() is not available in TypeScript, it has it's own Array implementation.

So I think I would have to cast it to an Element[] or a HTMLElement[] like this:

const arrDivs = <HTMLElement[]>divs;

But then I get the following error:

Conversion of type 'NodeListOf' to type 'HTMLElement[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type 'NodeListOf' is missing the following properties from type 'HTMLElement[]': pop, push, concat, join, and 14 more.

So then I instead have to first cast the NodeList to an unknown and then to the HTMLElement[]:

const arrDivs = <HTMLElement[]><unknown>divs;

This seems to disregard the inherent type safety of TypeScript. So I'm wondering if there's a better or more correct way to do this? Or some way to call the native Array.from() function found in modern browsers?

UPDATE
My piler is telling me that Property 'from' does not exist on type 'ArrayConstructor'.

Here are my piler options:

"pilerOptions": {
   "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    // Linting rules:
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
}

Is there an Array.from() equivalent in TypeScript?
Or, is there a way to use the Array.from() implementation that is found in browsers?

I'm trying to convert a NodeList into an array in order to use array methods.
This is what I would do with vanilla JavaScript:

const divs = document.querySelectorAll('div');
const arrDivs = Array.from(divs);
const result = arrDivs.map(e => {...});

Array.from() is not available in TypeScript, it has it's own Array implementation.

So I think I would have to cast it to an Element[] or a HTMLElement[] like this:

const arrDivs = <HTMLElement[]>divs;

But then I get the following error:

Conversion of type 'NodeListOf' to type 'HTMLElement[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type 'NodeListOf' is missing the following properties from type 'HTMLElement[]': pop, push, concat, join, and 14 more.

So then I instead have to first cast the NodeList to an unknown and then to the HTMLElement[]:

const arrDivs = <HTMLElement[]><unknown>divs;

This seems to disregard the inherent type safety of TypeScript. So I'm wondering if there's a better or more correct way to do this? Or some way to call the native Array.from() function found in modern browsers?

UPDATE
My piler is telling me that Property 'from' does not exist on type 'ArrayConstructor'.

Here are my piler options:

"pilerOptions": {
   "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    // Linting rules:
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
}

• javascript
• arrays
• typescript
• dom

Share Improve this question Follow edited Apr 14, 2020 at 13:46 17xande asked Apr 14, 2020 at 13:31 17xande17xande 2,81333 gold badges2727 silver badges3333 bronze badges 7

• 2 All javascript is available from typescript, not the other way around – Buddy Christ Commented Apr 14, 2020 at 13:33
• 3 Array.from() is not available in TypeScript, it has it's own Array implementation., no, TypeScript doesn't implement anything, it just provides type support for JavaScript. If you can do something in JavaScript, you can do it also in TypeScript - in a safer and better environment – Christian Vincenzo Traina Commented Apr 14, 2020 at 13:33
• 4 Array.from() exists – jcalz Commented Apr 14, 2020 at 13:35
• 1 What are your piler options? – jcalz Commented Apr 14, 2020 at 13:37
• You should be able to use [...divs].map(...). Might also be missing some piler options. – sandrooco Commented Apr 14, 2020 at 13:38

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 2

Make sure you are targeting ES2015 or upwards in tsconfig.json:

"pilerOptions": {
   "target": "es2015"
}

When you omit that field, it defaults to "es3" which is a JS version that Array.from is not a thing.

This worked for me

Use //@ts-ignore above Array.from(divs) line.

Run code.

本文标签： javascriptTypeScript equivalent of Arrayfrom()Stack Overflow