TypeScript 极速指南

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

安装 TypeScript

我们可以通过 npm 来安装 TypeScript:

npm install -g typescript

安装完成后我们就可以通过 tsc 命令来编译 .ts 文件了:

tsc hello.ts
node hello.js

如果你想通过一个命令来执行 .ts 文件,可以安装 ts-node 模块:

npm install ts-node --save-dev

现在就可以通过 ts-node hello.ts 来执行 .ts 命令了:

ts-node hello.ts

运行第一个 TypeScript 程序

源码可以在 examples 文件夹中找到:

// ./examples/p00-hello.ts
console.log('Hello World');
ts-node ./examples/p00-hello.ts

箭头函数

箭头函数(也就是lambda表达式)在 TypeScript 中的用法如下:

// ./examples/p00-arrow-function.ts
var result = [1 ,2 ,3].reduce(function(total, current) {
    return total + current;
});
console.log("result=" + result);

var result1 = [1, 2, 3].reduce((total, current) => total + current, 0);
console.log("result1=" + result1);

var even = [3, 1, 56, 7].filter(el => !(el % 2));
console.log("even=" + even);

setTimeout(function(){
    console.log("timeout 1")
},200);

setTimeout(() => console.log("timeout 2"), 200);

setTimeout(() => {
    console.log("timeout 3")
},300);
ts-node ./examples/p01-arrow-function.ts

既然是面向对象的语言,类的概念肯定是不可缺少,以下是定义了一个类并使用它,而且类和类之间有继承关系:

// ./examples/p02-the-class.ts
class Person {
    name: string;
    age: number;

    constructor(name) {
        this.name = name;
    }

    talk() {
        console.log("I am " + this.name);
    }
}

var p = new Person("Jay");
p.talk();

class Programmer extends Person {
    constructor(name) {
        // must contain a 'super' call
        super(name);
    }

    coding() {
        console.log(this.name + " is coding");
    }
}

var prog = new Programmer("Jerry");
prog.talk();
prog.coding();
ts-node ./examples/p02-the-class.ts

let

在 ES5 之前的 JavaScript 版本中,都是通过 var 来定义变量,用它定义的变量的作用域非常混乱,导致开发人员经常会得到意想不到的结果。TypeScript 可以用 var 来定义变量,它的作用域非常稳定不会让开发人员产生歧义:

// ./examples/p03-var-let.ts
var fns = [];
for(var i = 0; i < 5; i++) {
    fns.push(function(){
        console.log(i);
    });
}
fns.forEach(fn => fn());

var fns1 = [];
for(let j = 0; j < 5; j++) {
    fns1.push(function(){
        console.log(j);
    });
}
fns1.forEach(fn => fn());
ts-node ./examples/p03-var-let.ts

我们可以执行上面的代码,采用 varlet 定义的变量产生的结果有很大不同。

decorators

modules

在 TypeScript 中引入模块的定义,这样可以更好的拆分代码,让代码更加的高类聚和松耦合。

export module

我们通过 export 来导出模块。以下是我们定义的一个模块,里面有很多方法,我们通过 export 将模块的内容导出,以便外部引用:

// ./examples/p05-module-math.ts

function square(x) {
    return Math.pow(x, 2);
}
function log10(x) {
    return Math.log(x);
}

export { square, log10 };

import module

我们通过 import 来引用模块,其中 from 前面代表需要导入的模块名称,后面是模块对应的文件路径:

// ./examples/p05-module-import.ts
import {square, log10} from './p05-modules-math';

console.log(square(3));
console.log(log10(2));
ts-node ./examples/p05-module-import.ts

我们也可以通过 * as 来导入所有的模块:

// ./examples/p05-module-importall.ts
import * as math from './p05-modules-math';

console.log(math.square(2));
console.log(math.log10(20));
ts-node ./examples/p05-module-importall.ts

Types

让我们来看看 TypeScript 中的一些类型:

定义变量

由于 TypeScript 是强类型的语言,类型一旦定义就不能修改,如果尝试去修改变量的类型,会报错:

let foo: number = 42;

// foo = '42'; 
// Type 'string' is not assignable to type 'number'

any

当然 Typescript 也有 ES5 的特征,通过 any 定义一个任意类型的变量,它的值的类型是可以变化的。

let fo: any;
fo = {};
fo = 'abc';
fo = 3;
console.log('any:' + fo);

Enum

枚举类型,基本上所有强类型的语言都有这个类型:

enum ORDER_STATES {
    NEW,
    CONFIRMED,
    CANCELLED,
    FULFILLED,
    PROCESSING,
    DECLINED,
    PENDING,
    DELAYED
};
console.log('Enum:' + ORDER_STATES.CONFIRMED);

Array

数组类型:

let ids : number[];
ids = [];
ids.push(1);
ids.push(3);
ids.push(6);
ids.forEach(id => {
    console.log('Number Array:' + id);
});

let names : string[] = [];
names.push('Jay');
names.push('Min');
names.forEach(name => {
    console.log('String Array:' + name);
});

Function

方法:

function fn() {
    console.log('Function');
}
fn();

Class

类,和很多强类型语言一样,类有构造函数、属性、方法,还有继承等特点。当然也会有对类的成员的访问级别的修饰符:

  • public
  • protected
  • private
class Person {
    public name: string;
    protected age: number;
    private friend: string;
    constructor(name) {
        this.name = name;
    }

    talk() {
        console.log(`Class:I am ${this.name}!`);
    }
}

class Programmer extends Person {
    constructor(name) {
        super(name);
    }
}

let pro = new Programmer('jay');
pro.talk();

Interface

接口只是一种类型的定义,并没有实际的功能,它暴露出来的接口成员需要通过其它的类来实现。接口的出现让面向对象的语言在运行时可以再去确定具体实例的类型,这样体现了一种多态的特性:

interface Manager {
    project(): string;
}

class TechManager implements Manager {
    project() {
        console.log('Interface: implements Manager')
        return 'plan project';
    }
}

let tm = new TechManager();
tm.project();

Genericity

泛型也是高级语言中很常见的一种类型,它可以将类型以参数的形式传入到类中或者类对应的成员中,让类型更加的灵活:

class BTNode<T> {
    value: T;
    left: BTNode<T>;
    right: BTNode<T>;
}
let node1 = new BTNode<string>();
let node2 = new BTNode<number>();

function fn2<T>(arg: T){
    return arg;
}
fn2<string>('abc');

class Pair<K, V> {
    key: K;
    value: V;
}
let pair = new Pair<number, string>();
pair.key = 1;
pair.value = 'foo';

总结

TypeScript 让脚本语言更加的具有面向对象的思想,让它更加的高级,我们在写代码的过程中可以更加好的理解和组织代码,让我们更加快乐的编程。

以上代码都在:Github 中。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,951评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,606评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,601评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,478评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,565评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,587评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,590评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,337评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,785评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,096评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,273评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,935评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,578评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,199评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,440评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,163评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,133评论 2 352

推荐阅读更多精彩内容