TypeScript快速入门

一：Typescript简介

维基百科： TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。C#的首席架构师以及Delphi和Turbo Pascal的创始人安德斯•海尔斯伯格参与了TypeScript的开发。Typescript是ES6的超集。添加了可选的静态类型（注意并不是强类型）和基于类的面向对象编程。（如果对ES6熟悉那么可以只关注类、装饰器部分的内容。）

中文官网：https://www.tslang.cn/。

特点：微软开发，javascript超集，遵循ES6标准，任何js语法都可以直接在ts里编写运行。Angular2框架是用Typescript开发的，背景是谷歌和微软，有可能是未来的前端脚本语言发展的主流方向。优点：支持ES6规范，学到的typescript语法未来是客户端脚本语言的主流语法。强大的IDE支持： 1、类型检查。 2、语法提示。 3、重构（修改方法名称的时候会自动把引用的地方都重构）是Angular2的首选开发语言。

二：环境搭建

主要是安装Typescript的代码编译器。

在线环境：http://www.typescriptlang.org/play/index.html

本地环境：一、安装好nodeJS环境。二、npm install -g typescript。三、tsc --version。

三：Typescript特性

1. 字符串特性

1.1多行字符串
使用``包裹跨行的字符串，示例：

var html = `<div>

<span></span>

</div>`
1.2：字符串模板
可以在多行字符串中使用模板，示例：
var names = 'daocheng';
function getImg() {
  return '<i></i>'
}

var html = `<div>${names}
<span>${getImg()}</span>
<div>
`
1.3：自动拆分字符串
function getData(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}

var names = 'daocheng';
var age = 23;
getData`你好，我的名字是${names}，我今年${age}岁了`

2. 参数新特征

2.1：参数类型

Typescript中的参数类型包括：boolean/number/string/array/tuple/enum/any/（null和undefined）/ void /never。其中元祖（tuple）、枚举、任意值、void类型和never是有别于Javascript的特有类型。

2.2：类型声明与默认参数

在Typescritpt中声明变量，需要加上类型声明，如boolean或string等。通过静态类型约束，在编译时执行类型检查，这样可以避免一些类型混用的低级错误。示例：

var names = 'daocheng';
function getData(name: stirng, age: number): boolean {
    return true
}

Typescript还支持初始化默认参数。如果函数的某个参数设置了默认值，当该函数被调用时，如果没有给这个参数传值或者传值为undefined时，这个参数的值就是设置的默认值。示例：

function max(x: number, y: number = 4): number {
    return x > y ? x : y;
}
let result1 = max(2); //正常
let result2 = max(2, undefined); //正常
let result3 = max(2, 4, 7); //报错
let result4 = max(2, 7); //正常
2.3： 可选参数

在javascript里，被调用函数的每个函数都是可选的，而在typescript中，被调用的每个函数的每个参数都是必传的。在编译时，会检查函数每个参数是否传值。简而言之，传递给一个函数的参数个数必须和函数定义的参数个数一致。但是实际开发中经常需要根据实际需求来确认参数，这时可以添加？来定义可选参数。示例：

function max(x: number, y: number) {
    if(y){
        return x > y ? x : y;
    } else {
        return x
    }
}
let result1 = max(2);
let result2 = max(2, 4, 7); //报错
let result3 = max(2, 4);
//注意：可选参数必须放在默认参数后面

3：函数特性

3.1：剩余参数

上面介绍的必选参数、默认参数以及可选参数共同点是只能表示某一个参数。当需要同时操作多个参数，或者并不知道会有多少参数传递进来时，就需要用到Typescript 里的剩余参数。示例：

function sum(x: number, ...restOfNumber: number[]){
    let result = x;
    restOfNumber.forEach(value => result += value);
    return result;
}
let result1 = sum(1, 2, 3, 4, 5, 6);
console.log(result1);

let result2 = sum(2);
console.log(result2);

let result3 = sum(2, 5);
console.log(result3);
3.2: generator函数

控制函数的执行过程，可以手动的干预函数执行。示例：

function getPrice(stock) {
    while (1) {
        yield Math.random() * 100;
    }
}
var priceGenerator = getPrice('dcc');
var limitPrice = 51;
var price = 100;
while (price > limitPrice) {
    price = priceGenerator.next().value;
    console.log(`this generator return ${price}`);
}
console.log(`buying at ${price}`);
3.3: 析构表达式

析构表达式又称解构，是ES6的一个重要特性，Typescript在1.5版本中开始增加了对结构的支持，所谓结构，就是将声明的一组变量与相同结构的数组或者对象的元素数值一一对应。分数组解构（[]）和对象解构（{}）两种。

