typescript - 无法使用 typescript 导入默认值

Question

有一个名为“resize-observer-polyfill”的库，它声明它具有默认导出:

declare var ResizeObserver: {
  prototype: ResizeObserver;
  new(callback: ResizeObserverCallback): ResizeObserver;
}

export default ResizeObserver;

但是我无法导入这个库，因为 TS 提示。

import ResizeObserver from 'resize-observer-polyfill'

// If I do this instead, TS is happy but ResizeObserver is undefined !!
import * as ResizeObserver from 'resize-observer-polyfill'

TS 配置摘录:

, "compilerOptions":
  { "jsx": "react"
  , "module": "commonjs"
  , "noImplicitAny": true
  , "outDir": "output/dist"
  , "reactNamespace": "JSX"
  , "sourceMap": true
  , "strictNullChecks": true
  , "target": "es6"
  }

使用 allowSyntheticDefaultImports 可以使类型和运行时快乐，但随后许多导入会开玩笑地失败(使用 ts-jest)，除非我将 skipBabel 设置为 true。

使用 skipBabel 选项，此导入在具有未定义值的测试中失败，我必须在测试中使用 import * as ResizeObserver 语法。

执行此操作的正确方法是什么？为什么会这么乱？

Answer 1

尝试第一种语法(import ResizeObserver from 'resize-observer-polyfill')，将 allowSyntheticDefaultImports 和 esModuleInterop 都设置为 true tsconfig.json。您需要前者允许 import ResizeObserver 而不是 import * as ResizeObserver，我认为您可能需要后者，因为您的目标是 es6 .

我找到了 release notes for TS 2.7对理解这一点非常有帮助。