Typescript вышел из строя после перехода на npm и webpack для обработки зависимостей в моем проекте. У него есть некоторые странные проблемы с React.Component. Он не позволяет мне передавать два интерфейса, говоря, что для этого требуется один, и будет жаловаться, что у него нет двух, когда у него есть один.

Когда я объявляю такой компонент:

export interface IProps {
  formId: number;
}

export default class FormNavButtons extends React.Component<Iprops, {}> {...}

Я получаю сообщение об ошибке: "Общий тип" $ $ RsRpExt "FromFile: (путь к @types \ React \ index.d.ts), module = JavascriptReferencedFilesModule: указанные внешние файлы. React.Component требует 1 тип аргумент (ы), но получил 2

Понятия не имею, почему, до того, как я начал использовать пакеты из npm, ничего подобного не происходило. Когда я даю ему один аргумент, я получаю сообщение об ошибке: «Компонент универсального типа требует 2 аргумента (ов) типа»

Вот список моих зависимостей:

"@types/react": "^15.0.38",
"@types/react-dom": "^15.5.1",
"awesome-typescript-loader": "^3.2.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"typescript": "^2.4.2",
"webpack": "^3.3.0"

Как я могу заставить это работать? Мне даже не где искать проблему

ИЗМЕНИТЬ

По просьбе Владо Панджича, вот полный пример компонента. Но проблема касается каждого из них.

import * as React from "react";
import FormButton from "./formButton";

export interface IProps {
    formId: number;
    save: Function;
    submitStatus: string;
    saveStatus: string;
    prevId: number;
    nextId: number;
    formNavigation: any;
}

export default class FormNavButtons extends React.Component<IProps, {}> {
    render() {
    return (
        <nav className="form-nav-buttons">
        <div className="flippable-container">
            <div className="form-nav-flippable">
                <FormButton faClass="fa-upload" label="Submit" cssClass="form-nav-submit" showsStatus={true} ajaxCallStatus={this.props.submitStatus}/>
            </div>
        </div>
        <div className="form-nav-button-wrapper">
            <FormButton faClass="fa-backward" label="Previous" clickHandler={this.props.formNavigation} navId={this.props.prevId} />
            <FormButton faClass="fa-floppy-o" label="Save" clickHandler={this.props.save} showsStatus={true} ajaxCallStatus={this.props.saveStatus}/>
            <FormButton faClass="fa-ban" label="Cancel" cssClass="form-nav-cancel" />
            <FormButton faClass="fa-hand-paper-o" label="On Hold" />
            <FormButton faClass="fa-forward" label="Next" clickHandler={this.props.formNavigation} navId={this.props.nextId}/>
        </div>
        </nav>
    );
    }
}

И вот список файлов d.ts:

fi.mvc\node_modules\@types\react\index.d.ts
fi.mvc\node_modules\@types\react-dom\index.d.ts
fi.mvc\node_modules\@types\react-dom\server\index.d.ts
fi.mvc\node_modules\@types\react-dom\test-utils\index.d.ts
fi.mvc\node_modules\ajv\lib\ajv.d.ts
fi.mvc\node_modules\hash.js\lib\hash.d.ts
fi.mvc\node_modules\iconv-lite\lib\index.d.ts
fi.mvc\node_modules\promise\index.d.ts
fi.mvc\node_modules\typescript\lib\lib.d.ts
fi.mvc\node_modules\typescript\lib\lib.dom.d.ts
fi.mvc\node_modules\typescript\lib\lib.dom.iterable.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.collection.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.core.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.generator.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.iterable.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.promise.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.proxy.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.reflect.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.symbol.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.symbol.wellknown.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2016.array.include.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2016.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2016.full.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.full.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.intl.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.object.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.sharedmemory.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.string.d.ts
fi.mvc\node_modules\typescript\lib\lib.es5.d.ts
fi.mvc\node_modules\typescript\lib\lib.es6.d.ts
fi.mvc\node_modules\typescript\lib\lib.esnext.asynciterable.d.ts
fi.mvc\node_modules\typescript\lib\lib.esnext.d.ts
fi.mvc\node_modules\typescript\lib\lib.esnext.full.d.ts
fi.mvc\node_modules\typescript\lib\lib.scripthost.d.ts
fi.mvc\node_modules\typescript\lib\lib.webworker.d.ts
fi.mvc\node_modules\typescript\lib\protocol.d.ts
fi.mvc\node_modules\typescript\lib\tsserverlibrary.d.ts
fi.mvc\node_modules\typescript\lib\typescript.d.ts
fi.mvc\node_modules\typescript\lib\typescriptServices.d.ts
1
evil professeur 24 Июл 2017 в 15:01
Есть ли причина не передавать formId как обычную опору?
 – 
Fawaz
24 Июл 2017 в 15:05
Есть еще 6 реквизитов, но для простоты я сократил список до одного
 – 
evil professeur
24 Июл 2017 в 15:06
Почему вы используете «интерфейс», а не обычную опору? как в этом примере: facebook.github.io/react/docs/typechecking -with-proptypes.html
 – 
Fawaz
24 Июл 2017 в 15:14
Попробуй переключиться с awesome-typescript-loader на ts-loader, мне помогло.
 – 
wa4_tasty_elephant
24 Июл 2017 в 15:16
К сожалению, ни одно из этих предложений ничего не изменило. Я все еще получаю те же ошибки
 – 
evil professeur
24 Июл 2017 в 15:27

1 ответ

Лучший ответ

Как обычно, ответ довольно тривиален. Текущая версия @ types / react (15.0.38) сломала мой проект, возврат к более ранней версии заставил все снова работать идеально.

1
evil professeur 24 Июл 2017 в 17:28
Какая более ранняя версия?
 – 
Erwin Mayer
8 Сен 2017 в 13:27
15.0.30. Он все еще сломан?
 – 
evil professeur
12 Сен 2017 в 12:55