联合类型的奇怪打字稿错误

Question

我有一个Optional 类型：

export type Optional<T> =
  | {
  hasValue: false;
}
  | {
  hasValue: true;
  value: T;
};

还有一个人为的泛型类型Value：

type Value<PAYLOAD> = {
  value: PAYLOAD;
};

正如预期的那样，这个函数没有错误：

function workingAsExpected1(msg: Optional<string>) {
  const v: Value<Optional<string>> = {
    value: msg,
  }
}

现在，我定义了一个 SpecialValue 泛型类型，它基本上等同于 Value 类型，但对于导致我遇到的问题是必要的：

type SpecialValue<PAYLOAD> = PAYLOAD extends undefined
  ? never
  : Value<PAYLOAD>;

现在，当msg 在函数范围内定义时，一切都按预期工作：

function workingAsExpected2() {
  const msg: Optional<string> = {
    hasValue: true,
    value: '',
  };
  const v: SpecialValue<Optional<string>> = {
    value: msg,
  };
}

但是当我将msg 定义为函数的参数时——具有完全相同的类型——我在v 下得到一个错误：

function notWorking(msg: Optional<string>) {
  const v: SpecialValue<Optional<string>> = {
    value: msg,
  };
};

“'{ hasValue: false; }' 类型中缺少属性'value'，但在'{ hasValue: true; value: string; }'类型中是必需的”

我在这里缺少什么？为什么SpecialValue 会导致错误，而Value 不会，当它们评估为完全相同的类型时？为什么当我在范围内定义变量时它会起作用，但当我将它定义为参数时它却不起作用，即使它们是完全相同的类型？

Playground link

Answer 1

除非您的程序出于某种原因在 null 和 undefined 之间进行语义区分，否则您不需要将值包装在对象中并使用额外属性来区分是否存在潜在值的仪式。

相反，您可以使用内置类型实用程序NonNullable<Type> 来缩小值范围，并使用type predicate 更容易在代码中进行区分。考虑这个例子：

TS Playground

type Maybe<T> = T | null | undefined;

// You can think of this type predicate as a functional form of "hasValue"
function exists <T>(value: T): value is NonNullable<T> {
  // return value !== undefined && value !== null;
  // Can be shortened to:
  return value != null;
}

function doSomethingWithValue (value: Maybe<string>) {
  if (exists(value)) {
    value // string
  }
  else {
    value // null | undefined
  }
}

// This also has the advantage of being able to use the "nullish" family of
// of operators in your code to discriminate a potential value:
// - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment
// - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
// - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

function greet (name?: Maybe<string>) {
  name ??= 'World';
  name; // string
  console.log(`Hello ${name}`);
}

greet(); // "Hello World"
greet(undefined); // "Hello World"
greet(null); // "Hello World"
greet(''); // "Hello "
greet('Bill'); // "Hello Bill"