数组解构示例:

let imput = [1, 2];
let [first, second] = input;
console.log(first); //相当于inputp[0]
console.log(second); //相当于input[1]
function f([first, second]) {
    console.log(first + second)
}
f{[1, 3]}   //结果是4

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); //1
console.log(second); //[2,3,4]

对象解构示例：

let test = {
    x: 0,
    y: 0,
    width: 15,
    heights: {
        height1: 10,
        height2: 20
    }
};
let { x, y: myY, width, heights: {height2} } = test;
console.log(x, myY, width, height2); //输出：0,10,15,20

4: 箭头表达式

用来声明匿名函数，消除传统匿名函数的this指针问题。示例：

function Test1(names: string) {
    this.names = names;
    setInterval(function() {
        console.log('my name is ' + this.names);
    }, 1000)
}
function Test2(names: string) {
    this.names = names;
    setInterval(() => {
        console.log('my names is ' + this.names)
    }, 1000)
}

var a = new Test1('daocheng'); //undefined
var b = new Test2('daocheng'); //daocheng

5: 循环

typescritpt中涉及三种高级循环方式：forEach()、for in、for of

forEach示例：

var myArray = [1, 2, 3, 4];
myArray.name = 'daocheng';

myArray.forEach(value => console.log(value)); //结果为1,2,3,4
//特点：不支持break，会忽略(name)

for in 示例：

var myArray = [1, 2, 3, 4];
myArray.name = 'daocheng';

for (var n in myArray ) {
    console.log(n)
}   //结果为1,2,3,4
//特点： 循环的结果是对象或者数组的键值。可以break

for of 示例：

var myArray = [1, 2, 3, 4];
myArray.name = 'daocheng';

for (var n of myArray) {
    console.log(n)
}   //结果是1,2,3,4
//特点：忽略属性，可以打断。当循环为字符串时，会把字符串中每个字符打出来

6：类

传统的JavaScript程序使用函数和基于原型（Prototype）继承来创建可重用的“类”，这对于习惯了面向对象编程的开发者来说不是很友好，Typescript中可以支持基于类（class）的面向对象编程

6.1: 类的声明

class Car {
    engine: string,
    constructor(engine: string) { 
        this.engine = engine;
    }
    drive(distanceInMeters: number = 0) { 
        console.log(`aaa is running` + this.engine)
    }
}

let car = new Car('petrol');
car.drive(100)

6.2: 类的封装、继承、多态
封装、继承、多态是面向对象的三大特性。上面的例子把汽车的行为写到一个类中，即所谓的封装。在Typescript中，使用extends关键字可以方便的实现.

继承。示例：

class Car {
    engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    drive(distanceInMeter: number = 0){
        console.log(`A car runs ${distanceInMeter}m
        powered by` + this.engine)
    }
}

class MotoCar extends Car {
    constructor(engine: string) {
        super(engine)
    }
}

let tesla = new MotoCar('electricity');
tesla.drive();
//其中子类MotoCar的实例对象tesla调用了父类Car的drive()方法。

多态示例：

class Car {
    engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    drive(distanceInMeter: number = 0){
        console.log(`A car runs ${distanceInMeter}m
        powered by` + this.engine)
    }
}

class Jeep extends Car {
    constructor(engine: string) {
        super(engine)
    }
    drive(distanceInMeters: number = 100) {
        console.log('jeep...')
        return super.drive(distanceInMeters);
    }
}
let landRover: Car = new Jeep('petrol'); //实现多态
> Jeep子类中的drive()方法重写了Car的drive()方法，这样drive()方法在不同的类中就具有不同的功能，这就是多态。注意：子类和派生类的构造函数中必须调用super()，它会实现父类构造方法。
6.3： 修饰符

在类中的修饰符可以分为公共（public）、私有（private）、和受保护（protected）三种类型。在Typescript里，每个成员默认为public，可以被自由的访问。

私有修饰符示例：

class Car {
    private engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
}
new Car('petrol').engine; //报错，私有属性无法在类的外部访问

受保护修饰符示例：

class Car {
    engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    protected drive() {
        console.log('drving')
    }
}

class MotoCar extends Car {
    constructor(engine: string) {
        super(engine)
    }
    moToDrive() {
        super.drive()
    }
}

let tesla = new MoToCar('electricity');
tesla.drive(); // 报错，受保护成员只有子类访问，实例对象不可
tesla,moToDrive()
6.4: 参数属性

