() => type vs () : type 之间的 typescript 箭头函数区别

Question

这两种在typescript中声明箭头函数的方式有什么区别？

type MyState = {
  required: boolean;
  optional?: boolean;
};

const myFn1: (s: MyState) => MyState = (s) => ({...s, unexpected: 1})  // no error
const myFn2 = (s: MyState): MyState => ({...s, unexpected: 1})         // error

myFn2出现以下错误

Type '{ unexpected: number; required: boolean; optional?: boolean | undefined; }' is not assignable to type 'MyState'.
  Object literal may only specify known properties, and 'unexpected' does not exist in type 'MyState'.

为什么 myFn1 没有同样的错误？

另外，如果我想要这条线

const myFn3: FnType = (s) => ({...s, unexpected: 1})

要给出与 myFn2 相同的错误，FnType 应该是什么？

Answer 1

子类型应该可以分配给它的基类型。所以从类型论的角度来看 { required: boolean;可选？: bool 值；意外:数字 } 应该可以分配给 MyState。在查看对象类型时，您永远不应该假设满足此条件的值仅具有那些属性，只是它必须具有由类型指定的属性。

异常(exception)情况是所谓的“超额属性(property)检查”。如果您将对象字面量分配给类型为特定对象类型的对象，TypeScript 将在这里检查您是否有额外的属性。这是为避免某类错误而进行的实用检查。

让我们看两个例子:

const myFn2 = (s: MyState): MyState => ({...s, unexpected: 1})     

在这里，您在返回类型为 MyState 的函数中返回一个对象文字，因此多余的属性检查开始了。

const myFn1: (s: MyState) => MyState = (s) => ({...s, unexpected: 1})

这里有一个函数表达式分配给一个函数类型的变量。 TypeScript 将首先键入函数表达式，然后检查它是否可分配给函数类型。它是。函数表达式返回的子类型可分配给函数类型的返回类型。没有将对象文字直接分配给具有确定类型的东西。

您可能会争辩说 TypeScript 应该使用它用于参数类型(上下文类型)的相同机制来获取返回类型并对其执行额外的属性检查。但这不是 typescript 目前的工作方式。 (我确定 github 上有关于此的讨论)

通常没有办法避免这种情况。您可以将您特别不想要的属性添加到 MyState(并将它们设为可选并将它们键入 udnefined)，但这不是可扩展的解决方案。

唯一真正的解决方案是为函数添加显式返回类型。但通常不依赖于仅具有由类型定义的属性的对象类型。