模塊加載與的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。