仅用作别名时省略 TypeScript 模块

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 是最好的解决方法。