Question

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

{
    "compilerOptions": {
        "module": "umd",
        "sourceMap": true,
        "diagnostics": true,
        "jsx": "react",
        "out": "public/assets/scripts/compiled/app.js"
    },
    "files": [
        "dev-files/scripts/applications/app.tsx"
    ]
}

我的tsconfig.json文件：

tsc

运行编译：

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

一切都很棒！现在想要包含外部库，例如React。

/// <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');

它编译没有任何错误，但编译文件不包含React的源代码 - 我的库的代码和app.tsx文件的代码。

我尝试像这样更改导入：

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

在这种情况下，编译文件只包含我的库的代码，即使没有app.tsx的代码......

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

{{1}}

我在stackoverflow.com上阅读了官方文档，很多文章和主题，但我不能这样做......

Answer 1

这是预期的。

在typescript中执行“import”语句时，不会包含库的源代码。它宁愿向编译器说明在库中找到类型定义的位置。在生成的编译的javascript中，它将是一个普通的“require”语句。在加载代码之前，您需要将库加载到浏览器中，以便可以解析require语句。

我不明白为什么在使用app.tsx时不包含import React = require('react');编译的原因但我看到的是你混淆了外部这两个概念打字稿的内部模块。据我所知，你应该只使用一个系统，因为它们不可互操作。

我强烈建议阅读： https://basarat.gitbooks.io/typescript/content/docs/project/modules.html 和 https://basarat.gitbooks.io/typescript/content/docs/project/namespaces.html

在第二页，您可以看到，通常建议使用外部模块系统。你也可以在stackoverflow中的一些线程中找到这个答案。

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

1 个答案: