浅谈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: any
var 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: any
var 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

时间： 2024-12-07 00:35:44

浅谈TypeScript的相关文章

浅谈白鹭Egret

浅谈白鹭Egret 最近在做一个移动项目,技术选型的时候接触到了白鹭,简单了解了之后觉得挺合适的,最终就选择了这个引擎. 为什么会选择白鹭引擎呢? 我看上他主要有一下几点: 1.egret的类结构以及继承关系跟as3的一模一样,很容易上手. 2.egret尽量保持每个类的属性方法跟as3的一样,这样子的话as3里的写法在egret里面同样使用. 3.egret已经有一套完整的工具,可以方便的开发html5应用,也可以方便的发布手机原生应用. 4.白鹭公司的积极努力,使得每隔一小段时间都会有新版本

浅谈getaddrinfo函数的超时处理机制

在sockproxy上发现,getaddrinfo 解析域名相比ping对域名的解析,慢很多.我觉得ping用了gethostbyname解析域名.问题变为getaddrinfo解析域名,是否比 gethostbyname慢.写测试程序,分别用getaddrinfo和gethostbyname解析,发现getaddrinfo确实慢. strace跟踪发现,getaddrinfo和DNS服务器通信10次,gethostbyname和DNS服务器通信2次. gethostbyname是古老的域名解析

.net中对象序列化技术浅谈

.net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储和传输数 据.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.反之,反序列化根据流重新构造对象.此外还可以将对象序列化后保存到本地,再次运行的时候可以从本地文件 中“恢复”对象到序列化之前的状态.在.net中有提供了几种序列化的方式:二进制序列化

浅谈——页面静态化

现在互联网发展越来越迅速,对网站的性能要求越来越高,也就是如何应对高并发量.像12306需要应付上亿人同时来抢票,淘宝双十一--所以,如何提高网站的性能,是做网站都需要考虑的. 首先网站性能优化的方面有很多:1,使用缓存,最传统的一级二级缓存:2,将服务和数据库分开,使用不同的服务器,分工更加明确,效率更加高:3,分布式,提供多台服务器,利用反向代理服务器nginx进行反向代理,将请求分散开来:4,数据库的读写分离,不同的数据库,将读操作和写操作分开,并实时同步即可:5,分布式缓存,使用memc

单页应用SEO浅谈

单页应用SEO浅谈 前言 单页应用(Single Page Application)越来越受web开发者欢迎,单页应用的体验可以模拟原生应用,一次开发,多端兼容.单页应用并不是一个全新发明的技术,而是随着互联网的发展,满足用户体验的一种综合技术. SEO 一直以来,搜索引擎优化(SEO)是开发者容易忽略的部分.SEO是针对搜索(Google.百度.雅虎搜索等)在技术细节上的优化,例如语义.搜索关键词与内容相关性.收录量.搜索排名等.SEO也是同行.市场竞争常用的的营销手段.Google.百度的搜

浅谈html标签

浅谈html各常用标签用法 标题标签:<h1>-<h6>来表示,使标题字体变粗. <br />换行标记 <hr />水平分隔符 &nbsp空格符 &copy版权符 <a href>a标签超链接 href可接链接地址 <p>段落标签<blockquote>引用标签及可用做缩进 <table>表格中的<ul>无序列表<ol>有序列表<dl>自定义列表<row

浅谈二维中的树状数组与线段树

一般来说,树状数组可以实现的东西线段树均可胜任,实际应用中也是如此.但是在二维中,线段树的操作变得太过复杂,更新子矩阵时第一维的lazy标记更是麻烦到不行. 但是树状数组在某些询问中又无法胜任,如最值等不符合区间减法的询问.此时就需要根据线段树与树状数组的优缺点来选择了. 做一下基本操作的对比,如下图. 因为线段树为自上向下更新,从而可以使用lazy标记使得矩阵的更新变的高校起来,几个不足就是代码长,代码长和代码长. 对于将将矩阵内元素变为某个值,因为树状数组自下向上更新,且要满足区间加法等限制

[nRF51822] 14、浅谈蓝牙低功耗(BLE)的几种常见的应用场景及架构（科普类干货）

蓝牙在短距离无线通信领域占据举足轻重的地位—— 从手机.平板.PC到车载设备, 到耳机.游戏手柄.音响.电视, 再到手环.电子秤.智能医疗器械(血糖仪.数字血压计.血气计.数字脉搏/心率监视器.数字体温计.耳温枪.皮肤水分计等), 再到智能家居等领域均占有一席之地. 而蓝牙低功耗(BLE)是在蓝牙4.0协议上修改以适用低功耗应用场景的一种蓝牙协议. 随着上一股智能消费类电子大潮的到来,BLE的各种应用也像雨后春笋般在市场上铺开. 如果想 紧跟蓝牙协议的最新动态 ,可以在https://www.b

浅谈C++容器动态内存管理的优化

在信息学竞赛中,C++的容器的用途非常广泛,但经常因常数过大而超时.怎样才能提高它们的效率呢? 我们知道,容器是存储同一类对象的对象,既然"对象"我们无法改变,那么我们只能从"存储"入手,不难想到,不同容器在实现上的根本区别是它们对应着不同的内存组织方式,内存管理无疑是这种实现的核心,所以优化内存管理是加快容器效率的最好途径之一. 一.内存分配器简介 怎样才能优化内存管理呢?很简单,C++为我们提供了这样的接口,我们可以通过自定义容器模板中的最后一个allocato