进口类+反应过来

Question

我有两个文件comment.tsx和commentlist.tsx

comment.tsx看起来是这样的：

/// <reference path="./typings/react/react.d.ts" /> 
/// <reference path="./typings/react/react-dom.d.ts" /> 
/// <reference path="interfaces.d.ts" /> 

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

namespace W.T.F { 
    export class Comment extends React.Component<ICommentData, {}>{ 
     constructor(props: ICommentData) { 
      super(props); 
     } 

     public render() { 
      return (
       <div className="comment"> 
       <h2 className="commentAuthor">{this.props.Author}</h2> 
       <span>{this.props.Text}</span> 
        </div> 
      ); 
     } 
    } 
} 

和commentlist.tsx

/// <reference path="./typings/react/react.d.ts" /> 
/// <reference path="./typings/react/react-dom.d.ts" /> 
/// <reference path="comment.tsx" /> 
/// <reference path="interfaces.d.ts" /> 

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 
import Comment = W.T.F.Comment; 

namespace W.T.F { 
    export class CommentList extends React.Component<ICommentListData, {}>{ 
     public render() { 
      var commentNodes = this.props.Data.map(function (comment: ICommentData) { 
       return (
        <Comment Author={comment.Author} Text={comment.Text}>{comment.Text}</Comment> 
       ); 
      }); 
      return (
       <div className="commentList"> 
        {commentNodes} 
       </div> 
      ); 
     } 
    }; 
} 

编译这些文件所带来的误差

commentlist.tsx（8,24）TS2305模块“WT .F'没有导出成员'评论'。

我的来源有什么问题？

从其他文件导入其他反应类（包含在名称空间中）的最佳方法是什么？

Answer 1

如果有任何顶级导入，并且示例中的名称空间成为模块的一部分，TypeScript将该文件视为外部模块。

大多数项目将需要使用外部模块没有命名空间，但使用的命名空间你想要的方式，这样使用旧的参考/进口语法，与命名空间内定义的进口：

/// <reference path="./typings/react/react.d.ts" /> 
namespace W.T.F { 
    import React = __React; 

    export class Comment extends React.Component<ICommentData, {}>{ 
     constructor(props: ICommentData) { 
      super(props); 
     } 

     public render() { 
      return (
       <div className="comment"> 
       <h2 className="commentAuthor">{this.props.Author}</h2> 
       <span>{this.props.Text}</span> 
        </div> 
      ); 
     } 
    } 
}