reactjs - Archivos de declaración personalizados de TypeScript para módulos npm no tipados

Estoy consumiendo un componente de React llamado shiitake de npm en mi proyecto donde uso TypeScript. Esa biblioteca no tiene declaraciones de TypeScript, así que pensé en escribir una. El archivo de declaración se ve como se muestra a continuación (puede que no esté completo, pero no te preocupes demasiado por ello):

import * as React from 'react';

declare module 'shiitake' {

    export interface ShiitakeProps {
        lines: number;
    }

    export default class Shiitake extends React.Component<ShiitakeProps, any> { 
    }
}

He puesto esto dentro del archivo ./typings/shiitake.d.ts y en VS Code, estoy viendo el siguiente error:

[ts] Nombre de módulo inválido en la ampliación. El módulo 'shiitake' se resuelve a un módulo sin tipos en 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js', que no se puede ampliar.

En el lado del consumo, todavía estoy obteniendo el mismo error incluso con la declaración anterior (ya que tengo activada la opción noImplicitAny del compilador):

/// <reference path="../../../../typings/shiitake.d.ts" />
import * as React from 'react';
import Shiitake from 'shiitake';

[ts] No se pudo encontrar un archivo de declaración para el módulo 'shiitake'. 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js' tiene implícitamente un tipo 'any'.

La forma estándar de adquirir archivos de declaración para este tipo de módulos es a través de @types/ y funciona bien. Sin embargo, no puedo hacer que funcionen los tipos personalizados. ¿Alguna idea?

Respuesta #1

La declaración declare module 'shiitake'; debe estar en un ámbito global. Es decir, una declaración a nivel superior en un archivo que no sea un módulo (donde un módulo es un archivo con al menos un import o export a nivel superior).

Una declaración de la forma declare module '...' { } en un módulo es una ampliación. Para más detalles, vea la Ampliación de Módulos en Typescript.

Entonces quieres que este archivo se vea así:

declare module 'shiitake' {

    import * as React from 'react';

    export interface ShiitakeProps {
        lines: number;
    }

    export default class Shiitake extends React.Component<ShiitakeProps, any> { 
    }
}

Respuesta #2

En mi experiencia, un archivo de definición fallará de esta manera si tiene cualquier exportación o importación declarada fuera de la definición del módulo. ¡Si usas un IDE con auto-importación, ten cuidado!