Context'leri ve Özel Hook'ları Türlendirme
Varsayılan değerlerle türlendirilmiş context oluşturun ve açık dönüş türlerine sahip özel hook'lar yazın.
Context'leri ve Özel Hook'ları Türlendirme, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
createContext ile türlendirilmiş bağlam
Bağlam türünü ve varsayılan değeri createContext işlevine verin. Bağlamın bir sağlayıcı içinde kullanılması gerekiyorsa varsayılan olarak null kullanın ve bunu bir denetimle ele alın.
interface AuthContextType {
user: User | null;
login: (credentials: Credentials) => Promise<void>;
logout: () => void;
}
const AuthContext = createContext<AuthContextType | null>(null);Koruma kancası deseni
Bağlamı okuyan ve sağlayıcısının dışında kullanılırsa hata oluşturan özel bir kanca oluşturun. Böylece her çağrı noktasında null denetimi yapmanız gerekmez.
export function useAuth(): AuthContextType {
const ctx = useContext(AuthContext);
if (!ctx) throw new Error('useAuth must be used within AuthProvider');
return ctx;
}Sağlayıcıyı türlendirme
Sağlayıcı bileşeni alt öğeleri sarmalar ve bağlam değerini sağlar. TypeScript'in değerin bağlam türüyle eşleştiğini doğrulaması için değer nesnesini açıkça türlendirin.
export function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<User | null>(null);
const login = async (creds: Credentials) => {
const u = await apiLogin(creds);
setUser(u);
};
const logout = () => setUser(null);
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
}Varsayılan değerle bağlam
Makul bir varsayılan değer (örneğin bir tema) olduğunda bunu doğrudan createContext işlevine verin; böylece bağlam hiçbir zaman null olmaz ve koruma kancasına gerek kalmaz.
interface ThemeContextType { theme: 'light' | 'dark'; toggle: () => void; }
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggle: () => {},
});
export const useTheme = () => useContext(ThemeContext);Özel kancaların dönüş değerlerini türlendirme
Özel kancaların dönüş türünü açıkça belirtin veya TypeScript'in bunu çıkarmasına izin verin. Açık türler belge işlevi görür ve şeklin yanlışlıkla değişmesini önler.
interface UseCounterReturn {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
function useCounter(initial = 0): UseCounterReturn {
const [count, setCount] = useState(initial);
return {
count,
increment: () => setCount(c => c + 1),
decrement: () => setCount(c => c - 1),
reset: () => setCount(initial),
};
}Demet dönüş türleri
Bir çift döndüren kancalar (useState gibi) demet kullanır. Yapılandırma ayırmanın doğru türleri çıkarması için bunları as const veya açık bir demet türüyle türlendirin.
function useToggle(initial = false): [boolean, () => void] {
const [value, setValue] = useState(initial);
const toggle = useCallback(() => setValue(v => !v), []);
return [value, toggle];
}
// Destructuring correctly infers types:
const [isOpen, toggleOpen] = useToggle();Genel tür kullanan özel kancalar
Özel kancalar da genel tür kullanabilir. Genel tür kullanan bir useLocalStorage kancası, her serileştirilebilir türü tam tür güvenliğiyle depolar.
function useLocalStorage<T>(key: string, initialValue: T): [T, (val: T) => void] {
const [stored, setStored] = useState<T>(() => {
try {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch { return initialValue; }
});
const setValue = (val: T) => {
setStored(val);
localStorage.setItem(key, JSON.stringify(val));
};
return [stored, setValue];
}useReducer'ı türlendirme
Eylem türlerini ayırt edici birleşimler, durum yapısını ise bir arayüz olarak tanımlayın. TypeScript, azaltıcıdaki eylem türlerinin geçerli olmasını zorunlu kılar.
interface State { count: number; status: 'idle' | 'loading'; }
type Action =
| { type: 'INCREMENT' }
| { type: 'SET_STATUS'; payload: State['status'] };
function reducer(state: State, action: Action): State {
switch (action.type) {
case 'INCREMENT': return { ...state, count: state.count + 1 };
case 'SET_STATUS': return { ...state, status: action.payload };
}
}
const [state, dispatch] = useReducer(reducer, { count: 0, status: 'idle' });useCallback ve useMemo'yu türlendirme
TypeScript, useCallback ve useMemo türlerini üretici işlevden çıkarır. Yalnızca tür çıkarımı başarısız olduğunda açıkça belirtin.
const handleChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
onChange(e.target.value);
},
[onChange]
);
const sorted = useMemo(
() => [...items].sort((a, b) => a.name.localeCompare(b.name)),
[items]
); // inferred as typeof itemsTürlerle bağlam seçici deseni
Türlendirilmiş bir seçici kanca, bir seçici işlevi alır ve tam tür çıkarımını koruyarak yalnızca gereken bölümü döndürür.
function useAuthSelector<T>(selector: (ctx: AuthContextType) => T): T {
const ctx = useAuth();
return selector(ctx);
}
// Usage — TypeScript infers User | null:
const user = useAuthSelector(ctx => ctx.user);Kancalarda any kullanmaktan kaçınma
Özel kancalarda hiçbir zaman any kullanmayın. Tür zincirini korumak için genel türlerden, tür denetimleriyle birlikte unknown'dan veya belirli arayüzlerden yararlanın.
// Bad:
function useFetch(url: string): { data: any; loading: boolean } { ... }
// Good:
function useFetch<T>(url: string): { data: T | null; loading: boolean } {
const [data, setData] = useState<T | null>(null);
// ...
return { data, loading };
}Hızlı kontrol
React bağlamını türlendirirken koruma kancası deseninin amacı nedir?
Özet
Bağlamı açık bir arayüz ve null denetimi yapan bir kancayla türlendirin. Özel kancaların dönüş türlerini arayüzlerle veya demet türleriyle belirtin, yeniden kullanılabilir kancalar için genel türleri kullanın ve derleme zamanında geçersiz gönderimleri yakalamak için useReducer işlevini ayırt edici birleşim eylemleriyle türlendirin.
Sıkça Sorulan Sorular
“Context'leri ve Özel Hook'ları Türlendirme” dersi ücretsiz mi?
Evet — “Context'leri ve Özel Hook'ları Türlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“Context'leri ve Özel Hook'ları Türlendirme” dersinde ne öğreneceğim?
Varsayılan değerlerle türlendirilmiş context oluşturun ve açık dönüş türlerine sahip özel hook'lar yazın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Context'leri ve Özel Hook'ları Türlendirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Prop'ları ve Bileşen Dönüş Türlerini Türlendirme
- TypeScript'te Olayları ve Ref'leri Türlendirme
- Genel Bileşenler ve Yardımcı Türler
- Context'leri ve Özel Hook'ları Türlendirme