如何在 TypeScript 中将 HTMLLIElement 转换为数组答案

【问题标题】：How to convert an HTMLLIElement to an array in TypeScript如何在 TypeScript 中将 HTMLLIElement 转换为数组
【发布时间】：2020-03-22 01:07:18
【问题描述】：

我有这个代码：

const listItems = Array.from(document.querySelectorAll('li'));
listItems.splice(0, 0, '');

它给了我一个错误 '""' 类型的参数不能分配给 'HTMLLIElement' 类型的参数。(2345)

我已经在使用 Array.from，为什么 Typescript 不明白这是一个数组而不是 HTMLLIElement

游乐场： https://www.typescriptlang.org/play/index.html?ssl=2&ssc=28&pln=1&pc=1#code/MYewdgzgLgBANgS2gSSgUwLYRgXhgQQCdCBDATwDoAzQkDACgBMRgBXDNMKCgR1bUJkAymjhpgUEIXxw49AOSJ5ASmUBuAFCIU6LBQgAHRMDT0ADABoYlmPJVqgA

【问题讨论】：

那么您是否尝试 1）查询文档中的 <li> 元素，2）然后从每个元素中提取文本并将其放入数组中，3）最后尝试插入一个项目在索引0?如果是这样，您似乎还没有完成第 2 步来提取 textContent，因此 listItems 仍然是一个 html 元素数组，您将无法使用非 html 元素值修改该数组。
这只是显示错误的简化测试，我只是不明白为什么打字稿不将其视为数组。不要试图理解它背后的逻辑，更多的是如何告诉 typescript 这是一个数组
它确实将其视为一个数组，错误是说，您不能将string 类型的项添加到HTMLLIElement 类型的数组中。 '' 在splice 的第三个参数中是有问题的string。如果要在其中拼接一个string，则需要制作string的数组和数组。
好吧，你有一个解决方案，所以它不会把它看作一个数组而是一个数组？因为我用 Array.from 将它转换为数组
是的，我添加了一个答案。使用Array.prototype.map 或类似方法，创建一个针对每个<li> 元素的相应属性的数组。然后你可以拼接到那个新的string[] 数组上。

标签： typescript

【解决方案1】：

问题是您试图将string 类型的值（基于Array.prototype.splice 操作的第三个参数）添加到非string[] 类型的数组中。 listItems 是 HTMLLIElement 的数组，它不是 string 的数组。如果您将新创建的<li> 元素拼接到该数组，则不会出现此错误。

如果您尝试创建和修改由每个查询的textContent 元素的textContent 组成的string[] 类型的数组，您可以尝试创建一个新的string[] 数组，以每个@ 的相应属性为目标987654332@元素如textContent:

// query `<li>` elements and create an array of html elements
const listItems: HTMLLIElement[] = Array.from(document.querySelectorAll('li'));
// create array of `string[]` of the text content of each element
const values: (string | null)[] = listItems.map(el => el.textContent);
// execute splice on the new `string[]` array
values.splice(0, 0, '');

【讨论】：