你的位置:首页 > Java教程

[Java教程]浅谈TypeScript

  TypeScript为JavaScript的超集(ECMAScript6), 这个语言添加了基于类的面向对象编程。TypeScript作为JavaScript很大的一个语法糖,本质上是类似于css的less、sass,都是为了易于维护、开发,最后还是编译成JavaScript。趁着周末的时间,浅尝了Typescript,下面是总结的一些特性。

 

Types

所有类型都是any类型的子类型,其他类型被分成元类型(primitive types)和对象类型(object types)。
1.  元类型包括 number, boolean, string, null, undefined
2.  对象类型为所有类、模块、接口和字面量类型;

编译前:

var b: any;       // 所有JavaScript值var c;         // Same as c: anyvar a: number;        // 显式类型var d: boolean;var e: string; var f: string[] = ["hello", "world"];  //数组类型var g: [number, string] = [3, "three"]; //元组类型var h: string | number; //联合类型,几个不同的类型之中的一个function k() : void{ //void是any的子类型,是undefined的超类型,与其他类型无关   alert('hi man');}

编译后:

var b; // 所有JavaScript值var c; // Same as c: anyvar a; // 显式类型var d;var e;var f = ["hello", "world"]; //数组类型var g = [3, "three"]; //元组类型var h; //联合类型,几个不同的类型之中的一个function k() {  alert('hi man');} 

 

Expressions

表达式的东西比较多,但比较简单,仅列出一些关键的。

编译前:

var a = [2, 3, 4];var b = [0, 1, ...a, 5, 6]; //=>[0, 1].concat(a, [5, 6]);var f: (s: string) => string = function (s) {  return s.toLowerCase();};var X = x => Math.sin(x); //传入x值,返回计算结果var q = 1;var p = 2;[q, p] = [p, q]; //解构赋值 

编译后:

var a = [2, 3, 4];var b = [0, 1].concat(a, [5, 6]); //=>[0, 1].concat(a, [5, 6]);var f = function (s) {  return s.toLowerCase();};var X = function (x) { return Math.sin(x); }; //传入x值,返回计算结果var q = 1;var p = 2;_a = [p, q], q = _a[0], p = _a[1]; //解构赋值 var _a;

 

Statements

语句的内容也比较简单

1. 块级作用域

2. 简单变量声明、解构变量声明

3. If,Do,While,For-In,For-Of,Continue,Break,Return,Switch,Throw,Try  Statement

 

Functions

函数声明有三个关键地方:

编译前:

//默认值function strange(x: number, y = 2, z = x + y) {  return z;}console.log(strange(1));console.log(strange(3,2,1));//解构参数function drawText({ text = "", location: [x, y] = [0, 0], bold = false }) {  return text + ":" + x + y +":" + bold;}console.log(drawText({text:'lu',location:[1,2], bold:true}));//函数重载function pick(x: string): string;function pick(x: number): string;function pick(x): any {    if (typeof x == "string") {        return x + "string";  }    else if (typeof x == "number") {        return x + 10000;  }}console.log(pick("lu"));console.log(pick(1));

编译后:

//默认值function strange(x, y, z) {  if (y === void 0) { y = 2; }  if (z === void 0) { z = x + y; }  return z;}console.log(strange(1));console.log(strange(3, 2, 1));//解构参数function drawText(_a) {  var _b = _a.text, 
text = _b === void 0 ? "" : _b,
_c = _a.location,
_d = _c === void 0 ? [0, 0] : _c,
x = _d[0],
y = _d[1],
_e = _a.bold,
bold = _e === void 0 ? false : _e; return text + ":" + x + y + ":" + bold;}console.log(drawText({ text: 'lu', location: [1, 2], bold: true }));function pick(x) { if (typeof x == "string") { return x + "string"; } else if (typeof x == "number") { return x + 10000; }}console.log(pick("lu"));console.log(pick(1));

 

Interfaces

接口还可以继承接口或类 (Java只能是接口)

编译前:

interface ClockInterface {  currentTime: Date;  setTime(d: Date);}//编译后是没有interface这东西的class Clock implements ClockInterface {  currentTime: Date;  setTime(d: Date) {    this.currentTime = d;  }  constructor(h: number, m: number) { }}

编译后:

var Clock = (function () {  function Clock(h, m) {  }  Clock.prototype.setTime = function (d) {    this.currentTime = d;  };  return Clock;})();

 

Classes

类的内容跟后端语言非常像了,举个例子体会下就行了。

编译前:

