typescript 函数接受不正确的参数没有错误

Question

情况 1:将“randomKey”传递给 doMethod 时未检测到错误。

interface Options {
 bar: string;
 foo?: number;
}

function doMethod(options: Options) {
 console.log(options);
}


const options = {
 bar: 'bar',
 foo: 123,
 randomKey: 231,
}
doMethod(options); // No errors appear!
console.log(options);

Case 2: options直接传入函数后才出现错误

interface Options {
 bar: string;
 foo?: number;
}

function doMethod(options: Options) {
 console.log(options);
}

doMethod({
 bar: 'bar',
 foo: 123,
 randomKey: 231, // ERROR: "Object literal may only specify known properties, and 'randomKey' does not exist in type 'Options'."
});

console.log(options); // In this scenario, I cannot console log options

隐性错误很难发现。例如，您很容易拼错一个词，事情可能不会按照您想要的方式发生。

当您拼错“foo”(例如“fooo”)时会发生什么？静默错误仍然会发生。您希望“foo”触发某些东西，但在这种情况下如果您拼写“fooo”则不会。

Answer 1

TypeScript provides a concept of Freshness (also called strict object literal checking) to make it easier to type check object literals that would otherwise be structurally type compatible.

-- 来源 TypeScript Deep Dive

点击上面的链接，它对此主题的解释非常清楚。

在这里，我将根据您的场景进行简要说明。

// case 1: no error
const options = { bar: 'bar', foo: 123, randomKey: 231 };
doMethod(options);

// case 2: error
doMethod({ bar: 'bar', foo: 123, randomKey: 231 });

在运行时 JavaScript 中，这两个用例都应该可以正常工作。这是真的，因为 JS 是弱类型的，对象中的额外键在运行时不会造成伤害。

回到 TS，您指定 doMethod(options) 应接受形状为 { bar: string; 的选项foo?: 数字 }。这是说明您对 doMethod 输入的最低要求。用额外的键输入？没问题，这就是 JS 的工作原理。

那么，为什么 TS 会在情况 2 中向您抛出错误？

因为 TS 想让你知道额外的 randomKey 是不必要的!即使它没有害处。

这就是新鲜度概念背后的想法。一个模拟就像:

function add(a: number, b: number) { return a + b };

add(1, 2, 3); // TS Error

虽然在 JS 运行时，这种用法仍然有效，但您可能不是这个意思。所以 TS 会提前警告您。

---

回答你问题的第二部分，如果你只是想保持对象的新鲜度，如果你想严格检查输入的确切形状怎么办？有一个缺点的解决方案:

type ExactShape<T, R> = T extends R
  ? Required<R> extends T
    ? T
    : never
  : never

function doMethod<T>(options: ExactShape<T, Options>) {
   console.log(options);
}

TypeScript Playground现场演示

这次 TS 会像您希望的那样抛出错误。但缺点是，当鼠标悬停在错误上时，它不会再告诉有用的信息为什么你错了。