当前为浏览器导入第三方JS节点模块的方法是什么？

Question

关于这个话题有很多问题和答案，但我似乎找不到最新的答案。

我想使用在本地安装在hyperscript中的模块node_modules。它没有d.ts文件。

我可以创建一个，我认为应该是这样的：

declare module 'hyperscript' {
    export default function H(...a: any[]) : HTMLElement;
}

我把它写在src/typings/hyperscript.d.ts中，它的类型似乎越来越多了。

我的ts源文件有：

import H from 'hyperscript';

const element = H('h1', "This is a title");

我用以下方法编译和捆绑：

browserify --debug src/main.ts -p [ tsify --noImplicitAny ] > js/bundle.js

但是，当我尝试在浏览器中运行时，我得到：

Uncaught TypeError: hyperscript_1.default is not a function

我很确定hyperscript输出的只是一个默认函数，因为在简单的JS中，使用babel/browserify，我使用：

import H from 'hyperscript';

而且效果很好。

我的package.json看起来像：

{
  "name": "hyperscript-example-ts",
  "version": "1.0.0",
  "description": "hyperscript typescript example",
  "author": "Me",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "hyperscript": "latest"
  },
  "devDependencies": {
    "browserify": "latest",
    "tsify": "latest",
    "uglifyjs": "latest"
  },
  "scripts": {
    "build": "browserify --debug src/main.ts -p [ tsify --noImplicitAny ] > js/bundle.js"
  }
}

我的tsconfig.json：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "allowJs": true,
        "declaration": false,
        "noImplicitAny": true,
        "removeComments": false,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true,
        "outDir": "js",
        "sourceMap": true,
        "watch": false
    },
    "filesGlob": [
        "src/**/*.ts",
        "src/typings/**/*.d.ts",
        "!./node_modules/**/*.ts"
    ],
    "atom": {
        "rewriteTsconfig": false
    }
}

任何帮助都非常感谢！

编辑:对此进行更多的黑客攻击，似乎唯一的方法是将我的导入重写为：

/// <reference path="./typings/hyperscript.d.ts" />
import _H = require('hyperscript'); // Gets no type info from my d.ts file
const H: (...a: any[]) => HTMLElement = _H as any;

TypeScript手册说我应该能够使用第三方JS node_modules的标准导入语法。引用此页

/// <reference path="node.d.ts"/>
import * as URL from "url";
let myUrl = URL.parse("http://www.typescriptlang.org");

Answer 1

声明文件基本上是试图向TypeScript (更多)解释环境世界的开发人员。

就你的情况而言，声明：

declare module 'hyperscript' {
    export default function H(...a: any[]) : HTMLElement;
}

其实是错的。函数H不是默认导出。它是主要的出口产品。所以你想要的是：

declare module 'hyperscript' {
    export = function H(...a: any[]) : HTMLElement;
}