模块加载与的script.js

Question

我希望能够从CDN加载具有打字稿外部依赖，像这样：

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. 

...如果我们移动导入语句添加到文件的顶部，他们会失败，因为依赖尚未加载。

有没有一种方法，我们可以使用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。