Language-tools: TypeScript는 변수를 검사하는 조건 내에서 변수를 null 가능성이있는 것으로 잘못 간주합니다.

우리가 그것을 처리하기 위해 무엇을 할 수 있는지 모릅니다. svelte2tsx는 다음과 같이 변환합니다.

() => (<>

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

제어 흐름 유형 분석이 적용되지 않도록 함수에 래핑되어 있기 때문입니다. 그리고 우리는 함수를 제거하거나 즉시 호출 된 함수로 래핑 할 수 없습니다. 왜냐하면 종속성이 제한 될 때 표현식이 다시 실행되기 때문입니다. 우리는 확실히 일부 제어 흐름 유형을 무효화해야합니다.

이것을 삼원으로 바꿀 수 있습니까? else 블록이 없으면 else 케이스에 빈 문자열을 사용합니다.
그러나 더 큰 문제는 우리가 어떤 변환에서도 이와 같은 기능을 사용할 수 없다는 것입니다.

어쩌면 허용! 통사론? {#if test!.author} 이것은 유효한 TypeScript 구문이지만 지금은 템플릿에서 사용할 수 없습니다.

지금은 마크 업에서 typescript를 사용할 수 없습니다. 마크 업을 전처리하거나 컴파일러가 typescript 구문을 구문 분석하도록하는 방법은 없습니다. 따라서 널이 아닌 주장은 불가능합니다.
생존 가능성 구매를 시도하지 않았 으면 상위 수준 조건을 복사하여 중첩 조건 앞에 추가 할 수 있습니다.

 {() => {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}

작동하지 않습니다. TypeScript는 템플릿에서 허용되지 않습니다.

여기서 일하는 것 같습니다. 그러면 test && test.author .

선택적 체이닝을 의미하는 경우 이는 단지 typescript 기능이 아니라 새로운 자바 스크립트 기능입니다. 3.24.0 이후 svelte에서 사용할 수 있습니다.

감사! 나는 항상 그것이 null이 아닌 문 foo! 과 유사한 TS 기능이라고 가정했습니다. 그것은 훨씬 더 간단합니다.

항상 새로운 것을 배우십시오 :)

생존 가능성 구매를 시도하지 않았 으면 상위 수준 조건을 복사하여 중첩 조건 앞에 추가 할 수 있습니다.

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

나는 그 방향으로 몇 가지 테스트를 수행했으며 이것이 모든 경우에 작동하지 않을 것이라고 생각합니다. #if 대한 오류를 차단할 수 있지만 그 안에 #each 또는 #await 블록을 사용하는 즉시 다시 나타납니다. 이러한 오류는 변수가 const 인 경우 나타나지 않습니다. TS 제어 흐름은 변수를 다시 할당 할 수 없기 때문에 조건이 여전히 참이어야한다는 것을 알고 있기 때문입니다. 따라서이 문제를 해결하는 가장 좋은 방법은 모든 변수를 const 변수로 변환하거나 모든 변수를 템플릿의 임시 다른 변수에 다시 할당하는 것입니다. 호버 정보, 이름 바꾸기, 선언으로 이동 등의 경우 자체 문제가 발생합니다. 아마도 쉼표 식을 사용하여 {#if foo} 를 {#if (foo, generatedConstFoo)} 변환하여 해결할 수 있습니다. 결론 : 이것은 꽤 많은 해커 리를 필요로 할 것입니다.

결국 "상위 수준의 if 블록 추가"가 올바른 것일 수도 있습니다. 각 / 대기 블록 내에서 조건이 여전히 참이라고 가정하는 것은 안전하지 않습니다. 예를 들어 런타임 오류 ( 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 조건은 이제 첫 번째 글 머리 기호에 언급 된 사항 중 하나에 의해 중단되지 않는 한 예상대로 작동합니다.

지금은 마크 업에서 typescript를 사용할 수 없습니다. 마크 업을 전처리하거나 컴파일러가 typescript 구문을 구문 분석하도록하는 방법은 없습니다. 따라서 널이 아닌 주장은 불가능합니다.
생존 가능성 구매를 시도하지 않았 으면 상위 수준 조건을 복사하여 중첩 조건 앞에 추가 할 수 있습니다.

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

이제 # 493이 $store 변수를 선언하는 방식으로 수정되었으므로이 아이디어를 다시 살펴볼 수 있습니다. 내 생각은 다음과 같은 모든 if 조건을 앞에 추가하는 것입니다 (예 : #each ).

에

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

밖

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

까다로운 부분은 elseif / else 및 중첩 논리를 올바르게 얻는 것입니다.

이 문제는 VS Code 버전 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}

그것은 단지 일반적인 TS 행동입니다. 값이 null로 돌아갈 수있는 미래에 언제든지 호출 될 수있는 함수에서 값이 참조됩니다.

둘 다 유효한보기입니다. " value 는 const가 아니기 때문에 변경 될 수 있습니다."라고 말할 수 있지만 다른 한편으로는 " value 가 null 이면 해당 클릭 핸들러를 사용할 수 없습니다."라고 말할 수도 있습니다.

이에 대해 다른 문제를 열어서 별도로 논의 할 것입니다.

TS 자체의 오래된 선택에 대해 논의 할 시간이 충분하지 않다고 생각합니다.
예를 들어 해당 또는 부모 수준에서 아웃 전환이있는 경우 버튼이 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. 따라서 DX에서는 "이것은 100 % 정확합니다"보다 트레이드 오프에 가깝습니다.

그러나 여기에서 더 자세히 논의하기 전에이 논의를 # 876으로 가져 가십시오 😄