A. 如何评价 TypeScript
之前用egret写游戏的时候，去学了下typescript，作为javascript的超集，引入了class的写法，并且定义变量和方法的时候要声明数据类型，这个确实给javascript注入了一些活力，尤其是webstorm这种神IDE，支持了typescript，但是在学习成本上，让一些没有接触过后台语言的前端们，形成一种思想可能会有些吃力。
B. TypeScript 和 JavaScript 的区别
TypeScript 总体来讲最重要的在于 Scalable (不过一些最佳实践和规范还有待完善). 如果只是写个两三千行的脚本 TypeScript 并不是那么重, 但如果是五六千行, 甚至是数万行, TypeScript 的优势就能发挥出来了.至于 TypeScript 是 Scalable 的原因, 其实也很简单, 静态类型检查, 代码重构和语言服务. 这些都是 JavaScript 的弱势. 项目大了, 很多时候自己的代码怎么用都记不清楚, 当然第三发的类库就不用说了. 用了 TypeScript, 可以看清楚每一个对象的属性, 方法的参数等, 便利很多. 一些脑残的 Typo 也无影遁形.比如一个团队里, 你负责一个相对底层的库, 那么就不大需要再单独写一个详细的文档解释每一个方法属性, 直接在 TypeScript 里注释上就可以了. (JS 也能做, 但不准确, 还是得依赖文档.)再比如使用第三方库, 很多流行的库都能在 DefinitelyTyped 上找到定义文件, 同样可以方便地查看 API 而不用稍微拿不准就去查文档.重构就不说了.同样的这些个特性也适用于 Dart, 但是个人来讲更喜欢 TypeScript 的风格, 然后我用的也是 Visual Studio.目前我已经基本上把 TypeScript 作为生产工具来使用了, 新的项目基本都用 TypeScript 开发, 爽太多! 再也不怕改了哪儿忘了哪儿了, 而且到处都有准确的提示! (虽然现在的编辑器还有待提高, 但这个已经不能阻止人类使用 TypeScript 了.)当然就像之前提到的, 跟你的项目规模有关, 我的个人项目一般代码是在 5k 到 2w 行, 以 Web App 为主.
C. 怎么用typescript做网页
TypeScript项目和tsconfig.json
首先安装TypeScript编译器
npm i -g typescript
进入项目目录，新建一个 hello.ts
function sayHello(name: string) {
return 'Hello, ' + name;
}
let myName = 'Cheng Wang';
console.log(sayHello(myName));
然后执行
tsc hello.ts
编译器会生成 hello.js
function sayHello(name) {
return 'Hello, ' + name;
}
var myName = 'Cheng Wang';
console.log(sayHello(myName));
为了方便编译器和编辑器识别TypeScript项目，TypeScript约定了tsconfig.json文件来存储项目配置，如果运行 tsc 时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找。比如这样：
{
"compilerOptions": {
"outFile": "dist/app.js",
"sourceMap": true
},
"files": [
"src/app.ts"
]
}
直接运行 tsc ，会自动把 src/app.ts 编译到 dist/app.js 。
关于这个配置文件的更多选项，可以看 官方文档 。
使用模块
TypeScript中，模块的使用方法与ES6一致。
src/moles/utilities.ts ：
function getUrlParam(key: string) {
const REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
let result: string[] = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
} else {
return null;
}
}
export { getUrlParam }
src/app.ts ：
import { getUrlParam } from './moles/utilities';
let deviceType: string = getUrlParam('deviceType');
console.log(deviceType);
编译后的app.js（TypeScript编译器在输出单个文件时，只能使用AMD或System模块规范）：
define("moles/utilities", ["require", "exports"], function (require, exports) {
"use strict";
function getUrlParam(key) {
var REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
var result = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
}
else {
return null;
}
}
exports.getUrlParam = getUrlParam;
});
define("app", ["require", "exports", "moles/utilities"], function (require, exports, utilities_1) {
"use strict";
var deviceType = utilities_1.getUrlParam('deviceType');
console.log(deviceType);
});
使用NPM库
我们开发JS程序的时候，要用到NPM上的第三方的库，比如jQuery、Lodash等，但是绝大多数库都是用JS写的，没有类型提示，我们也不能在在代码中将这些库作为模块引入。
比如我们需要在项目中使用Lodash：
npm i --save lodash
然后在代码中引入：
import * as _ from 'lodash';
console.log(_.camelCase('helloworld'))
运行 tsc 则报错：
src/app.ts(1,20): error TS2307: Cannot find mole 'lodash'.
如果想在TypeScript代码中直接使用npm上的JS库，需要借助Typings这个工具。
Typings也是一个包管理器，它管理的是JS代码“定义文件”，用Typings安装相应的定义文件后，编辑器和编译器就可以去node_moles目录中找到相应的JS库，并编译到最终的JS代码中。
先安装Typings工具：
npm i -g typings
然后安装Lodash的定义文件：
typings install --save lodash
Typings会去NPM、Bower上寻找库的作者加的定义文件，但是有的库如jQuery并没有官方的定义文件，则需要从社区维护的 DefinitelyTyped 目录下安装：
typings install --save --ambient jquery
然后再tsconfig.json中的files配置中加入一条：
"files": [
"src/app.ts"，
"typings/main.d.ts"
]
此时编译就不会提示找不到模块了。
安装好定义文件之后，如果使用Visual Studio Code等对TypeScript支持较好的编辑器，则会提供更加强大的代码提示功能。
使用Webpack构建
TypeScript编译器支持很多模块组织规范，如ES6、commonJS、AMD等，但是如果想要将多个ts文件打包成一个文件，TypeScript只支持AMD和System，对于浏览器应用来说，还需要引入第三方的模块加载器。如果使用Webpack配合TypeScript的loader，则可以方便地构建浏览器可以运行的JS代码。
首先安装Webpack和ts-loader：
npm i webpack -g
npm i ts-loader --save-dev
然后配置项目目录中的webpack.config.js:
mole.exports = {
entry: './src/app.ts',
output: {
filename: 'app.js',
path: './dist'
},
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
},
mole: {
loaders: [
{ test: //.ts$/, loader: 'ts-loader' }
]
}
}
然后就可以通过运行 webpack 来构建了，构建生成的代码自带了webpack的模块加载器，可以直接在浏览器中运行。
D. 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的编程效果。
E. 如何修改webstome上typescript的编译器
两种方法：
安装最新的webstorm，集成的是2.3.1的Typescript
自己单独下好最新的Typescript，点那个edit，选custom directory 浏览到你下好的库，点确定就ok了
F. 如何使用TypeScript和Webpack编写网页应用
这些都是前端的工具并不能直接编写东西，webpack的话是一个前端的自动化构建的工具只能是提高团队合作和开发效率
G. typescript 怎样直接编译为浏览器中可执行的代码
使用webpack等工具转换成浏览器支持的模式
H. webstorm怎么安装typescript
webstorm2016是一款支持远程Node.js应用调试；：WebStorm 2016.1整体性能和功能上都有较大改进，更好的重构选项，更好的TypeScript支持，改进对AngularJS的支持，新增支持Vagrant和SSH控制台。
I. 如何使用webstorm和typescript编写nodejs
、下载安装Node.js，下载地址：https://nodejs.org/en/download/
2、下载安装webstorm2016.1.1;
3、使用Node的npm命令安装TypeScript编译器：(npm安装不顺利的话可以使用 https://npm.taobao.org);
ctrl+R，输入cmd回车进入；
找到node.js的安装目录：输入node.js安装所在的磁盘，回车进入；cd 输入node.js的安装目录路径，如下图：
执行“npm install typescripot -g”进行安装
4、打开webStorm,为TypeScript文件更改编译设置，File->Setting->File Watchers->TypeScript
选路径那里安装好typescript后应该会自动填写Program项的,自己选择的话有时候会找不到路径;重新点击设置进去添加就有了
转自:http://blog.chinaunix.NET/uid-30198739-id-5739410.html
顶
0
踩
0
上一篇Echarts 图标生成渐变色方法
下一篇AngularJS及Vue 项目中实现按需加载模块
我的同类文章
Javascript（42）
•Javascript函数节流2017-03-13阅读33
•Node.js 的本质2016-11-26阅读135
•Vue 固定头 固定列 点击表头可排序 表格组件2016-11-25阅读1118
•AngularJS及Vue 项目中实现按需加载模块2016-08-24阅读1338
•JS闭包之深刻理解2016-05-19阅读99
•nodeJS 返回 jsonp2017-02-08阅读70
•2016.11 MAC系统下安装mongodb 配合nodeJS简单使用mongodb2016-11-26阅读1343
•使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices2016-09-05阅读7184
•Echarts 图标生成渐变色方法2016-07-03阅读3350
•JS中的call()和apply()方法2016-04-19阅读88
更多文章
参考知识库
.NET知识库
3843关注|839收录
Node.js知识库
4751关注|578收录
猜你在找
新物联网开发框架：node.js+WRTnode
Node.js 核心技术 Stream (第二版)
征服Node.js 7.x视频课程（3）：基础知识
Node.js进阶教程第一步(基础篇)
征服Node.js 7.x视频课程（2）：交互式运行环境：REPL
转前端开发利器webStorm 30配置使用
JetBrains使用技能分享征集大赛优秀作品用webstorm开发NodeJS项目
实战使用Axure设计App使用WebStorm开发2 – 构建页面架构
第3篇TypeScript接口使用
WebStorm 2016 最新安装指南 破解 汉化 字体设置
关闭