参数属性是通过给构造函数的参数添加一个访问限定符来声明。参数属性可以方便地让我们在一个地方定义并初始化类成员。我们来改造6.1中的例子：

class Car {
    constructor(public engine: string) {}
    drive() { }
}
6.5: 抽象类

Typescript有抽象类的概念，它是供其他类继承的基类，不能直接被实例化。不同于接口，抽象类必须包含一些抽象方法，同时也可以包含非抽象的成员。抽象类中的抽象方法必须在派生类中实现。

abstract class Person {
    abstract speak(): void;
    walking(): void {
        console.log('walking');
    }
}

class Male extends Person {
    speak(): void {
        console.log('man wakling')
    }
}
6.6: 接口

接口在面向对象设计中具有极其重要的作用，在Gof的23种设计模式中，基本上都可见到接口的身影。长期以来，接口模式一直是Javascript这类弱类型语言的软肋，Typescript接口的使用方式类似于Java。
在Typescript中接口有属性类型、函数类型、可索引类型、类类型这几种，在Angular的开发中主要使用类类型接口，我们使用interface关键字定义接口并用implements关键字实现接口。

类类型接口示例：

interfance Animal {
    name: string;
    setName();
}

class Dog implements Animal {
    name: string;
    setName() {
        console.log(this.name)
    }
    constructor() { }
}
//接口更注重功能的设计，抽象类更注重结构内容的体现
6.7: 模块

ES6中引入了模块的概念，在TypeScript中也支持模块的使用。使用import和export关键字来建立两个模块之间的联系。懂点node都知道模块是什么了，不BB了。

7：装饰器

装饰器（Decorators）是一种特殊类型的声明，它可以被附加到类声明、方法、属性或参数上。装饰器有@符号紧接一个函数名称，如：@expression，expression求职后必须是一个函数，在函数执行的时候装饰器的声明方法会被执行。装饰器是用来给附着的主题进行装饰，添加额外的行为。（装饰器属于ES7规范）

在Typescript的源码中，官方提供了方法装饰器、类装饰器、参数装饰器、属性装饰器等几种每种装饰器类型传入的参数大不相同。这里我演示两种装饰器。

复合使用的例子：

function Component(component) {
    console.log('selector: ' + component.selector);
    console.log('template: ' + component.template);
    console.log('component init');
    return (target: any) => {
        console.log('component call');
        return target;
    }
}

function Directive() {
    console.log('directive init');
    return (target: any) => {
        console.log('directive call');
        return target;
    }
}

@Component({
    selector: 'person',
    template: 'person.html'
})
@Directive()
export class Person {}

let p = new Person();
//看不懂没关系，知道有这么个东西就可以了，Angular框架在依赖注入、组件等部分中有多个复合装饰器应用的场景.毕竟装饰器是ES7的草案标准。

8：泛型

参数化的类型，一般用来限制集合的内容。
示例：

class MinHeap<T> {
    list: T[] = [];
    
    add(element: T): void {
        //这里进行大小比较，并将最小值放在数组头部，功能代码省略。
    }
    min(): T {
        return this.list.length ? this.list[0] : null
    }
}

let heap = new MinHeap<number>();
heap.add(3);
heap.add(5);
console.log(heap.min())

9：声明文件

声明文件也称为类型定义文件，当我们项目中要使用第三方的Javascript库如jQuery、lodash等就需要用声明文件，声明文件是以.d.ts为后缀的形式存在的，其作用是描述一个Javascript模块文件所有导出的接口类型信息。

例如使用jquery:
npm install –save @types/jquery

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,692评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,482评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,995评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,223评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,245评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,208评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,091评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,929评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,346评论 1赞 311
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,437评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,037评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2赞 369
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2赞 354

推荐阅读更多精彩内容

  • Kotlin 快速入门
    前言 人生苦多，快来 Kotlin ，快速学习Kotlin！ 什么是Kotlin？ Kotlin 是种静态类型编程...
    任半生嚣狂阅读 26,201评论 9赞 118
  • TypeScript入门
    概述 TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的面向对象编程，同时也支持...
    oWSQo阅读 8,512评论 1赞 45
  • RN模拟器报错中文翻译
    { "Unterminated string literal.": "未终止的字符串文本。", "Identifi...
    一粒沙随风飘摇阅读 10,555评论 0赞 3
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,652评论 18赞 139
  • 也说成长
    杰克·伦敦的《热爱生命》想必大家耳熟能详，归结原因应该是其被节选入中学课本过。 偶然重读，略有所获。然而但凡后生作...
    洛基克阅读 616评论 0赞 2