TypeScript入门

TypeScript简介：

微软开发 javascript的超集遵循ES6脚本语言的规范

添加了遵循ES6的语法增加了面向对象编程的特性

angular2是TypeScript编写的，angular2是Google公司所开发的。微软与谷歌共同支持TypeSript。

课程内容：

1.学习TypeScript的好处

2.安装习TypeScript的开发环境

3.TypeScript的概念／特性等

前置知识：

1.理解ES5、ES6、JavaScript、TypeScript的概念和关系

2.基础的javaScript的开发经验

TypeScript的优势：

1.支持ES6规范

2.强大的IDE(Integrated Development Environment 集成开发环境)的支持

（1）类型检查指出类型错误

（2）语法提示根据上下文，提示代码

（3）重构对变量等等进行修改时，会对其它地方的相同变量等进行相应修改

3.Angular2的开发语言

搭建TypeScript开发环境

1.TypeScript 在线compiler的使用

原因：现今主流浏览器的支持ES5的语法，所以需要将ES2015的语法转换为ES5的语法，即将TypeScript转化为JavaScript的语法。

2.TypeScript-本地compiler

（1）使用命令行工具转译TypeScript代码：

转到ts文件所在文件夹；

输入命令： tsc hello.ts

（2）在IDE中：（以webstorm为例）

点击： webstorm -> Preferences -> Languages & Frameworks -> TypeScript -> 选中 Enable TypeScript Compiler -> 点击 Apply -> 点击 OK

字符串新特性

1.多行字符串

var content = `aaa

bbb

ccc`;

使用``进行换行，转译后的代码为 var content = "aaa\nbbb\nccc";

2. 字符串模板

在多行字符串中插入变量或者表达式

var myname = 'zhai liang';

var getName = function () {

return 'zhai liang';

}

console.log(`hello ${myname}`);

console.log(`hello ${getName()}`);

console.log(`

${myname}

${getName()}

`);

编译后的结果：

var myname = 'zhai liang';

var getName = function () {

return 'zhai liang';

};

console.log("hello " + myname);

console.log("hello " + getName());

