在Solid.js中适当缩小访问器类型

Question

我有一个Solid.js代码，如下所示

import { render } from "solid-js/web";
import { createSignal , Component } from "solid-js";

const Number: Component<{value: number}> = ({value}) => <b>{value}</b> 

const App: Component = () => {
  const [foo] = createSignal<number | null>(null);

  return (
    foo() 
      ? <Number value={foo()} /> /* foo() is number | null, causing an error */
      : <div>foo is null</div>
  );
}

render(() => <App />, document.getElementById("app")!);

如何适当地缩小foo()访问器的类型，以便安全地将其作为Number的道具传递？

在法线变量上，三元运算符适当地缩小了类型：

let bar!: number | null;

bar 
    ? <Number value={bar} /> // bar's type is narrowed from number | null to number
    : <div>bar is null</div>

但它似乎不适用于访问器变量

游乐场

Answer 1

可以使用Show组件缩小类型

import { render } from "solid-js/web";
import { createSignal, Component, Show } from "solid-js";

const Number: Component<{value: number}> = ({value}) => <b>{value}</b> 

const App: Component = () => {
  const [foo] = createSignal<number | null>(null);

  return (
    <Show when={foo()} fallback={<div>foo is null</div>}>
      {(f) => <Number value={f} />}
    </Show>
  );
}

render(() => <App />, document.getElementById("app")!);

游乐场

Answer 2

缩小类型和呈现值是两个不同的概念。您在三元中使用的条件不够具体，无法消除非数字值。如果使用正确的条件，typeof val() === 'number'，类型记录将正确显示类型。

const Num: Component<{ value: number }> = (props) => {
  return <div>{props.value}</div>
}

const App = () => {
  const [val] = createSignal<number | null>(null);

  return (
    <div>
      {typeof val() === 'number' ? <Num value={val()} /> : <div>{val()}</div>}
    </div>
  );
};

否则，缩小类型范围的最直接的方法是强制转换，val() as number，但它会抑制给您假阳性的类型。当你知道类型时，你应该使用投法，但打字本却找不出。

接受答案中的Show组件不会缩小类型，而是将when值强制转换为布尔值，并相应地呈现提供的元素。如果您检查它的类型，its是Show<T>，意思是任意。您要寻找的是基于值类型的条件呈现。

Solid使用JSX作为其UI层，以便您可以有条件地使用表达式呈现项，这是JSX规范中描述的方式:无论您从花括号中的表达式中返回什么，{}都将打印在屏幕上，除非它是一个假值。

可以使用&&运算符有条件地呈现元素/组件：

const App = () => {
  const myVal = 'two';
  return (
    <div>
      {myVal === 'one' && <div>One</div>}
      {myVal === 'two' && <div>One</div>}
      {myVal === 'three' && <div>One</div>}
    </div>
  );
};

可以使用三元运算符来决定两个元素/组件之间的关系：

const App = () => {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? (
        <Logout onClick={handleLogout} />
      ) : (
        <Login onClick={handleLogin} />
      )}
    </div>
  );
};

因此，在最基本的方法中，您可以使用typeof运算符只筛选数字值：

const App = () => {
  const [val] = createSignal<number | null>(0);

  return (
    <div>
      {typeof val() === 'number' ? <div>number: {val()}</div> : <div>Not a number</div>}
    </div>
  );
};

Solid提供内置的Show组件，用于基于两个相互排斥的条件呈现元素，就像我们对三元操作符所做的那样。结果将被回溯，以减少下游渲染。

<Show when={true} fallback={<Fallback />}>
  <div>My Content</div>
</Show>

它还接受一个呈现函数：

<Show when={state.count} fallback={<div>Loading...</div>}>
  {(props) => <div>{props.count}</div>}
</Show>

在这里，您可以如何使用Show组件来完成这个任务：

const App = () => {
  const [val] = createSignal<number | null>(null);

  return (
    <Show when={typeof val() === 'number'} fallback={<div>Not a number</div>}>
      <div>number: {val()}</div>
    </Show>
  );
};

还有根据自定义条件呈现元素的<Switch>/<Match>：

<Switch fallback={<div>Aww Week Day!</div>}>
  <Match when={state.day === "saturday"}>
    <Saturday />
  </Match>
  <Match when={state.day === "sundat"}>
    <Sunday />
  </Match>
</Switch>