1

I have a very simple code in my app.tsx file:

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

My tsconfig.json file:

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

Run compiling:

tsc

All work great! Now a want to include external library, React for example.

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

Change app.tsx file:

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

It compiles without any errors, but compiled file does not contain source code of React - only code of my libraries and code of app.tsx file.

I tried change import like this:

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

In this case compiled file contains only code of my libraries, even without code of app.tsx...

Bu the way, my modules defined like this:

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

I read official docs, many articles, and themes at stackoverflow.com, but I just can not do this...

2
  • I did not really get what happened with import React = require('react');. Can you please clarify further? Commented Nov 21, 2015 at 13:06
  • With import React = __React; - app, with import React = require('react'); - app-with-import. Commented Nov 21, 2015 at 13:15

1 Answer 1

1

This is expected.

The source code of libraries does not get included when doing "import" statements within typescript. It rather says to the compiler where to find the type definitions in the library. In the resulting compiled javascript it will be a normal "require" statement. You need to load your libraries into the browser before loading your code, so that the require statement can be resolved.

What I do not understand is why the app.tsx compilation is not included when using the import React = require('react'); But what I see is that you are mixing up the two concepts of external and internal modules of typescript. From what I can tell you should only use one system, because they are not interoperable.

I'd strongly recommend reading: https://basarat.gitbooks.io/typescript/content/docs/project/modules.html and https://basarat.gitbooks.io/typescript/content/docs/project/namespaces.html

On the second page you can see, that it is generally recommended to use external module system. You can also find this answer in some threads here in stackoverflow.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.