typescript编译es5
1. ES2015 和 TypeScript 的区别
1、TypeScript是ES2015（即ES6）的超集，ES6是ES5的改进，如下图：
2、TypeScript 相对ES2015（即ES6），的主要改进是，有一个类型系统
它有助于编写代码，因为它可以在编译时发现错误
它有助于在你阅读代码的时候，理解其中的意图
2. 零基础编程语言，初学选Typescript应该从哪里开始学习呢
TypeScript 是一种由微软开发的自由和开源的编程语言，它是javaScript的一个超集，扩展了JavaScript的语法。TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
3. 如何学习用Typescript写Reactjs
首先扫盲一下，先从搭建环境开始：
1.安装node，因为ts的编译器是js/ts写的；
安装node后同时获得npm命令，这是nodejs世界里的包管理器（也可以看作node的app商店）；
2.安装vs 2015或者vs code，当然这不是必须的，但是这里强烈推荐写ts的工具，vs第一，vsc第二；
3.vs自带了TypeScript（vs2012+，vs2015update1自带了ts1.7）,最新版本的typescript for vs去官网下载即可, 或者如果不依赖vs（比如mac环境）, 可以用命令行装ts编译器
npm i -g typescript@next
4. 安装了ts后, 就会有2个命令可用：tsc和tsd, tsc用来编译TypeScript代码, tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，熟练使用tsd，工作效率提升，因为减少了80%查文档的时间，所以写ts可以说是jser打通了任督二脉，上手任何新的开发环境都很快；
有网友指正tsd工具不是安装ts的时候自带的，需要另外安装，装太久不记得了。
npm install tsd -g
5. 命令行下载react的ts头文件,
tsd install react-global --save
注意上面之所以写 react-global 而不是react， 因为我们接下来使用比较原始的写法，直接把React当作全局对象使用， 而不作为es6模块（必须用import引入），不需要Babel编译也不需要webpack打包；
上面执行的tsd命令下载了ReactJS类库的头文件, 下面用tsc命令创建一个ts项目配置文件
tsc --init
命令创建了tsconfig.json配置文件, 打开该文件
增加"jsx": "react", 就是自动把tsx变成最终的js, 而不是jsx
把"outDir": "built", 这行去掉,这样编译的文件就会在当前目录输出
"target": "es5", 这里es3改成es5,
"watch": true 是否监听文件修改 如果你用的是vs,这行不重要
6.下载reactjs文件，如果没有安装bower命令，可以手动去官网下载react类库
bower install --save react
7.以上环境配置好了, 开始写代码:
创建一个demo.tsx文件(注意这里是tsx, 不是ts也不是jsx)
创建一个demo.html, 添加文件的引用
<!doctype html>
<html>
<head>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="demo.js"></script>
</head>
<body>
</body>
</html>
8. demo.tsx 写代码
class MyClass extends React.Component<any, any> {
render() {
return <h1>hello {this.props.name}</h1>;
}
}
document.addEventListener('DOMContentLoaded', function () {
ReactDOM.render(<MyClass name="Tom" />, document.body);
});
9. 如果保存了demo.tsx后, 没有在目录下发现自动编译了demo.js, 那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行
tsc
tsc命令会自动根据tsconfig.json里面配置的情况, 自动帮你把代码编译成js, 这是编译后的js文件
10. 打开demo.html可以看到效果了;
11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;
12. 下班, 有空再写;
－－－－－－时间分割－－－－－－
13、继续写，对1-12进行润色，转入传教模式；
妖兽啦，这里14-15的文字怎么不不见了，知乎编辑器bug好多。
不记得写了什么，大概说的是 工厂方法创建子类和用class直接继承的差异。
React.createClass 和 Backbone.View.extend 等都是工厂方法创建子类
文字断了。。。。
以上的代码，工厂方法在创建子类的同时，做了一些初始化的动作，这与单纯的原型继承不同，所以在使用class方式进行子类继承，这样的写法是无效的；
class MyView extends React.Component {
render() {
return <h1>hello {this.state.name}</h1>; //会抛异常,因为state是null
}
//不起作用的
getInitialState:(){
return {name:'',age:20};
}
}
需要改成如下方式，下面是官网给出的方案（这里TypeScript和ES6情况是一样的）
class MyView extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
name: '',
};
}
render() {
return <h1>hello {this.state.name}</h1>;
}
}
16、当组件化遇到强类型：
从前写JS组件，一般复用性比较差，基本写完就仍，原因如下：
1）暴露了太多的Dom结构以及别的实现细节；
2）命名挫，缺乏可记忆性，本身编程中变量和方法的命名对于码农来说就是天坑；
3）JS天生缺乏私有和公共成员的约束，不加注释根本不知道怎么使用该类库/组件；
React解决了把dom标签暴露出去的问题，TS则解决了语言层面的问题，并提供了强大的重构能力，你根本不需要记住组件的API，因为工具会列出来；
17、强类型的ts有IDE的代码提示，但是面对各种mvvm的字符串模版组装，却无用武之地，以下是典型的mvvm数据绑定和有IDE支持的JSX数据组装在开发体验上的区别；
模板字符串的绑定里，工具无法检查出问题，只能在运行时抛出异常，而jsx则可以提示拼写错误。
18、关于生产力再抛一个概念：无障碍编程；
我们平时的开发工作，有不少时间花在查API文档、调试代码、查字典（给变量命名），需要不停地切换任务窗口……
上面的例子比较小，实际开发中各种JSON对象可能有10来个属性，且结构层层嵌套，不一边查文档一边抓包，根本无法完成开发；
如果项目是并行开发的，文档都还没定义出来（但是产品原型已经有了，甚至html页面都已经切好），如何快速完成前端部分的开发工作？
业界常用方法是使用mock数据（先造假数据），下面介绍一种更简单的办法（为了举例先虚拟一个需求场景 —— 一个留言板html的组装）；
别忘了JS变量是可以用中文的，好吧不用查字典了，先把需求完成再说，在组装html的过程中TS+JSX发挥了巨大的优势，三下五除二就把组装界面的代码写好了，不用调试我可以确定没有错误的；
过了些天，WebAPI的数据结构定义出来了，可以着手进行代码重构（或者说把查字典的工作集中完成），利用开发工具的重构功能进行变量改名：
最后项目完成的时候，是把所有类型的定义都挪到独立的描述文件里(比如叫做webapi.d.ts)，原来的interface可以改成type关键字(类型别名)：
以上，这个开发过程中基本没有一边查文档、一边查字典，效率的提升是明显的。
4. typescript 怎样直接编译为浏览器中可执行的代码
使用webpack等工具转换成浏览器支持的模式
5. TypeScript是怎么提高JavaScript编程效果的
TypeScript是由微软开发的一种可快速入门的开源的编程语言，是JavaScript的一个超集，且向这个语言添加了可选的静态类型和基于类的面向对象编程。能够帮助web前端开发人员编出更出色的JavaScript代码、搞定规模可观的JavaScript项目并为ECMAScript6的来临做好准备。
JavaScript是一款通用脚本语言，植根于开发工具的核心深处，同时在Node.js等服务器端实现方案中也有所体现。除此之外，JavaScript还是微软开发技术方案的关键组成部分，若想对office进行扩展，不使用JavaScript是不行的。
虽然JavaScript已发展得非常强悍了，但其离完美还有一大段距离，特别是在构建包含大量客户端代码的web应用时，JavaScript的不足之处就非常明显。这个时候，配合TypeScript使用，JavaScript的缺陷就可完美解决。只需在TypeScript当中编写代码，而后将其交付至编译器，即可将所开发代码转换为能够运行在服务器端，又可以由客户端中的HTML进行调用的JavaScript形式方案。
TypeScript还将大量ECMAScript6功能加入到了JavaScript当中，具体包括类与模块，并尝试将这两种本是同根生的语言加以进一步融合，从而满足ECMAScript6的标准化方法要求。通过这种方式，大家可以利用TypeScript开发出能够为ECMAScript6所接纳的代码，同时充分发挥TypeScript的静态类型优势以提升代码安全性水平。
TypeScript允许我们面向变量进行类型声明，从而确保A始终属于整数而C始终属于字符串。虽然TyperScript的类型安全性并不像Fortran那么全面，但其仍然能够定义数字与字符串，并利用Boolean类型显着改善代码调试机制。除此之外，TyperScript还提供选项以实现类型推断，从而降低发生错误的可能性如果大家的代码为两个数字相加，那么TyperScript会认定其结果始终为数字。
通过使用TypeScript，开发者也可以将类型应用至数组中，或利用enums为特定变量名称设置值。如果不确定自己可能使用哪种类型，则可以将变量设定为any，在这种情况下TypeScript不会推断其具体类型、大家也不会因此遇到错误或者警告。TypeScript类型可以自行选择，因此也无需在编译或者运行之前，首先向现有代码添加各种类型，这将有效简化现有代码的相关迁移工作。
需要注意的是，现有JavaScript代码将成为TypeScript应用程序的一部分加以运行。而如果将代码迁移到ECMAScript6或者TypeScript语法形式下，大家即可享受到TypeScript的各种功能优势。而如果我们使用具备TypeScript识别能力的工具，则可以拥有面向VisualStudioIntelliSense的支持能力——其能够帮助我们对函数调用中的类型进行管理。除此之外，也可利用TypeScript声明文件向各类常用库及服务中快速添加类型支持，例如jQuery库。
拥有这样一款类型化且近似于JavaScript的语言能够给类使用与模块构建带来显着简化（与AngularJS当中的处理方式非常相近）。类型的存在能够确保某个警告类中的所有实例都通过字符串进行调用，这将帮助我们轻松构建起更理想的构造函数。大家可以将这种类型化构造函数调用视为一种契约，负责定义两段代码之间的相互作用——并帮助我们更轻松地在不同应用程序之间重复使用同一函数。
在函数调用当中定义类型正是创建接口结构的关键所在，能够使我们的代码更具面向对象特性。大家可以将函数元素明确定义为接口，并选择在函数当中使用更具描述性的名称，同时又不会影响到进行调用检查时向IntelliSense等函数所必需的工具发出通知。
以这种方式定义类型与接口，能够让多位开发人员轻松对大型JavaScript项目加以管理。而在函数与类设计中秉持“接口至上”的契约化方法，则能够帮助大家在对应用程序中特定部分进行优化时不至于影响到其余部分，或者从其他开发者手中借用某种接口定义并直接运用到其它实现方案当中。这种方式允许我们以更为高效的方式使用诸如Git以及GitHub等工具，从而在一套持续开发模型当中轻松管理多个代码分支。
如果使用的是Java语言或者C#语言，那么对TypeScript（以及ECMAScript6）的类实现机制一定不会感到陌生。大家可以在构造函数之内创建类，从而对方法中所使用的类型进行定义，最终利用类似的来处理各种内部对象。大家也可以利用继承、添加功能与重写方法等方式对类进行扩展。而更值得注意的是，TypeScript还支持常见于函数与接口当中的泛型——其能够帮助大家交付可重复使用的函数。
一旦掌握了TypeScript处理类与函数的方式，就可以着手将其组织在模块当中，在这里类与函数能够被拆分至多个文件当中。这显然是一种非常便捷的代码组织方案——举例来说，我们可以利用几个文件来处理购物车当中的不同函数。在此之后，大家可以对各个子模块进行分别更新，从而在特定函数中利用调整归零机制改善其性能水平，同时又不至于对其它函数造成影响。具备声明文件的JavaScript库也可以作为模块使用，因此大家能够在TypeScript应用程序当中充分发挥由此带来的诸多优势。
在大型web应用程序的开发中，对JavaScript的使用，以TypeScript作为切入点，将大大提高我们开发的效率。TypeScript不仅能够帮助我们在具备充分掌控能力且遵循可重复使用方针的前提下完成编码工作，同时也能够拥有一条通往ECMAScript6的理想路径。相信今后web前端开发，甚至整个web端所有网站的开发，都将逐步使用到TypeScript，以提高JavaScript的编程效果。
6. 如何编译TypeScript
1）通过 File -> New-Project 新建项目
2）输入必要信息，点击 Ok 按钮，创建后项目模板如下
3）app.js 依赖于 app.ts，默认的 app.ts 文件包含类和构造函数等等
4）TypeScript 文件将会被编译为 JavaScript (app.js)，下面是编译后的 JavaScript 代码
5）在页面中引用 JavaScript
6）构建或者重新构建项目时，你将看到提示是否重新编译 TypeScript 的信息
7）在 proj 文件中有如下内容将会被自动编译
8）运行此应用时会在页面上显示当前的日期和时间
7. 这段javascript代码的typescript声明文件怎么写
1.安装node，因为ts的编译器是js/ts写的；安装node后同时获得npm命令，这是nodejs世界里的包管理器（也可以看作node的app商店）；2.安装vs2015或者vscode，当然这不是必须的，但是这里强烈推荐写ts的工具，vs第一，vsc第二；3.vs自带了TypeScript（vs2012+，vs2015update1自带了ts1.7）,最新版本的typescriptforvs去官网下载即可,或者如果不依赖vs（比如mac环境）,可以用命令行装ts编译器npmi-gtypescript@next4.安装了ts后,就会有2个命令可用：tsc和tsd,tsc用来编译TypeScript代码,tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，熟练使用tsd，工作效率提升，因为减少了80%查文档的时间，所以写ts可以说是jser打通了任督二脉，上手任何新的开发环境都很快；5.命令行下载react的ts头文件,tsdinstallreact-global--save注意上面之所以写react-global而不是react，因为我们接下来使用比较原始的写法，直接把React当作全局对象使用，而不作为es6模块（必须用import引入），不需要Babel编译也不需要webpack打包；上面执行的tsd命令下载了ReactJS类库的头文件,下面用tsc命令创建一个ts项目配置文件tsc--init命令创建了tsconfig.json配置文件,打开该文件增加"jsx":"react",就是自动把tsx变成最终的js,而不是jsx把"outDir":"built",这行去掉,这样编译的文件就会在当前目录输出"target":"es5",这里es3改成es5,"watch":true是否监听文件修改如果你用的是vs,这行不重要6.下载reactjs文件，如果没有安装bower命令，可以手动去官网下载react类库bowerinstall--savereact7.以上环境配置好了,开始写代码:创建一个demo.tsx文件(注意这里是tsx,不是ts也不是jsx)创建一个demo.html,添加文件的引用8.demo.tsx写代码classMyClassextendsReact.Component{render(){returnhello{this.props.name};}}document.addEventListener('DOMContentLoaded',function(){ReactDOM.render(,document.body);});9.如果保存了demo.tsx后,没有在目录下发现自动编译了demo.js,那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行tsctsc命令会自动根据tsconfig.json里面配置的情况,自动帮你把代码编译成js,这是编译后的js文件10.打开demo.html可以看到效果了;11.至于题主说怎么学习,其实跟JS完全没两样,上面demo.tsx的代码,跟react官网的es6写法一模一样多了这两个prop和states类型约束,仅此而已;11.至于题主说怎么学习,其实跟JS完全没两样,上面demo.tsx的代码,跟react官网的es6写法一模一样多了这两个prop和states类型约束,仅此而已;12.下班,有空再写;－－－－－－时间分割－－－－－－13、继续写，对1-12进行润色，转入传教模式；以上的代码，工厂方法在创建子类的同时，做了一些初始化的动作，这与单纯的原型继承不同，所以在使用class方式进行子类继承，这样的写法是无效的；classMyViewextendsReact.Component{render(){returnhello{this.state.name};//会抛异常,因为state是null}//不起作用的getInitialState:(){return{name:'',age:20};}}需要改成如下方式，下面是官网给出的方案（这里TypeScript和ES6情况是一样的）classMyViewextendsReact.Component{constructor(props,context){super(props,context);this.state={name:'',};}render(){returnhello{this.state.name};}}16、当组件化遇到强类型：从前写JS组件，一般复用性比较差，基本写完就仍，原因如下：1）暴露了太多的Dom结构以及别的实现细节；2）命名挫，缺乏可记忆性，本身编程中变量和方法的命名对于码农来说就是天坑；3）JS天生缺乏私有和公共成员的约束，不加注释根本不知道怎么使用该类库/组件；React解决了把dom标签暴露出去的问题，TS则解决了语言层面的问题，并提供了强大的重构能力，你根本不需要记住组件的API，因为工具会列出来；
8. 如何做到先用typescript编译，再用babel转
很多项目使用typescript + webpack来搭建项目,但其中的打包顺序没搞明白,一般我们先用tsc将项目打包至es2015,然后使用babel转。
9. TypeScript 和 JavaScript 的区别
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言，我们已经熟知 TypeScript 是 JavaScript 的一个超集。JavaScript 和 TypeScript 的主要差异：
1、TypeScript 可以使用 JavaScript 中的所有代码和编码概念，TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如，TypeScript 使用类型和接口等概念来描述正在使用的数据，这使开发人员能够快速检测错误并调试应用程序
2、TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
3、JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
4、TypeScript 通过类型注解提供编译时的静态类型检查。
5、TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
6、TypeScript 为函数提供了缺省参数值。
7、TypeScript 引入了 JavaScript 中没有的“类”概念。
8、TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
10. 如何评价 TypeScript 1.7
1.7 相对而言并没有增加很多新的东西, async/await 其实 1.6 的时候就已经有了, 只是之前需要添加选项. 比较重要, 或者比较有意义的更新主要有两个.
第一个是编译目标为 ES6 时也可以指定模块方案, 然而这只是个过渡, 未来很多功能更够拆分开来配置是否输出 polyfill, 离 (主要使用 TypeScript 的开发者) 告别 Babel 也就越近了.
第二个是 this 类型, 对于喜欢链式调用的同学来说是一大福音, 也为其他场景提供了更多的灵活性.
除开这两个, 对对象/数组的字面量解构推导也更方便易用, 可以少一些冗余.
总体来说, 1.7 带来的特性并不是很多, 其实在 1.6 发布后不久, 1.8 就已经和 1.7 在同时进行开发.
--
另外至于 TypeScript 尚未支持 async/await 编译到 ES5, 主要原因有两点:
1. 会影响编译速度.
2. 生成的代码几乎不可读, 难以调试.