亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Typescript 中,如何在存儲然后從數組訪問所述對象時維護對象類型?

在 Typescript 中,如何在存儲然后從數組訪問所述對象時維護對象類型?

慕容3067478 2021-06-02 09:00:13
在打字稿中,我注意到當我將一個復雜對象放入一個數組中時,當我嘗試從數組中訪問該對象時,它會丟失其類型,而只是變成了類型對象。例如let myArray = return await this.browser.evaluate((sel: string) => Array.from(document.querySelectorAll(sel)), selector)document.querySelectorAll(sel)返回一個NodeList<Element>是ArrayLike。Array.from應該將其NodeList轉換為元素數組,但是一旦形成數組,所有數組元素都會失去它們的Element類型我有一個只接受 type 參數的函數Element,但是當我嘗試將其myArray[0]作為參數傳入該函數時,出現錯誤:Error: Unsupported target type: object我嘗試了很多不同的方法來嘗試讓數組保持其對象類型,因此很難解釋其中的每一個。我想知道如何創建一個Elements數組并讓它們Element在以后訪問時繼續是s 而不是通用objects這是我所做的測試中的更多背景信息我要去這個頁面:https : //www.w3schools.com/html/html_tables.asp 并且我傳遞給評估的選擇器是table[id="customers"] tbody tr這應該與表中出現的 6 行匹配。let test = await this.browser.evaluate((sel: string) => Array.from(document.querySelectorAll(sel)), selector)console.log('testy1: ', test)console.log('testy2: ', test[0])console.log('testy3: ', typeof(test[0]))當我運行上面的代碼時,這是我在控制臺日志中得到的輸出:testy1:  [ {}, {}, {}, {}, {}, {}, {} ]testy2:  {}testy3:  object它似乎匹配從頁面中抓取元素,因為它正確返回了 6 個元素。但也許問題是返回的對象是空的?我不知道。我想我的問題可能與這個問題有關:puppeteer page.evaluate querySelectorAll return empty objects但該問題的解決方案對我不起作用,因為 href 不是對象類型的屬性 Element
查看完整描述

2 回答

?
慕婉清6462132

TA貢獻1804條經驗 獲得超2個贊

這里的問題是您傳遞給的函數page.evaluate是在瀏覽器上下文內(在瀏覽器頁面內)運行的。要將結果從瀏覽器上下文發送到 Node.js 環境,結果將被序列化。


請參閱文檔中的返回類型page.evaluate:


返回: Promise< Serializable > Promise,它解析為的返回值pageFunction


在Serializable這里意味著你的數據將通過傳遞給Node.js的環境JSON.stringify,并有自動解析為您服務。但是,此過程將刪除對象的任何不可序列化的屬性。這就是你最終得到許多空對象的原因。


在 puppeteer 中獲取元素句柄

要獲取頁面上元素的句柄,您需要使用page.$,它會創建一個對象(在您的 Node.js 環境中),該對象鏈接到瀏覽器上下文中的元素。這些句柄也可以傳遞給page.evaluate調用。要查詢多個元素,您可以使用函數page.$$。


代碼示例


這是一個示例,它首先查詢元素,然后將元素句柄傳遞給評估函數以讀取屬性。


const elementHandle = await page.$('a');

const result = await page.evaluate(el => el.href, elementHandle);

打字稿的使用

關于 TypeScript 的問題是,在這種情況下,TypeScript 無法正確預測類型。對于 TypeScript 編譯器來說,這看起來像一個普通的函數調用,而實際上,函數被發送到客戶端執行。因此,在這種情況下,您必須自己轉換類型,否則 Typescript 將僅假定any為參數類型:


const elementHandle = await page.$('a');

const result = await page.evaluate((el: { href: string }) => el.href, elementHandle);


查看完整回答
反對 回復 2021-06-03
  • 2 回答
  • 0 關注
  • 253 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號