Question

有一个名为＆＃39; resize-observer-polyfill＆＃39;声明它有一个默认导出：

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 会使类型和运行时变得快乐，但是除非我将 skipBabel 设置为true，否则许多导入会在jest中失败（使用ts-jest）。

使用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对理解这一点很有帮助。

无法使用typescript导入默认值

1 个答案: