Module 使用外部模块编译Typescript应用程序

我的app.tsx文件中有一个非常简单的代码：

/// <reference path="../modules/ReactSpa/Routing/Router.ts" />

import Router = ReactSpa.Routing.Router;

var router = new Router();
router.addParam('id', /([\d\-]+)/);
router.add('/articles/:id', 'Article');
console.log(router.find('/articles/1234'));

/// <reference path="../modules/ReactSpa/Routing/Router.ts" />
/// <reference path="../../../typings/react/react.d.ts" />
/// <reference path="../../../typings/react/react-dom.d.ts" />

import Router = ReactSpa.Routing.Router;
import React = __React;
import ReactDOM = __React.__DOM;

var router = new Router();
router.addParam('id', /([\d\-]+)/);
router.add('/articles/:id', 'Article');
console.log(router.find('/articles/1234'));

interface HelloWorldProps {
    name: string;
}

var HelloMessage = React.createClass<HelloWorldProps, any>({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

ReactDOM.render(<HelloMessage name="John" />, document.getElementById('hello'));

运行编译：

tsc

一切都很好！ 例如，现在我们想要包含外部库

npm install react --save
npm install react-dom --save
tsd install react --save
tsd install react-dom --save

更改app.tsx文件：

/// <reference path="../modules/ReactSpa/Routing/Router.ts" />

import Router = ReactSpa.Routing.Router;

var router = new Router();
router.addParam('id', /([\d\-]+)/);
router.add('/articles/:id', 'Article');
console.log(router.find('/articles/1234'));

/// <reference path="../modules/ReactSpa/Routing/Router.ts" />
/// <reference path="../../../typings/react/react.d.ts" />
/// <reference path="../../../typings/react/react-dom.d.ts" />

import Router = ReactSpa.Routing.Router;
import React = __React;
import ReactDOM = __React.__DOM;

var router = new Router();
router.addParam('id', /([\d\-]+)/);
router.add('/articles/:id', 'Article');
console.log(router.find('/articles/1234'));

interface HelloWorldProps {
    name: string;
}

var HelloMessage = React.createClass<HelloWorldProps, any>({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

ReactDOM.render(<HelloMessage name="John" />, document.getElementById('hello'));

在本例中，编译后的文件只包含我的库的代码，即使没有app.tsx的代码

顺便说一下，我的模块定义如下：

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

namespace ReactSpa.Routing {
    export class Router {
    // ...

我在stackoverflow.com上阅读了官方文档、许多文章和主题，但我就是做不到这一点…

这是意料之中的

在typescript中执行“import”语句时，不会包含库的源代码。而是告诉编译器在库中的什么地方可以找到类型定义。在生成的编译javascript中，它将是一个正常的“require”语句。在加载代码之前，需要将库加载到浏览器中，以便解析require语句

我不明白的是，为什么在使用

import React=require（'React'）时不包括
app.tsx
编译但我看到的是，您混淆了typescript的外部和内部模块这两个概念。据我所知，您应该只使用一个系统，因为它们不可互操作

我强烈建议阅读：
及

在第二页，您可以看到，通常建议使用外部模块系统。您也可以在stackoverflow中的一些线程中找到这个答案。
我没有真正了解
import-React=require（'React'）。你能进一步澄清吗？导入
React=\uu React-，带有
import React=require（'React'）-。