Language-tools: टाइपस्क्रिप्ट गलत तरीके से वेरिएबल को संभवतः उस स्थिति के अंदर अशक्त मानता है जो वेरिएबल को चेक करती है

पता नहीं हम इससे निपटने के लिए क्या कर सकते हैं। svelte2tsx इसे इस में रूपांतरित करता है:

() => (<>

{() => {if (test){<>
    <div>
        {() => {if (test.author){<>
            <div>Author: {test.author}</div>
        </>}}}
    </div>
</>}}}</>);

क्योंकि यह एक फ़ंक्शन में लिपटे हुए है ताकि नियंत्रण प्रवाह प्रकार विश्लेषण प्रभावी नहीं होगा। और हम फ़ंक्शन को हटा नहीं सकते हैं या तत्काल-इनवॉल्ड फ़ंक्शन में लपेटे जा सकते हैं क्योंकि जब यह निर्भरता cahnged है तो अभिव्यक्ति फिर से चलेगी, हमें निश्चित रूप से नियंत्रण प्रवाह प्रकार के कुछ को अमान्य करने की आवश्यकता है।

क्या हम इसे टर्नरीज़ में बदल सकते हैं? यदि कोई और ब्लॉक नहीं है तो हम केवल दूसरे मामले के लिए एक खाली स्ट्रिंग का उपयोग करते हैं।
लेकिन इससे भी बड़ी समस्या यह हो सकती है कि हमें किसी भी प्रकार के परिवर्तनों में कार्यों का उपयोग करने की अनुमति नहीं है - यदि यह अभी है तो निश्चित नहीं है

