Búsqueda de sitios web

reactjs - Definiendo tipados para el módulo npm react en TypeScript


Estoy tratando de definir los tipos para un módulo de React, react-input-autosize, para usarlo en un proyecto de TypeScript. El módulo no tiene tipos preparados.

Agregué un directorio react-input-autosize a typings/modules. Luego agregué un archivo index.d.ts al nuevo directorio. Llené el nuevo archivo con mi comprensión de la estructura del módulo importado (la cual es aceptada por el compilador de TypeScript):

/// <reference path="../../globals/react/index.d.ts" />
/// <reference path="../../globals/react-dom/index.d.ts" />

declare module 'react-input-autosize' {
  import * as React from "react"
  import * as ReactDOM from "react-dom"

  export interface AutosizeInputProps extends React.Props<any>{
      className?: string,     
      defaultValue?: any,     
      inputClassName?: string,
      inputStyle?: any, 
      minWidth?: number,
      onKeyDown?: (x:any) => void,
      onChange?: (x:any) => void,
      placeholder?: string,
      placeholderIsMinWidth?: boolean,
      style?: any,  
      value?: string,
      readOnly?: boolean,
      autoFocus?: boolean,
      type?: string
    }

  export class AutosizeInput extends React.Component<AutosizeInputProps, any> {
      constructor(props? : AutosizeInputProps, context? : any);

      greeting: string;
      showGreeting(): void;
  }

  export default AutosizeInput;
}

En este punto, la importación del módulo en el proyecto empezó a tener éxito, en el sentido de que ya no recibo errores de "módulo no encontrado" al hacer:

import AutosizeInput from 'react-input-autosize';

Instanciar la clase AutosizeInput desafortunadamente ahora no funciona en tiempo de ejecución, ya que AutosizeInput resulta ser indefinido.

En un archivo que no es de TypeScript dentro del mismo proyecto, entonces import AutosizeInput from 'react-input-autosize'; todavía funciona, por lo que el módulo se importa correctamente desde npm cuando no tiene tipado.

Respuesta #1

Tu importación default:

import AutosizeInput from 'react-input-autosize';

Intentará importar la exportación default. Pero el módulo react-input-autosize no tiene una exportación por defecto. ¿Puedes intentar con:

import * as AutosizeInput from 'react-input-autosize';

Y eliminando default de tu exportación:

export = AutosizeInput;

Espero que ayude.

Artículos relacionados