असली दुनिया के code को type करना: DOM, fetch, JSON

अपने application की सीमाओं पर विश्वसनीय types बनाए रखें, जहाँ DOM, network और JSON compiler से बच निकलते हैं।

10 मिनट · 3 प्रश्न

असली दुनिया का code वहीं शुरू होता है जहाँ perfect types ख़त्म होते हैं: DOM, network और JSON ऐसा data लौटाते हैं जिसका TypeScript अनुमान नहीं लगा सकता। पहली सीमा: DOM। querySelector लौटाता है Element | null, एक ऐसा type जो value पढ़ने या focus() कॉल करने के लिए बहुत अस्पष्ट है।

const input = document.querySelector<HTMLInputElement>(
  "#email"
);

if (input) {
  input.value = "test@example.com";
  input.focus();
}

type parameter एक वादा है जो आप compiler से करते हैं: सही selector को लक्षित करना आप पर निर्भर है। जब element किसी event से आता है, तो एक instanceof जाँच को प्राथमिकता दें, जो runtime पर type को वास्तव में सत्यापित करती है।

const form = document.querySelector("form");

form?.addEventListener("submit", (event) => {
  event.preventDefault();
  if (event.target instanceof HTMLFormElement) {
    console.log(new FormData(event.target));
  }
});

दूसरी सीमा: network। response.json() लौटाता है Promise<any>, दूसरे शब्दों में किसी भी चीज़ के लिए खुला दरवाज़ा। पेशेवर न्यूनतम: अपेक्षित type घोषित करें, response.ok जाँचें, और call को एक typed function में केंद्रित करें।

interface Post {
  id: number;
  title: string;
}

async function getPost(id: number): Promise<Post> {
  const url = `https://api.example.com/posts/${id}`;
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return (await response.json()) as Post;
}

वह as Post भरोसे का एक बयान भर रहता है: अगर API बदलती है, तो runtime पर कुछ भी आपको चेतावनी नहीं देता। महत्वपूर्ण data के लिए, एक type guard लिखें जो इस्तेमाल से पहले JSON की वास्तविक shape को validate करे।

function isPost(value: unknown): value is Post {
  if (typeof value !== "object" || value === null) {
    return false;
  }
  const obj = value as Record<string, unknown>;
  return (
    typeof obj.id === "number" &&
    typeof obj.title === "string"
  );
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. किसी fetch response पर response.json() का return type क्या है?
   • Promise<unknown>
   • Promise<any>
   • Promise<object>
   • any
2. किसी as HTMLFormElement assertion के बजाय event.target instanceof HTMLFormElement को प्राथमिकता क्यों दें?
   • यह runtime पर तेज़ है
   • instanceof वास्तव में runtime पर type की जाँच करता है, जबकि as केवल compiler को चुप कराता है
   • strict mode में as निषिद्ध है
3. बिना किसी type parameter के document.querySelector('#email') क्या लौटाता है?
   • HTMLInputElement
   • Element | null
   • HTMLElement
   • null