Question

我有一个像这样的NPM模块的导入声明：

import * as ReactRouter from 'react-router'

使用module: "commonjs"转换为：

var ReactRouter = require('react-router');

我可以访问我的JSX中的ReactRouter.Router等。例如，这有效：

render(){
    return (
        <ReactRouter.Router>
            <ReactRouter.Route path="/" component={App}>
                <ReactRouter.IndexRoute component={Index} />
                <ReactRouter.Route path="detail/:id" component={Detail} />
                {/* etc */}
            </ReactRouter.Route>
        </ReactRouter.Router>
    )
}

但是，我想为Route等创建别名，所以我不必在任何地方引用ReactRouter.*：

import * as ReactRouter from 'react-router'
import Router = ReactRouter.Router
import Route = ReactRouter.Route
import IndexRoute = ReactRouter.IndexRoute

render(){
    return (
        <Router>
            <Route path="/" component={App}>
                <IndexRoute component={Index} />
                <Route path="detail/:id" component={Detail} />
                {/* etc */}
            </Route>
        </Router>
    )
}

但是当我这样做时，转换后的代码就变成了这样：

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;

请注意ReactRouter模块本身无处可去，并且在运行时它会中断，因为ReactRouter未定义。但是，如果我至少向ReactRouter添加一个任意引用，则会显示：

// TS
import * as ReactRouter
import Router = ReactRouter.Router
ReactRouter // reference to force ReactRouter module to be compiled

// Transpiles to:
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
ReactRouter;

然后它在运行时工作。

换句话说，似乎导入别名不算作参考，即使它确实如此。这是TSC的错误吗？除了创建模块的额外引用之外，是否有其他解决方法，以便TSC不会省略它？有没有更好的方法从react-router模块导入这些单独的符号，如import {Router, Route, IndexRoute} from 'react-router'可以用Babel完成？

Answer 1

这是compiler bug。不久之前它是fixed，你可以npm install typescript@next或者使用TypeScript 1.7。

在表达式中引用ReactRouter是最好的解决方法。

仅用作别名

1 个答案: