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,
}
Share
Improve this question
edited Apr 14, 2020 at 13:46
17xande
asked Apr 14, 2020 at 13:31
17xande17xande
2,8133 gold badges27 silver badges33 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
2 Answers
Reset to default 2Make 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
版权声明:本文标题:javascript - TypeScript equivalent of Array.from() - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742192518a2430466.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论