class Point {  constructor(public x: number, public y: number) { }  public toString() {    return "x=" + this.x + " y=" + this.y;  }}class ColoredPoint extends Point {  constructor(x: number, y: number, public color: string) {    super(x, y);  }  public toString() {    return super.toString() + " color=" + this.color;  }  //static声明静态函数,不加static默认是实例函数  static f() {  }}//泛型class Pair<T1, T2> {  constructor(public item1: T1, public item2: T2) { }   public toString() {    return "Pair"+ this.item1.toString() + this.item2.toString();  }}console.log(new Point(1,2).toString());console.log(new ColoredPoint(1,2,'blue').toString());console.log(new Pair<Point,ColoredPoint>(new Point(1,2),new ColoredPoint(1,2,'blue')).toString());

编译后:

var __extends = (this && this.__extends) || function (d, b) {  for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];  function __() { this.constructor = d; }  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());};var Point = (function () {  function Point(x, y) {    this.x = x;    this.y = y;  }  Point.prototype.toString = function () {    return "x=" + this.x + " y=" + this.y;  };  return Point;})();var ColoredPoint = (function (_super) {  __extends(ColoredPoint, _super);  function ColoredPoint(x, y, color) {    _super.call(this, x, y);    this.color = color;  }  ColoredPoint.prototype.toString = function () {    return _super.prototype.toString.call(this) + " color=" + this.color;  };  //static声明静态函数,不加static默认是实例函数  ColoredPoint.f = function () {  };  return ColoredPoint;})(Point);//泛型var Pair = (function () {  function Pair(item1, item2) {    this.item1 = item1;    this.item2 = item2;  }  Pair.prototype.toString = function () {    return "Pair" + this.item1.toString() + this.item2.toString();  };  return Pair;})();console.log(new Point(1, 2).toString());console.log(new ColoredPoint(1, 2, 'blue').toString());console.log(new Pair(new Point(1, 2), new ColoredPoint(1, 2, 'blue')).toString());

 

Enums

枚举类型

编译前:

enum Operator {   ADD,   DIV,   MUL,   SUB }function compute(op: Operator, a: number, b: number) {   console.log("the operator is" + Operator[op]); }var b: boolean = true;compute(Operator.ADD, 1, 2);compute(Operator.ADD, 1, b); //编译时error,但能编译成js

编译后:

var Operator;(function (Operator) {  Operator[Operator["ADD"] = 0] = "ADD";  Operator[Operator["DIV"] = 1] = "DIV";  Operator[Operator["MUL"] = 2] = "MUL";  Operator[Operator["SUB"] = 3] = "SUB";})(Operator || (Operator = {}));function compute(op, a, b) {  console.log("the operator is" + Operator[op]);}var b = true;compute(Operator.ADD, 1, 2);compute(Operator.ADD, 1, b); //编译时error,但能编译成js

 

Namespaces

命名空间:为了避免出现同名的变量或函数的冲突。
import:能将其他命名空间或命名空间的元素引入使用。
export:能将元素(变量、函数、类等)导出到命名空间上。

编译前:

namespace A {  export class X { s: string }}namespace B {  import Y = A;  // Alias for namespace A  import Z = A.X; // Alias for type and value A.X  export var K = 2;  export function f(){     var x = new Z();   }}//变量只有在使用了,才会被生成

编译后:

var A;(function (A) {  var X = (function () {    function X() {    }    return X;  })();  A.X = X;})(A || (A = {}));var B;(function (B) {  var Z = A.X; // Alias for type and value A.X  B.K = 2;  function f() {    var x = new Z();  }  B.f = f;})(B || (B = {}));

 

Modules

TypeScript模块支持了ECMAScript6模块,同时兼容CommonJS, AMD,System模块,可以编译成相应模块。

编译指令:

tsc module system main.ts (只需要编译main.ts就行,log.ts在编译时会被引入)

编译前:

main.ts

import { message } from "./log";message("hello");

log.ts

export function message(s: string) {  console.log(s);}

编译后:

由于有几种模块编译的指令,生成的代码并不相同,就不一一列出来。

 

Ambients

环境声明向TypeScript域中引入一个变量,这对生成的JS里将没有任何影响。

PS: document等JS内建的对象通过文件‘lib.d.ts’默认包含在TS中;

可以这样引入jQuery库

declare var $;

 

总结

  Typescript的好处很明显,在编译时就能检查出很多语法问题而不是在运行时。不过由于是面向对象思路,如果是纯前端的人员(没有后端语言基础),那用起来应该是比较吃力的。有没有需求使用Typescript,我觉得写出代码是否易于维护、优雅,不在于用了什么框架、语言,在于开发者本身的架构思路。诚然好的框架和语言能间接帮助开发者写出规范的代码,但不代码就能写得好。所以如果Typescript能使团队易于协同开发,提高效率,那才考虑使用。如果都用得很痛苦,那还是简单的来。

 

附录

1. 安装Typescript

npm install -g typescript

2. GetSource

https://github.com/Microsoft/TypeScript/tree/v1.7.2

3. 文章里面的demo例子

下载地址:examples.zip

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/4947919.html