Typescript/React: модуль не имеет экспортированного члена
Я пытаюсь экспортировать типы свойств из одного компонента представления в другой компонент контейнера и использовать их в качестве определений типов состояний:
// ./Component.tsx
export type Props {
someProp: string;
}
export const Component = (props: Props ) => {
...etc
}
// ./AnotherComponent.tsx
import { Component, Props as ComponentProps } from "./Component";
type Props = {}
type State = ComponentProps & {};
class AnotherComponent extends React.Component<Props, State> {
state: State;
...etc
}
Однако я получаю в консоли:
Module '"./Component "' has no exported member 'Props'.
Любые предложения о том, как я должен идти об этом?
Я также пытался использовать типы поиска в соответствии со статьей это, но без особого удовольствия.
Извините, это была опечатка
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Попробуйте что-нибудь вроде этого. В основном расширьте реквизиты компонента, чтобы включить желаемый импорт.
export interface IProps extends PropsOfYouChoiceThatYouImport {
morePropsHere
}
Также не включайте реквизиты в состояние, это совершенно неправильно, ИМО. Сделайте что-то вроде этого:
interface IProps extends YourDesiredProps {
someProp: string | null;
// etc
}
interface IState {
something: boolean
// etc
}
export class ComponentName extends Component<IProps, IState> {
// Define you state, and props here. You need to initialize the correct IState
// and IProps above
}
Что касается ошибки консоли, я не уверен, что вы можете это сделать. Попробуйте создать папку с именем Types или Interfaces. Затем экспортируйте его.
И импортируйте его как именованный или экспортируйте по умолчанию, как хотите, в оба файла. Поскольку вы хотите использовать его повторно. Скажи мне, если это поможет. Я могу изучить это подробнее, если вы сделаете быстрый код в песочнице.
По сути, я предлагаю поместить это в отдельный файл:
export type Props {
someProp: string;
}
Спасибо, однако это не устраняет ошибку выше. Также я предполагаю, что реквизит может расширять только один другой набор реквизитов, если мне нужно включить более одного набора реквизитов, это будет неподходящим, верно?
Вы можете расширить несколько. просто запятая разделяет их. Но будь осторожен. Несовместимые типы — головная боль. Если вы окажетесь в этом сценарии, возможно, ваша архитектура неверна. Позвольте мне еще раз взглянуть на ошибку. Возможно, я неправильно понял проблему.
Пожалуйста, проверьте мой ответ еще раз. Скажи мне, если это поможет.
Спасибо, в соответствии с github.com/sw-yx/react-typescript-cheatsheet#class-components говорится: «Вы можете экспортировать/импортировать/расширять эти типы/интерфейсы для повторного использования». Конечно, есть способ повторно использовать эти типы без необходимости разделения на другой файл определений типов?
Если вы проверите типы React (node_modules/react/index.d.ts) React.Component, структура будет следующей:
class Component<P, S> {...}
где P равны реквизиты, а S означает состояние.
Не следует смешивать реквизит и состояние.
Чтобы исправить ошибку TypeScript, измените type на interface:
export interface Props {
someProp: string;
}
К сожалению, изменить его на интерфейс не работает.
Довольно сложно догадаться, в чем проблема, поэтому я предлагаю вам воспроизвести вашу проблему в codesandbox.io, который является отличным онлайн-инструментом кодирования для внешнего интерфейса. Вот ящик с песком, который вы можете разветвить, в котором есть Typescript и React.
Проблема с отсутствующим экспортом членов заключалась в том, что у меня был промежуточный индексный файл, который TypeScript, похоже, не может использовать при экспорте типов:
// ./Component/index.tsx
export { Component, Props } from "./js/Component";
Когда я изменяю импорт, чтобы использовать точный путь к файлу, а не пытаться импортировать его через индексный файл, он его подбирает:
// ./AnotherComponent/js/AnotherComponent.tsx
import { Props as ComponentProps} from "./Component/js/Component";
Module '"./AnotherComponent "' has no exported member 'Props'.ноModule "./Component" has exported member 'Props'.ура