TypeScript 学习笔记

TypeScript的优势

支持ES6规范
强大的IDE支持
Angular2的开发语言

IDE优势

类型检查

Typescript-在线complier

http://www.typescriptlang.org/play/index.html

Typescript-本地complier

安装node.js，npm

npm install typescript
tsc --version

字符串新特性

多行字符串``

ts

var content = `aaa
bbb
ccc`

js

var content = "aaa\nbbb\nccc";

字符串模板

ts

var myname = "zhai liang";var getname = function () {return "zhai liang";
}console.log(`<div>
<span>${myname}</span>
<span>${getname}</span>
</div>`);

js

var myname = "zhai liang";
var getname = function () {return "zhai liang";
};
console.log("<div>\n<span>" + myname + "</span>\n<span>" + getname + "</span>\n</div>");

参数的新特性

参数类型:在参数名称后面使用冒号来指定参数类型

声明类型

string字符串
any任何类型
number数字
boolean布尔类型true/false
void方法不需要任何返回值
方法声明类型方法里的参数也可以声明类型

function test(name:string):string{return ""
}

自定义类型

class Preson {
name: string;
age: number;
}
var zhangsan:Person = new Person();
zhangsan.name = "zhangsan";
zhangsan.age = 18;

默认参数：在参数声明后面用等号来指定参数的默认值

var myname: string = "zhai liang";
function test(a: string, b: string, c: string='jojo') {console.log(a);console.log(b);console.log(c);
}
test('xxx', 'yyy', 'zzz');
test('xxx', 'yyy');

声明参数的默认值放在参数的最后一位

可选参数：在方法的参数声明后面用问号来标明此参数为可选参数

不能声明必选参数，声明在必选参数的后面

var myname: string = "zhai liang";
function test(a: string, b?: string, c: string='jojo') {console.log(a);console.log(b);console.log(c);
}
test('xxx');

Rest and Spread操作符：用来声明任意数量的方法参数

...声明

方法一

function func1(...args) {args.forEach(function (arg) {console.log(arg);})
}
func1(1, 2, 3);
func1(7, 8, 9, 10, 11);

方法二

function func1(a, b, c) {console.log(a);console.log(b);console.log(c);
}
var args = [1, 2];
func1(...args);
var args = [7, 8, 9, 10, 11];
func1(...args);

generator函数：控制函数的执行过程，手工暂停和恢复代码执行

https://www.b abeljs.cn/repl/

Generator的声明方式类似一般的函数声明，只是多了个*号，并且一般可以在函数内看到yield关键字

ES6笔记（5）-- Generator生成器函数 - -渔人码头- - 博客园

destructuring析构表达式：通过表达式将对象或数组拆解成任意数量的变量

1

function getStock() {return {code: "IBM",price: 100}
}var { code, price } = getStock();console.log(code);
console.log(price);

2

function getStock() {return {code: "IBM",price: {price1: 100,price2: 200}}
}var { code: codex, price: { price2 } } = getStock();console.log(codex);
console.log(price2);

3

function getStock() {return {code: "IBM",price: {price1: 100,price2: 200},aaa: "xixi",bbb:"haha"}
}var { code: codex, price: { price2 } } = getStock();console.log(codex);
console.log(price2);

用析构表达式从数组里去取值

var array1 = [1, 2, 3, 4];
var [number1, number2] = array1;console.log(number1);
console.log(number2);

var array1 = [1, 2, 3, 4];
var [number1, , ,number2] = array1;console.log(number1);
console.log(number2);

var array1 = [1, 2, 3, 4];function doSomething([number1, number2, ...others]) {console.log(number1);console.log(number2);console.log(others);
}doSomething(array1);

表达式和循环

箭头表达式：用来声明匿名函数，消除传统匿名函数的this指针问题

forEach(),for in 和 for of

var myArray = [1, 2, 3, 4];
myArray.desc = "four number";myArray.forEach(value => console.log(value));

forEach不支持break；

var myArray = [1, 2, 3, 4, 5];
myArray.desc = "four number";for (var n in myArray) {console.log(myArray[n]);
}

var myArray = [1, 2, 3, 4, 5];
myArray.desc = "four number";for (var n of myArray) {if (n > 2) break;console.log(myArray[n]);
}

for (var n of "four number") {console.log(n);
}

面向对象

类（class）类是TypeScript的核心，使用TypeScript开发时，大部分代码都是写在类里面的。

类的定义，构造函数，类的继承

class Person{name;//属性eat() {//方法console.log("I'm eating");}
}
//new关键字
var p1 = new Person();
p1.name = "batman";
p1.eat();var p2 = new Person();
p2.name = "superman";
p2.eat();

class Person{//pprivate（私有的）关键字 protected（受保护的）关键字在类的里面可以访问 private name;//属性private eat() {//方法console.log("I'm eating");}
}
//new关键字
var p1 = new Person();
p1.name = "batman";//name是私有的
p1.eat();//eat私有var p2 = new Person();
p2.name = "superman";
p2.eat();

类的实例化

class Person{constructor() {console.log("haha");}name;eat() {console.log("I'm eating");}
}var p1 = new Person();
p1.name = "batman";
p1.eat();var p2 = new Person();
p2.name = "superman";
p2.eat();

class Person{constructor(public name:string) {this.name = name;}eat() {console.log(this.name);}
}var p1 = new Person("batman");
p1.eat();var p2 = new Person("superman");
p2.eat();

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

class Person{constructor(public name:string) {console.log("haha");}eat() {console.log(this.name);}
}class Employee extends Person{constructor(name: string, code: string) {super(name);console.log("xixi");this.code = code;}code: string;work() {super.eat();this.doWork();}private doWork() {console.log("I'm working");}
}
//Person是数组Array的泛型
var workers: Array<Person> = [];
workers[0] = new Person("zhangsan");
//报错是因为Person是字符串类型不是数字类型
workers[1] = new Person("list", "2");
workers[2] = 2;var el = new Employee("name", "1");
el.work();

接口：用来建立某种代码约定，使得其它开发者在调用某个方法或创建薪的类时必须遵循接口所定义的代码约定

interface Animal{eat();
}
class Sheep implements Animal{eat() {console.log("I eat grass");}
}class Tiger implements Animal{eat() {console.log("I eat grass");}
}

模块：模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源（类，方法，变量）暴露出去供外部使用，哪些资源只在模块内使用。

注解：注解为程序的元素（类，方法，变量）加上更直观更明了的说明，这些说明信息与程序的业务逻辑无关，而是供指定的工具或框架使用的。

类型定义文件（*.d.ts）

类型定义文件用来帮助开发者在Typescript中使用已有的JavaScript的工具包如：jQuery

jQuery定义文件 DefinitelyTyped/types/waypoints at master · DefinitelyTyped/DefinitelyTyped · GitHub

安装类型定义文件

https://github.com/typings/typings