Как показать доступные параметры реквизита в React Element в VS Code?
мне просто интересно, как показать некоторые доступные реквизиты для одного компонента в React при использовании VS Code
например, когда у меня есть этот компонент
export function CustomWarning = (props)=>{
return <Modal show = {props.show} onClose = {props.onClose} type = {props.type}/>
}
CustomWarning.propTypes = {
show : PropTypes.bool,
onClose : PropTypes.func,
type : PropTypes.oneOf(["modalA","modalB"])
}
как показать варианты modalA и modalB, когда я куда-то импортирую свой компонент, и он автоматически показывает доступные реквизиты?
Ответы 1
Обновлено:
Есть 2 способа: переписать компонент в ts или использовать файл d.ts. Старый ответ ниже ответит на первый.
Использование d.ts
Вы можете создать файл d.ts с точно таким же именем с вашим компонентом js, например:
type modalOptions = 'modalA' | 'modalB'
interface ModalProps {
show : boolean,
// in this case i say this function will not return anything
onClose: ()=>void,
type?: modalOptions
}
declare const Modal (props: ModalProps){}
export default Modal;
Таким образом, вам не нужно будет изменять свой файл js, но это будет похоже на предоставление инструкций кому-либо, как использовать ваш компонент.
Помните, что этот файл не изменит работу вашего js-файла, это просто своего рода контракт, которому должны следовать другие.
Старый ответ
Переписать в ts
На самом деле, вы можете, если вы выберете Typescript.
вы можете определить свой Modal, например
// Modal.tsx
type modalOptions = 'modalA' | 'modalB'
interface ModalProps {
show : boolean,
// in this case i say this function will not return anything
onClose: ()=>void,
type?: modalOptions
}
const Modal: FunctionComponent<ModalProps> = (
{show, onClose, type}
)=>{
return // your implementations here
}
так что позже, когда вы будете печатать, вы увидите это
красиво и чисто.