///<reference path="..."/> 和 import 语句有什么区别答案

【问题标题】：what's the different between ///<reference path="..."/> and import statement///<reference path="..."/> 和 import 语句有什么区别
【发布时间】：2016-01-12 00:39:54
【问题描述】：

一开始我导入react时，typescript编译器控制台'找不到模块react'，然后我添加 /// ，问题就解决了。

但我刚刚发现如果我删除参考评论，没有错误。

这是我的代码：

/**
 * Created by huagu on 2015/12/21.
 */
import * as ReactDOM from "react-dom";
import * as React from "react";
import FloatButton from "./FloatButton";

window.onload = function (event:Event) {
    var bd = document.querySelector('#bd');
    var style:__React.CSSProperties = {
        width:'80px',
        height:'40px',
        background:'blue',
        position:'absolute',
        top:'100px',
        left:'10px'
    }
    var str:__React.CSSProperties = '';
    var num:number = '';
    var c = <span style={{fontSize:'14px'}}>button</span>
    var props = {
        content:c,
        click:function(){
            console.log("FloatButton clicked");
        },
        style:style,
        allowSeriesClick:false,
    }
    ReactDOM.render(<FloatButton {...props}></FloatButton>, bd);
}

所以，我的问题是是否需要引用注释？我没有添加引用注释，但是没有错误引用__React.CSSProperties，它是在react.d.ts中声明的。如果没有必要，为什么“var str:__React.CSSProperties = '';”没有错误？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

///<reference> 相当于说“相信我，这将在我的代码之前运行”，这通常是您可以放心假设的。它适用于 IDE，因为它是注释，所以根本不影响代码执行。

import modulename ... 使用 commonjs 或 requirejs 在运行后续代码之前实际检索指定的模块。

如果您有一个与您需要的模块一起使用的依赖管理系统，那么最好使用它而不是以前的解决方案；这样，就没有在加载之前尝试访问模块的风险（即使 99% 的使用在代码加载之前甚至无法远程查看）

【讨论】：

我认为更好的说法是 /// 在编译时，而 import 语句也在运行时。
@toskv 好吧，import 语句也可以在编译时。理论上，引用语句也不应该改变实际编译的输出（因为纯 JavaScript 代码从不真正依赖于知道它正在运行的代码的类型）。它主要是一种辅助技术，很像 Visual Studio 使用的“#pragma region”。
确实，import 语句在运行时和编译时都存在。引用是告诉编译器应该编译哪些文件的一种方式。不过，我会选择 tsconfig 文件。 :)
谢谢，但是为什么var style没有错误：React.CSSProperties = ‘str’;
好吧.. CSSProperties 的类型是什么？