بهترین روش برای پیاده سازی Context با تایپ اسکریپت

سلام! 😊

برای استفاده از Context API در React با TypeScript، چند تا نکته وجود داره که باید رعایت کنی تا همه چیز درست کار کنه و از تایپ‌ها به درستی استفاده بشه.

در اینجا یک راهنمای ساده و مرحله به مرحله برای پیاده‌سازی Context API با TypeScript آوردم:

1. ایجاد Context
   اولین قدم اینه که یک Context بسازی و برای اون تایپ‌ها رو تعریف کنی.

   
   import React, { createContext, useContext, useState, ReactNode } from 'react';

// تایپ برای داده‌هایی که می‌خواهیم در کانتکست ذخیره کنیم
interface MyContextType {
user: string;
setUser: (user: string) => void;
}

// مقدار پیش‌فرض کانتکست
const defaultContextValue: MyContextType = {
user: '',
setUser: () => {},
};

// ایجاد کانتکست با تایپ‌های مشخص شده
const MyContext = createContext<MyContextType>(defaultContextValue);

type MyProviderProps = {
children: ReactNode;
};

// ایجاد Provider برای Context
export const MyProvider: React.FC<MyProviderProps> = ({ children }) => {
const [user, setUser] = useState<string>('');

return (
<MyContext.Provider value={{ user, setUser }}>
{children}
</MyContext.Provider>
);
};

2. ایجاد هوک useContext
برای استفاده راحت‌تر از Context در کامپوننت‌ها، می‌تونیم یک هوک بسازیم که تایپ‌شده باشه.

// هوک برای استفاده از کانتکست
export const useMyContext = (): MyContextType => {
const context = useContext(MyContext);
if (!context) {
throw new Error('useMyContext must be used within a MyProvider');
}
return context;
};

3. استفاده از Context در کامپوننت‌ها
حالا می‌تونی در هر کدوم از کامپوننت‌ها، از کانتکست استفاده کنی.

import React from 'react';
import { useMyContext } from './MyContext'; // مسیر دقیق فایل خودتون رو وارد کنید

const MyComponent: React.FC = () => {
const { user, setUser } = useMyContext();

return (
<div>
<p>User: {user}</p>
<button onClick={() => setUser('John Doe')}>Set User</button>
</div>
);
};

export default MyComponent;

4. استفاده از Provider در روت اصلی
برای استفاده از Context، باید Provider رو در سطح روت یا کامپوننت‌های بالاتر قرار بدید تا به همه کامپوننت‌ها دسترسی داشته باشه.

import React from 'react';
import ReactDOM from 'react-dom';
import { MyProvider } from './MyContext'; // مسیر دقیق فایل خودتون رو وارد کنید
import MyComponent from './MyComponent';

const App: React.FC = () => {
return (
<MyProvider>
<MyComponent />
</MyComponent>
);
};

ReactDOM.render(<App />, document.getElementById('root'));

توضیحات:
MyContextType: تایپ داده‌ها و توابعی که در Context ذخیره می‌کنی. این باعث میشه تایپ‌ها در کل پروژه مشخص و درست استفاده بشن.
MyProvider: کامپوننتی که مقدار Context رو در اختیار بقیه کامپوننت‌ها قرار می‌ده.
useMyContext: هوکی که به راحتی می‌تونی از Context استفاده کنی و مطمئن باشی تایپ‌ها درسته.