reactjs - چگونه از PropTypes همراه با Typescript در React استفاده کنیم

من در حال تلاش برای استفاده از PropTypes با تایپاسکریپت هستم اما خطا دریافت میکنم:

بدون تایپاسکریپت توانستم استفاده کنم:

class TodoFilterItem extends Component {
  constructor (props) {
    super(props);

و سپس در پایین

TodoFilterItem.propTypes = {
  name: PropTypes.string,
  filter: PropTypes.string,
  filterTodos: PropTypes.any
}

و این فقط برای داشتن PropTypes کار میکرد (یعنی بدون تایپاسکریپت).

با این حال وقتی تایپاسکریپت را اضافه میکنم و دارم

class TodoFilterItem extends Component<ITodoFilterItem> {
  constructor (props:ITodoFilterItem) {
    super(props);
    ...

من پراپسها را به عنوان یک اینترفیس به این شکل دارم:

interface ITodoFilterItem  {
  filter: string,
  name: string,
  filterTodos: any
}

و من از همان propTypes استفاده میکنم:

TodoFilterItem.propTypes = {
  filter: PropTypes.string,
  name: PropTypes.string,
  filterTodos: PropTypes.any
}

من یک خطا دریافت میکنم

Property 'propTypes' does not exist on type 'typeof import("/my_adrs/node_modules/@types/prop-types/index")'.  

چگونه به این موضوع رسیدگی کنیم و بتوانیم از PropTypes با TypeScript در React استفاده کنیم؟

پاسخ شماره ۱

PropTypes از Typescript جدا هستند. برای استفاده مجدد از propTypes خود، باید آن را به یک interface یا type تبدیل کنید.

این

TodoFilterItem.propTypes = {
  filter: PropTypes.string,
  name: PropTypes.string,
  filterTodos: PropTypes.any
}

میشود

interface ITodoFilterItem {
  filter: string;
  name: string;
  filterTodos: any; 
}

استفاده از آن رابط ساده است، شما TodoFilterItemProps را با ITodoFilterItem جایگزین میکنید.

روال این است که ویژگیهای کامپوننت خود را IProps نامگذاری کنید. با قرار دادن این موارد کنار هم، کامپوننت شما اکنون به این شکل است:

interface IProps { 
 name: string;
 filter: string;
 filterTodos: any; 
}

class TodoFilterItem extends Component<IProps> {
  constructor (props:IProps) {
    super(props);
    ...

توضیح در مورد any

سعی کنید از تایپ کردن به any جلوگیری کنید. نوع any همانند بدون تایپ است. من تصور میکنم filterTodos یک آرایه از todos باشد. اگر این چنین است، میتوانید یک نوع برای todo ایجاد کنید و آن را نامگذاری کنید

type Todo = { ...properties of a todo } 

سپس filterTodos را تایپ کنید تا یک آرایه از Todo باشد که به این شکل خواهد بود:

type Todo = { 
  name: string,
  status: 'not started' | 'in progress' | 'done'
}

interface IProps { 
  filter: string;
  name: string;
  filterTodos: Todo[]; 
}