Estoy usando titiritero y webpack en combinación para un proyecto. Compilo mis archivos en un paquete y luego uso el método addScriptTag en titiritero, y agrego ese archivo al navegador. Además, estoy usando la función de exposición para poder enviar/recibir datos desde el navegador a nodejs, más específicamente, para poder hacer algunas llamadas a la base de datos. Mi dilema es que TypeScript no reconoce estas funciones, ya que en realidad nunca se declaran en mi paquete, sino en el lado de nodejs, así:
await page.exposeFunction("getPlayerFromDB", async (options) => { // Some database call return DB.players.get(options); });Y luego en mis archivos lo hago referencia así:
const player = await getPlayerFromDB(options)Por supuesto, eso arroja un error mecanografiado de: "No se puede encontrar el nombre 'getPlayerFromDB'"
Al principio simplemente @ts-ignore, pero como tengo más de estas funciones expuestas, y debido a que los accesorios para ellas son un poco complejos, sería bueno beneficiarse del autocompletado y la verificación de tipos de mecanografiado. Por lo tanto, descubrí los archivos .d.ts y las funciones de declaración, sin embargo, me encontré con muchos más problemas, que explicaré a continuación.
export declare function getPlayerFromDB( options: Partial<Pick<Player, "name" | "auth" | "ip">> ): Promise<DBUser> | null;e importar como:
import { getPlayerFromDB } from "../utils/puppeteer";Como referencia, ../utilts/puppeteer es el archivo en el que estoy haciendo todas mis declaraciones de función de exposición.
¿Supongo que webpack no puede encontrar el archivo .d.ts? Incluso cuando entro en las opciones del compilador y agrego la extensión .d.ts, o hago referencia a la importación que termina con .d, todavía no puedo encontrar el módulo.
Ahora mecanografiado compila, pero mi código no funciona, recibo el error: "puppeteer_1.getPlayerFromDB) no es una función" Supongo que esto se debe a que webpack lo está convirtiendo en un módulo, pero titiritero espera solo el nombre de la función.
Así que mi pregunta es ¿cómo soluciono esto? Siempre puedo simplemente @ts-ignore cada vez que uso una de las funciones expuestas O simplemente puedo escribir la declaración de función dentro del archivo cada vez que lo uso, pero eso no es realmente práctico.
Finalmente encontré una manera de solucionar esto. No digo que esta sea la solución final, pero esto me permite:
Esencialmente, creé un módulo con funciones que actuarían como envoltorios alrededor de mis funciones de titiritero. Noté que el paquete web no cambia los nombres de las funciones cuando están anidados en otra función. Luego me encontré con el problema de que tendría los mismos nombres de función, ya que tendría una función así:
// Puppeteer exposeFunction declare function getUser(options): DBUser export default module DB { export async function getUser(options): DBUser { return await getUser(options) } }Para evitar esto, cambié el nombre de todas mis funciones de titiritero para incluir un guión bajo, de esa manera podría reconocer fácilmente todas mis funciones nativas de titiritero. Al igual que:
// Puppeteer exposeFunction declare function _getUser(options): DBUser export default module Database { export async function getUser(options): DBUser { return await _getUser(options) } }Ahora, cada vez que creo una función de exposición, mi proceso es