शायद अनुमति दें! वाक्य - विन्यास? {#if test!.author} । यह मान्य टाइपस्क्रिप्ट सिंटैक्स है, लेकिन अभी इसका उपयोग टेम्पलेट में नहीं किया जा सकता है।

अभी आप मार्कअप में टाइपस्क्रिप्ट का उपयोग नहीं कर सकते हैं। मार्कअप को प्रीप्रोसेस करने या कंपाइलर पार्स टाइपस्क्रिप्ट सिंटैक्स करने का कोई तरीका नहीं है। अतः अशक्त होना संभव नहीं है।
व्यवहार्यता खरीदने की कोशिश नहीं की गई हो सकता है कि हम ऊपरी स्तर की स्थिति की प्रतिलिपि बना सकें और नेस्टेड स्थिति से पहले इसे जोड़ सकें

 {() => {if (test && test.author){<>
            <div>Author: {test.author}</div>
        </>}}}

अस्थायी समाधान:

<script lang="typescript">
    interface TestObject {
        author?: string;
    }
    export let test: TestObject | null;

    let requitedTest: Required<TestObject>;
    $: {
        requiredTest = test as unknown as Required<TestObject>;
    }
</script>

{#if test}
    <div>
        {#if requiredTest.author}
            <div>Author: {requiredTest.author}</div>
        {/if}
    </div>
{/if}

चर को कॉपी करना, विभिन्न प्रकार का असाइन करना और नेस्टेड स्थिति में इसका उपयोग करना। यह बदसूरत है और इसे सावधानी से उपयोग करने की आवश्यकता है, लेकिन यह चेतावनियों से छुटकारा दिलाता है।

अब के लिए एक अधिक व्यावहारिक समाधान होगा

{#if test}
    <div>
        {#if test?.author}
            <div>Author: {test.author}</div>
        {/if}
    </div>
{/if}

यह काफी कष्टप्रद है, खासकर जब यह सिर्फ एक ही वस्तु के अंदर ड्रिलिंग नहीं है, लेकिन अलग-अलग स्थिति बना रहा है:

{#if bigSwitch}
    <div>
        {#if smallSwitch}
            <MyComponent {bigSwitch} />
        {/if}
    </div>
{/if}

यह काम नहीं करेगा। टाइपस्क्रिप्ट को टेम्प्लेट में अनुमति नहीं है।

यहां काम करने लगता है। test && test.author तब।

यदि आप वैकल्पिक जंजीर से मतलब रखते हैं, तो यह एक नई जावास्क्रिप्ट सुविधा है, न कि केवल एक टाइपस्क्रिप्ट सुविधा। यह 3.24.0 के बाद svelte में उपलब्ध है

धन्यवाद! मैंने हमेशा यह माना कि यह गैर-शून्य कथन foo! समान TS सुविधा थी। यह बहुत सरल बनाता है।

हमेशा कुछ नया सीखना :)

व्यवहार्यता खरीदने की कोशिश नहीं की गई हो सकता है कि हम ऊपरी स्तर की स्थिति की प्रतिलिपि बना सकें और नेस्टेड स्थिति से पहले इसे जोड़ सकें

 {() => {if (test && test.author){<>
          <div>Author: {test.author}</div>
      </>}}}

मैंने उस दिशा में कुछ परीक्षण किए और मुझे लगता है कि यह सभी मामलों के लिए काम नहीं करेगा। यह #if लिए त्रुटियों को मौन कर सकता है, लेकिन जैसे ही आप इसके अंदर #await #each या #await ब्लॉक का उपयोग करेंगे, वे फिर से प्रकट होंगे। अगर चर const , तो ये त्रुटियां प्रकट नहीं होंगी, क्योंकि TS नियंत्रण प्रवाह तब जानता है कि स्थिति अभी भी सही होनी चाहिए क्योंकि चर को पुन: असाइन नहीं किया जा सकता है। तो इसे हल करने का सबसे अच्छा तरीका सब कुछ const चर में बदलना होगा, या सभी चर को टेम्पलेट के लिए अस्थायी अन्य चर में फिर से असाइन करना होगा। होवर की जानकारी, नाम, गो-टू-डिक्लेरेशन इत्यादि के लिए यह अपनी समस्याएँ लाएगा, हो सकता है कि कॉमा-एक्सप्रेशन्स का उपयोग करके चारों ओर काम किया जा सकता है और {#if foo} से {#if (foo, generatedConstFoo)} परिवर्तित हो सकता है। निचला रेखा: इसके लिए काफी कुछ हैकरी की आवश्यकता होगी।

हो सकता है कि "ऊपरी-स्तर को बढ़ाएं यदि ब्लॉक-" सब कुछ सही है। यह मानना ​​सुरक्षित नहीं है कि प्रत्येक / प्रतीक्षित ब्लॉक के अंदर स्थितियां अभी भी सही हैं। उदाहरण के लिए, यह रनटाइम त्रुटि ( toUpperCase is not a function ) फेंक देगा:

<script>
    let name = 'name';
    function setNameToNumber(){
        name = 1
        return ['a']
    }
</script>

{#if name}
    <h1>Hello {name.toUpperCase()}!</h1>
    {#each setNameToNumber() as item}
        item
    {/each}
{/if}

वही वेट-ब्लॉक के लिए निर्माण किया जा सकता है।

छोटा अपडेट / सारांश:

• जैसे ही कोड इन निर्माणों के अंदर होता है नियंत्रण प्रवाह रीसेट हो जाता है: #await , #each , let:X । यह हमारे कोड को बदलने के तरीके के कारण है। हम इस मुद्दे के बारे में नहीं भूले हैं और अभी भी इसे अच्छे तरीके से हल करना चाहते हैं।
• नेस्टेड अगर-शर्तों को तब तक उम्मीद के मुताबिक काम करना चाहिए जब तक कि वे पहली गोली बिंदु में उल्लिखित चीजों में से एक से बाधित न हों

अभी आप मार्कअप में टाइपस्क्रिप्ट का उपयोग नहीं कर सकते हैं। मार्कअप को प्रीप्रोसेस करने या कंपाइलर पार्स टाइपस्क्रिप्ट सिंटैक्स करने का कोई तरीका नहीं है। अतः अशक्त होना संभव नहीं है।
व्यवहार्यता खरीदने की कोशिश नहीं की गई हो सकता है कि हम ऊपरी स्तर की स्थिति की प्रतिलिपि बना सकें और नेस्टेड स्थिति से पहले इसे जोड़ सकें

 {() => {if (test && test.author){<>
          <div>Author: {test.author}</div>
      </>}}}

अब जब कि # 493 एक तरह से तय हो गया है, जो $store -variables घोषित करता है, हम इस विचार को फिर से जारी कर सकते हैं। मेरा विचार इस तरह की सभी शर्तों ( #each एक उदाहरण के रूप में) को प्रस्तुत करना है:

में

{#if somecondition && anothercondition}
   {#each ..}
     ..
   {/each}
{/if}

बाहर

<>{__sveltets_each((true, items), (item) => (somecondition && anothercondition) && <>
    ...
</>)}</>

मुश्किल हिस्सा फारस / अन्य और घोंसले के शिकार तर्क सही पाने के लिए है।

यह वीएस कोड संस्करण 104.6.3 / svelte-check संस्करण 1.2.4 के साथ तय किया जाना चाहिए। कृपया मुझे बताएं कि क्या यह आपके लिए काम करता है।

मुझे एक समस्या मिली है - यह अब टेम्पलेट के अंदर सही ढंग से काम करता है, लेकिन इवेंट श्रोताओं में नहीं। मुझे यकीन नहीं है कि मुझे इसके लिए एक नया मुद्दा खोलना चाहिए, लेकिन यहाँ एक रिप्रो है:

<script lang="ts">
  let value: string | null = null;

  function acceptsString(value: string) {
    console.log(value);
  }
</script>

{#if value}
  <!-- Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'. -->
  <button on:click={() => acceptsString(value)} />
{/if}

मुझे एक समस्या मिली है - यह अब टेम्पलेट के अंदर सही ढंग से काम करता है, लेकिन इवेंट श्रोताओं में नहीं। मुझे यकीन नहीं है कि मुझे इसके लिए एक नया मुद्दा खोलना चाहिए, लेकिन यहाँ एक रिप्रो है:

<script lang="ts">
  let value: string | null = null;

  function acceptsString(value: string) {
    console.log(value);
  }
</script>

{#if value}
  <!-- Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'. -->
  <button on:click={() => acceptsString(value)} />
{/if}

हालांकि यह सिर्फ नियमित टीएस व्यवहार है। आपके मान को एक फ़ंक्शन में संदर्भित किया जाता है जिसे भविष्य में किसी भी समय कहा जा सकता है जहां मान वापस शून्य हो सकता है।

दोनों ही मान्य विचार हैं। कोई कह सकता है "चूंकि value एक कास्ट नहीं है, यह बदल सकता है", लेकिन दूसरी ओर कोई यह भी कह सकता है कि "मुझे कभी भी उस हैंडलर पर क्लिक नहीं करना चाहिए यदि value null ”। मुश्किल ..

मैं इसके लिए एक अलग मुद्दा खोलूंगा ताकि हम इस पर अलग से चर्चा कर सकें।

मुझे नहीं लगता कि टीएस के अपने, पुराने विकल्पों पर चर्चा करने के लिए आपके समय के लायक है: पी
यदि मूल्य या उदाहरण के लिए उनके माता-पिता के स्तर पर कोई संक्रमण है, तो क्या बटन = मान के साथ चारों ओर नहीं रहेगा?

कड़ाई से बोलना नियंत्रण प्रवाह इन आराम परिवर्तनों से पहले सही था क्योंकि कोई प्रत्येक लूप या प्रतीक्षा के भीतर अन्य चर को संशोधित कर सकता था।

<script lang="ts">
  let foo: string | null = 'bar';
  function getItems() {
     foo = null;
     return [''];
  }
</script>

{#if foo}
  {#each getItems() as item}
    {foo.toUpperCase()} <!-- boom -->
  {/each}
{/if}

.. लेकिन यह कौन करता है? आप TS में भी उसी रनटाइम त्रुटियों को गढ़ सकते हैं, btw। तो यह "यह 100% सही है" की तुलना में डीएक्स में एक ट्रेडऑफ़ से अधिक है।

लेकिन इससे पहले कि हम यहां इस बारे में चर्चा करें, कृपया इस चर्चा को # 876 further तक ले जाएं