Me acaban de encargar la conversión de un proyecto bastante grande de Javascript a Typescript. Una de las dificultades es que uno de los módulos de terceros que estamos usando también está en Javascript, pero lo ideal sería agregar los tipos para eso también. Este módulo de terceros se usa ampliamente en todo el código base, por lo que nos gustaría agregar los tipos progresivamente.
Entonces, digamos que tenemos dos componentes como este:
// -----| FirstComponentConsumer.tsx |------------------------- import { FirstComponent } from 'third-party'; export const FirstComponentConsumer = () => { return ( <FirstComponent name="pants" /> ); }; // -----| SecondComponentConsumer.tsx |------------------------ import { SecondComponent } from 'third-party'; export const SecondComponentConsumer = () => { return ( <SecondComponent type="text" /> ); }; Ahora, me gustaría agregar los tipos para FirstComponent pero no SecondComponent TODAVÍA. Los agregaré más tarde (en realidad, hay cientos de exportaciones que deberán escribirse). Entonces puedo crear mi archivo de tipos, algo como:
// types.d.ts import type { ReactNode } from 'react'; declare module 'third-party' { export type FirstComponentProps = { name?: string; } export const FirstComponent = (props: FirstComponentProps) => ReactNode; } Esto funciona como se esperaba: FirstComponent ahora está escrito! Pero rompe SecondComponentConsumer porque no he dicho que el módulo third-party exporte un SecondComponent :
Module '"third-party"' has no exported member 'SecondComponent'. TS2305Por supuesto, esto tiene mucho sentido, pero ¿puedo desactivar esta verificación de "tipos no declarados"? ¿O eso es tratar de tener mi pastel y comérmelo también?
Algo como esto podría funcionar, básicamente solo está exportando todo como cualquiera, pero específicamente escribiendo un solo componente. No he probado esto, pero creo que debería funcionar.
declare module "third-party" { const FirstComponent: (name?: string) => ReactNode; type Exports = { FirstComponent: typeof FirstComponent; } & { [key: PropertyKey]: any; } const exports: Exports; export default exports; export { FirstComponent }; }