安全地消除打字稿中的无效性

Question

我正在寻找有关处理空值的更好方法的建议。

我目前正在学习打字稿。我运行经常遇到的问题之一是将可能未定义或 null 的值转换为既非 undefined 也非 null 的类型化值。

例如

    currentTarget?: HTMLEement;

...
    let position = this.currentTarget.styles.position;

这当然会产生错误，因为 currentTarget 可能是 undefined。这很棒。我明白了。

通常，人们通过间接方式知道可能为 null 的表达式一定不能为 null。在这种情况下，如果表达式实际上为 null，我更倾向于抛出错误，而不是使用 null 合并运算符或保护 if 语句来使错误消失。例如，我可以写 someObject?.someProperty?.someMethod() 来消除错误；但它忽略了这样一个事实，即如果这些空合并运算符中的任何一个有效，它几乎总是一个错误。写 someObject.someProperty.someMethod() 并抛出异常会更好（尽管不可能）。

我开始编写保护函数来消除无效性。例如：

model?: Model;

getModel(): Model {
    if (!this.model) throw new StateError("Model is null.");
    return this.model;
}

并考虑了以下想法：

function nullCast<T>(value: T | null | undefined): T {
   if (!value) throw new Error("Value is null");
   return value;
}

[编辑：更正了 nullCast 的代码（效果非常好。]

没有什么可怕的

if (!this.model) throw new StateError("Model is null");
... carry on with non-nullish model...

而且我正在逐渐学习为变量提供默认值，即使它们是复杂类型，而不是将对象声明为可空值。

{
  model: SomeModel.EmptyModel();
     ... instead of ...
  model?: SomeModel;

}

但最后，似乎我的代码中不可忽略的部分正在处理可空变量，我知道我知道这些变量不是空的，因为我所在的函数不会如果程序处于这些变量可能具有空值或未定义值的状态，则正在执行。

目前手头的一个引人注目的示例：一个模型 class 通过 websocket 从远程服务器获取初始状态。初始状态是异步填充的，在此期间显示“正在加载...”屏幕。这反过来又会强制实现 UI 的代码处理 null 或未定义的模型属性，如果显示 UI，这些属性不可能为 null。

虽然我明白需要付出努力才能完全正确，但我不禁认为我缺少更好的方法来处理这个问题。对替代方案或最佳实践的建议表示赞赏。

Answer 1

"For example, I could write someObject?.someProperty?.someMethod() which makes the error go away; but it ignores the fact that it is almost always an error if any of those null coalescing operators have effect."

如果有一个空值存在异常情况，那么您的类型不应该允许该空值。听起来你的类型太宽容了。如果值为 null 时出错，那么按理说当值为 null.

时应该是 类型错误

处理空值是我们所有人都必须处理的事情，但很难一概而论，因为在空值情况下要做什么非常取决于您的 app/code 工作方式。

一般来说，当我有大多数时候需要非空的属性时，我会这样声明它们。

interface MyType {
  someObject: {
    someProperty: {
      someMethod(): void
    }
  }
}

然后仅在需要时将字段设为可选：

function makeMyType(values: Partial<MyType>): MyType {
  return { ...defaultMyType, ...values }
}

有时候真的无法轻易避免，在这种情况下我确实做了很多这样的事：

if (!foo) throw new Error('really expected foo to be here!')
console.log(foo.bar)

或者在某些情况下只是：

if (!foo) return
console.log(foo.bar)

很好。如果它真的是无效的，那么您会收到一条很好的错误消息，说明出了什么问题。或者，在第二种情况下，您只需退出在 null 情况下无效的函数。

如果没有您的类型的详细信息，很难给出更具体的建议。但最后如果：

"it seems like a non-negligble portion of my code is dealing with nullish-able variables"

然后我会先查看您的类型，以确保您尽可能多地删除无效性。

另一种选择是使用 type predicate function 来验证整个对象，然后您可以使用这些对象而无需在任何地方测试每个属性：

interface Foo {
  foo: string
  bar: string
  baz: string
}

function validateFoo(maybeFoo: Partial<Foo>): maybeFoo is Foo {
  return !!maybeFoo.foo && !!maybeFoo.bar && !!maybeFoo.baz
}

const partialFoo: Partial<Foo> = { bar: 'a,b,c' }
if (validateFoo(partialFoo)) {
  partialFoo.bar.split(',') // works
}

Playground

Answer 2

我将上面 Alex Wayne 的回答标记为已接受的答案。它对我给自己造成的痛苦提出了很多有用的观点。

但我想花点时间赞美 nullCast 的优点，它的效果比我预期的要好得多。

function nullCast<TYPE>(value: TYPE | null | undefined) : TYPE
{
   if (!value) throw Error("Unexpected nullish value.");
   return value;
}

nullCast 的主要优点是永远不需要提供模板参数。 TypeScript 将自动正确推断非空 return 类型。这行得通。

  class Foo {
      optionalBarValue?: Bar;

      getBarValue() : Bar {
          // no explicit template parameter required.
          return nullCast(this.optionalBarValue); 
      }
  };

其中“正确”表示如果this.optionalBarValue未定义，运行时会抛出异常，编译时自动推断出return类型的nullCast()为Bar，删除 | null 和 | undefined 的任意组合。

与空断言运算符“!”不同它根本不产生任何运行时代码，nullCast 确实会生成代码，并且确实会明确抛出。比较

  let value: TYPE = this.objMember!.member!;
    // no effect at runtime'. An error is throw if .objMember 
    // evaluates to null or undefined, but no exception is thrown
    // if .member is nullish. The value variable ends up 
    // holding a value at runtime that is not of correct type.

   let value: TYPE = nullCast(this.objMember?.member);
     // Throws convincingly at runtime if either .objMember 
     // or .member evaluate to nullish. The inferred return type
     // of .member is non-nullish concrete type of .member.

在以下代码中使用 if 语句消除无效性并没有什么大错。但它是侵入性的，并且对紧凑性和易读性有负面影响。如果您打算在违反无效假设时抛出错误，则可以在评估表达式时紧凑而有效地内联使用 nullCast，同时仍保持清晰的可见性以提高可读性。例如：

let value1 = nullCast(this.member1);
let value2 = nullCast(this.member2.function()?.member);

甚至（有些犹豫）

let value = nullCast(this.function1)(arg1,arg2);

动机：仍然需要根据具体情况评估对空值的正确响应是什么。但是 if (!value) return; 的残酷容易使得做错事太容易了。如果空值违反代码中的假设，正确的响应是在运行时抛出，而不是 return，而不考虑不做应该做的事情的延迟后果。在某些情况下，nullCast 可以更轻松地做正确的事情。

无论如何。回到做类型谓词的作业。

安全地消除打字稿中的无效性

Safely casting away nullishness in typescript

casting

typescript

react-typescript