console.log("

\n" + myname + "\n" + getName() + "\n

");

将变量或者表达式放入： ${} 中

3. 自动拆分字符串

例子：

function test(template, name, age) {

console.log(template);

console.log(name);

console.log(age);

}

var myname = 'zhai';

var getAge = function () {

return 18;

}

test`hello my name is ${myname},i'm ${getAge()}`;

打印结果为：

Array(3)0: "hello my name is " 1: ",i'm "2: ""

zhai

当多行字符串调用方法时，方法会自动将变量或者表达式的值作为参数传入方法中；

同时，变量或者表达式会将多行字符串分割为数组的各个项，并将数组作为第一个参数传入方法中。

参数新特性：

1.参数类型：

（1）定义：在参数名称后面添加参数类型例子：

var myname: string = 'yangfan';

其它的变量参数类型为 number boolean number

（2）变量推断机制: 当声明变量时，没有添加变量类型。当重新赋值时，会默认其对象类型为第一次赋值的类型；

例子： var myname = 'yangfan'; myname = 'fan'; 当添加其它类型数据时，会提示错误。

（3）特殊变量类型：any

var hel: any = 13; hel = 'yang'; 不会报错

（4）函数的参数类型：

function test(name: string): string { //

return name;

};

第一个参数类型为：参数类型; 第二个参数类型为：返回值的类型；

（4）自定义类型：

构造函数：

class Person {

age: number;

}

var yang: Person = new Person ();

yang.name = 'fan';

yang.age = 18;

2.参数默认值：

给函数参数指定类型后，当不传参/少传参时，会报错

可以给参数指定默认值：

function test(a: string, b: number, c: Boolean = false) {

console.log(a);

console.log(b);

console.log(c);

};

test('aaa', 1);

结果： 'aaa' 1 false;

** 注意**：传默认值的参数应写在最后面

3.可选参数：

函数参数中可以指定可选参数，即不是必填的

function test(a: string, b?: number, c: Boolean = false) {

console.log(a);

console.log(b);

console.log(c);

};

test('aaa');

结果为 'aaa' undefined false;

**注意**：可选参数必须放在必选参数之后

函数新特性：

1. Rest and Spread 操作符

作用：声明可以传任意数量参数的方法

例子：

function test(...args) {

args.forEach(function (arg) {

console.log(arg);

})

};

test(1, 2, 3);

test(5, 6, 7, 8, 9, 10);

打印结果：

1 2 3

5 6 7 8 9 10

2. generator函数

作用：控制函数的执行进程，用于暂停、恢复函数执行

例一：

function* test(){

console.log(1);

yield

console.log(2);

}

var num = test();

num.next();

描述：必须使用变量接收函数，输入一次num.next();会执行一次函数；

当遇到yield时，会停顿。再次输入num.text(),则会再次执行。

例二：

function* test(){

while(true) {

yield Math.random()*100;

}

var num = 15;

var money = 100;

while(money > num) {

money = test().next().value;

console.log(`money is ${money}`);

}

console.log(`buy now ${money}`);

描述：通过不断地循环从而不断地执行函数，过程一直在重复：执行、打断

3.destructuring析构表达式：

该表达式作用：将对象/数组拆解为任意数量的变量

例一：

function test() {

return {

age: 18

}

var {name, age } = test();

console.log(name);

console.log(age);

输出结果为： 'yang' 18

**注意**：声明的变量名必须与对象属性名相同

例二：

function test() {

return {

age: 18,

fruits: {

apple: 5,

banana: 8

}

var { name: myName, fruits: {apple} } = test();

console.log(myName);

console.log(apple);

输出结果为： 'yang' 5

注意：1.当有对象的嵌套时，也可输出整个对象，也可利用析构表达式输出对象的属性

2.可以给变量另取名字： name: myName

例三：

var arr = [1, 2, 3, 4];

var [,num1, num2,] = arr;

console.log(num1);

console.log(num2);

输出结果为：2 3

例四：

var arr = [1, 2, 3, 4];

var [, num1, num2, ...others] = arr;

console.log(num1);

console.log(num2);

console.log(others);

输出结果为： 2 3 [4]

总结：析构表达式可以很方便的使用对象或数组中的属性、元素，来进行操作。

表达式和循环

1.箭头表达式：

声明匿名函数，消除传统匿名函数中的this指向问题

样式：

(1). 普通样式： var sum = (arg1,arg2) => {return arg1 + arg2};

(2).函数只有一行代码时，var sum = (arg1,arg2) => arg1 + arg2;

(3).只有一个参数时，var sum = arg => arg * 3;

(4).无参时，var sum = () => 1;

使用示例：

(1).选出偶数

var arr = [1, 2, 3, 4, 5, 6];

var arr2 = arr.filter(val => val % 2 == 0);

(2).this 指向：

var test = name => {

this.name = name;

setInterval(() => console.log(this.name),1000);

}

var obj = new test('yang');

其中定时器中的this指向被定义的对象，所以打印的是： 'yang'.

2.forEach()、for in 和 for of

var arr = [2, 3, 4];

arr.name = 'arrrrrrr';

arr.forEach(val => console.log(val));

结果为： 2 3 4 并没有 'arrrrrrr';

for (var val in arr) {

console.log(arr[val]);

}

结果为： 2 3 4 'arrrrrrr';

for (var n of arr) {

console.log(n);

}

结果为： 2 3 4;

for in 和 for of 的区别： for in 遍历的是键名，而for of 遍历的是键值。

另外，for of 可以使用break 来打断。,for of 还可以遍历对象、字符串。

for (var n of arr) {

if (n > 2) break;

console.log(n);

}

结果为： 2;

面向对象新特性：

1.typeScript 类：

（1）.类的声明与使用：

class Person {

name;

run() {

console.log("i'm runing");

}

var you = new Person();

you.name = 'who';

you.run();

var him = new Person();

him.name = 'whooo';

him.run();

类的定义方式比较简单。

其中方法的声明转换成javaScript 为：

Person.prototype.run = function () {

console.log(name);

};

存入其Person.prototype中。

声明构造函数的访问权限：默认为 public 可选的为 private protected

默认：

class Person {

public name;

public run() {

console.log("i'm runing");

}

class Person {

private name;

private run() {

console.log("i'm runing");

}

class Person {

protected name;

protected run() {

console.log("i'm runing");

}

其中，public 是外部可以访问； private 是内部可以访问； protected是内部以及子类可以访问。

构造函数的constructor方法：该方法只会在实例化中执行一次：

class Person {

name;

constructor(name: string) {

this.name = name;

};

run() {

console.log(this.name);

};

}

var you = new Person('you');

you.run();

var him = new Person('him');

him.run();

结果为： 'you' 'him';

也可这样定义：

class Person {

constructor(public name: string) {

this.name = name;

};

run() {

console.log(this.name);

};

}

public 不能省；

（2）. 类的继承关键字： extends

class Person {

constructor(public name: string) {

this.name = name;

};

run() {

console.log(this.name);

};

}

class soldier extends Person{

clothes;

skills() {

}

var bing1 = new soldier('yang');

bing1.run();

bing1.clothes = 'fdfdf';

bing1.skills();

其中类soldier 会继承类 Person 的所有方法、属性。

（3）. 调用父类的属性和方法：

class Person {

constructor(public name: string) {

this.name = name;

console.log('haha')

};

run() {

console.log("i'm running");

};

}

class soldier extends Person{

constructor(name: string, clothes: string) {

super(name);

console.log('xixi')

this.clothes = clothes;

}

clothes;

skills() {

super.run();

this.kill();

}

private kill() {

console.log('kill enermy');

}

var bing1 = new soldier('yang','hat');

bing1.skills();

结果为： 'haha' 'xixi' "i'm running" 'kill enermy';

其中，一般是在子类的构造函数constructor 中调用父类的属性，且方式为：super(name);

调用父类的方法：super.run();

另外，注意 private关键字的用法。

2. TypeScript 泛型：

作用：参数化的类型，用于限制集合的内容

class Person {

constructor(public name: string) {

this.name = name;

console.log('haha')

};

run() {

console.log("i'm running");

};

}

var arr: Array = [];

arr[0] = new Person('heee');

**其中，数组arr的元素只能为 Person 及其子类的对象。**

3. TypeScript 接口关键字： Interface

(1)通过接口声明参数规范：

interface Iperson {

age: number;

}

class Person {

constructor(public config: Iperson) {

}

var p1 = new Person({

age: 14

});

声明方法时，对方法参数的类型进行约束

(2)通过接口声明方法：

interface Animal {

eat();

}

class Sheep implements Animal {

eat(){

console.log('grass')

}

class Tiger implements Animal {

eat() {

console.log('meat')

}

在定义构造函数中，引入接口（注意引入方式），就必须使用接口的方法。

4. 模块：

a.ts

var prop1;

export var prop2;

function f1(){};

export function f2(){};

class P1{};

export class P2{};

b.ts

import {f2, P2, prop2} from "./a";

console.log(prop2);

f2();

var person = new P2();

总结：模块以文件为单位，可将代码分割、重用，并可决定暴露的部分。

5.注解：

不太理解，需要在实际项目中体会

6.类型定义文件： .d.ts

将工具文件命名的后缀改为: .d.ts

最后编辑于：2017.12.11 06:33:44

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

TypeScript入门

推荐阅读更多精彩内容