Блог

Я пытаюсь определить типы для модуля react, react-input-autosize , для использования в проекте typescript. Модуль не имеет готовых типов.

Я добавил каталог react-input-autosize в typings/modules . Затем я добавил файл index.d.ts в новый каталог. Я заполнил новый файл своим пониманием структуры импортированного модуля (который принимается компилятором 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;
}
  

На этом этапе импорт модуля в проект начался успешно, в том смысле, что я больше не получаю ошибок «модуль не найден», выполняя:

 import AutosizeInput from 'react-input-autosize';
  

Создание экземпляра AutosizeInput класса, к сожалению, теперь не работает во время выполнения, так как AutosizeInput результаты не определены.

В файле, отличном от typescript, в том же проекте все import AutosizeInput from 'react-input-autosize'; еще работает, поэтому модуль корректно импортируется из npm, когда он не типизирован.

Вы default импортируете:

 import AutosizeInput from 'react-input-autosize';
  

Попытается импортировать default экспорт. Но модуль react-input-autosize не имеет экспорта по умолчанию. Можете ли вы попробовать с:

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

И удаление default из вашего экспорта:

 export = AutosizeInput;
  

Надеюсь, это поможет.