reactjs - react - typescript tutorial pdf

Archivos de declaración personalizados de TypeScript para módulos npm sin tipo

Question

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

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 en el archivo ./typings/shiitake.d.ts y en el Código VS, veo el siguiente error:

[ts] Nombre de módulo no válido en aumento. El módulo ''shiitake'' se resuelve en un módulo sin tipo en ''d: /dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js'', que no se puede aumentar.

Por el lado del consumo, todavía recibo el mismo error incluso con la declaración anterior (ya que no tengo noImplicitAny interruptor del compilador no noImplicitAny ):

/// <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 razón estándar por la que se adquieren archivos de declaración para este tipo de módulos es a través de @types/ way y funciona bien. Sin embargo, no puedo obtener el trabajo de mecanografía personalizada. ¿Alguna idea?

Answer 1

En mi experiencia, un archivo de definición fallará de esta manera si tiene exportaciones o importaciones declaradas fuera de la definición del módulo. Si utiliza un IDE con importación automática, ¡tenga cuidado!

Answer 2

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

Una declaración del formulario declare module ''...'' { } en un módulo es un aumento. Para obtener más detalles, consulte Aumento del módulo de Typescript .

Así que quieres que este archivo se vea como:

declare module ''shiitake'' {

    import * as React from ''react'';

    export interface ShiitakeProps {
        lines: number;
    }

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

Answer 3

Tuve el mismo problema hoy.

Resulta que pego interfaces exportadas fuera de la declaración del módulo. El archivo de mecanografía que usé como plantilla tenía interfaces privadas al final del archivo.

Así que mis interfaces exportadas fueron declaradas fuera de la declaración del módulo. Se trata de unidades de tuercas del compilador de scripts.

Una vez que moví las interfaces a los límites del módulo, todo se arregló.