小编nar*_*uto的帖子

我正在尝试创建一个包含标题和 2x2 CSS 网格的 flexbox。

• flexbox ( .container) 填充整个视口。
• 标题的高度是可变的。它可能会在页面打开时动态更改。
• 网格中的四个单元格必须占据视口的剩余部分，并且它们的宽度和高度必须相等。

这是我现在所拥有的：

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

* { box-sizing: border-box; }

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

.header {
  background: lime;
}

.grid {
  flex: auto; /* fills the remaining part of the viewport below header */
  background: cyan;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  grid-gap: 2px;
}

.cell {
  padding: 10px;
  background: linear-gradient(to …

此代码似乎会导致编译错误（使用 TypeScript 1.6.2 检查）：

var a: ((input: any) => boolean) | string | RegExp = "foobar";
if (typeof a === 'function') {
    a(100); // compile error here
}

编译器说error TS2349: Cannot invoke an expression whose type lacks a call signature.

我在 TS Playground 中输入它，发现if 子句中a有一个类型((input: any) => boolean) | RegExp，这不是我所期望的。当然typeof /abc/returns 'object'，所以我相信a永远不应该是 if 子句中的正则表达式。

我想这在某种程度上与这个问题和“积极的亚型减少”有关，但我不确定这一点。

显式类型断言（(<Function>a)(100)）没有解决我的问题。有快速解决方法吗？

编辑：更新了问题，因为事实证明这不是 1.6 特定的问题。