TypeScript
简单读读语法,作为十几年的程序员,TypeScript的语法还是很好理解的,为了不使学习枯燥,简单写了几个例子,练练手,一是可以学习语法,而是反正无论是Anguolar还是Ionic那都是需要一个后端来结合使用的,所以写个简单的服务端程序跑一下。当然,后端是不仅限于用Node的,JavaSpring等等也是一样有效,毕竟接口就是HTTP的JSON。
简单的步骤
一,首先要有TypeScript环境
一般Windows先安装NodeJS(https://nodejs.org/ja/),这样默认就有了NPM支持,通过NPM安装需要的包。
可以参考: http://www.runoob.com/w3cnote/getting-started-with-typescript.html 菜鸟教程,
通过NPM安装TypeScript支持
$ npm install -g typescript C:\Users\Demo\AppData\Roaming\npm\tsc -> C:\Users\Demo\AppData\Roaming\npm\node_modules\typescript\bin\tsc C:\Users\Demo\AppData\Roaming\npm\tsserver -> C:\Users\Demo\AppData\Roaming\npm\node_modules\typescript\bin\tsserver C:\Users\Demo\AppData\Roaming\npm `-- [email protected]
-g是全局支持,如果没有-g则只是当前目录有效,随手写个ts文件,比如输出到控制台的Demo001.ts
console.log("Hello!");
在当前目录下运行
tsc Demo001.ts
如果正常结束,并且同目录生成一个同名JS文件,那就是安装成功了。当然还是那句话,没有啥变化。但是这个就是TypeScript编译到JS的第一步。
tsc Demo001.ts -w
通过-w参数,监视这个文件,文件有变化即编译。
可能以后会说到 tsconfig.json,编译配置文件,也可能没时间就不说了。。。。可自行Google,通过这个文件可以定义输出目录,格式等等。。。
二,一个简单的Node HTTP实现的代码
现在试试使用Node的HTTP模块。https://www.w3schools.com/nodejs/nodejs_http.asp
一个最简单的HTTP模块的实现,大概是这个样子的。。。如果是NodeJS安装的,直接JS应该不需要安装其他依赖
var http = require('http'); //创建一个服务 http.createServer(function (req, res) { //回调函数,服务器如何响应 res.write('Hello World!'); res.end(); //结束响应 }).listen(8080); //监听8080端口
运行,这个JS文件
node DemoServer.js
打开浏览器,localhost:8080应该可以看到Hello World! 这就是一个简单的NodeHttp实现。
当然这只是慢慢长征的第一步。。。
三,上述例子的TS写法
import * as http from 'http'; class NodeServer001 { server; run() { this.server = http.createServer(this.requestHandler) this.server.listen(8080, (err) => { console.log(`server is listening on 8080!`) }) } requestHandler = (request, response) => { response.end('Hello World!') } } let mNodeServer001 = new NodeServer001(); mNodeServer001.run();
是不是清晰多了?反正有Class,属性,方法,个人感觉好多了。
当然,在正确编译之前,需要安装node的Type定义说明
npm install --save-dev @types/node
然后编译Ts到JS
tsc DemoServerTS001.ts
运行方式同上
node DemoServer.js
浏览器打开看到即可。。。。
总结
一,TypeScript支持类,写法更面对对象,更友好,可能是这是最近TypeScript火起来的重要原因把,原来JS的那种多层回调看着真心不爽。
二,第三方库类支持,原来JS 的require 基本就import进来即可
比如Mongodb
npm install mongodb // -g全局 npm install --save-dev @types/mongodb
都可以简单引入TS里面直接使用。
其他重要网站,学习TypeScript语法:
官方文档 : http://www.typescriptlang.org/docs/handbook/basic-types.html
非官方中文版: https://zhongsp.gitbooks.io/typescript-handbook/content/