Question

我希望能够从cdn中加载带有typescript的外部依赖项，如下所示：

declare var $script: any;


$script(["//cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js",
    "//cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"
], () => {       
   import * as React from "react";
   import * as ReactDOM from "react-dom";

    ReactDOM.render(
        <Hello compiler="TypeScript" framework="React" />,
        document.getElementById("example")
    );
});

执行此操作的原因是您只需要在页面上为scriptjs添加脚本标记，并且main.js和所有其他外部依赖项都需要由需要它们的文件加载。

然而，我收到错误

 error TS1232: An import declaration can only be used in a namespace or module.

...如果我们将import语句移到文件的顶部，它们就会失败，因为尚未加载依赖项。

有没有办法可以使用scriptjs来按需加载依赖项？

Answer 1

使用模块加载程序（import，amd等）加载脚本时，应使用您正在使用的system语句，但是因为您需要不这样做，那么你需要使用reference标签告诉编译器在哪里找到要做出反应的定义：

/// <reference path="react.d.ts" />
/// <reference path="react-dom.d.ts" />

$script(["//cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js",
    "//cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"
], () => {
    ReactDOM.render(
        <Hello compiler="TypeScript" framework="React" />,
        document.getElementById("example")
    );
});

问题是available definitions没有将模块导出为React，这是应该在运行时使用的方式。

definitions tests中的示例显示了这一点：

import React = require("react");
import ReactDOM = require("react-dom");

这有助于编译（没有错误），但它产生了这个：

var React = require("react");
var ReactDOM = require("react-dom");

由于您在运行时没有require，因此无法帮助您。

我还没有设法让这个工作，我写这个答案只是为了通过我尝试的东西，并给你一个替代方案：使用模块系统。
例如，使用SystemJS：

配置（例如在html中）：

SystemJS.config({
    map: {
        react: "//npmcdn.com/react@15.3.1/dist/react.js",
        "react-dom": "//npmcdn.com/react-dom@15.3.1/dist/react-dom.js"
    }
});

SystemJS.import("YOUR_MAIN_FILE.js")
        .then(null, console.error.bind(console));

然后在.tsx文件中：

import React = require("react");
import ReactDOM = require("react-dom");

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("example")
);

模块系统将按照正确的顺序为您加载东西，导入非常简单您不必使用SystemJS，还有其他模块加载器supported by the ts compiler。

使用script.js从Typescript加载模块

1 个答案: