TypeScript和ES6一些知识点汇总

1. 参数新特性

1.1 参数新特性

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

var myname:string = "bingxiong";

myname = 1; // IDE检查报错

myname = "1" // 正确是字符串

// 注意这个错误只会在IDE中显示出来

var alias = "xixi";

alias = 13; //错误 TS类型推断机制按第一次赋值的类型来

//还有这些类型

var alias:any = "xix"//任何类型

var age:nummber = 12;

var man:boolean = true;

//还可以给函数

function test(name:string):void{

return "";//报错没有返回值

}

test("hd");// 只用用字符串调用这个函数

// 自定义类型

class Person{

name:string;

age:number;

}

var zhangsan:Person = new Person();

zhangsan.name = "zhanhsan";

zhangsan.age = 18;

1.2 默认参数

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

var myname:string = "bing";

// 要注意带默认值的参数一定要声明在最后面

function test(a:string, b:string, c:string = "z"){

console.log(a);

console.log(b);

console.log(c);

}

// 调用的时候第三个参数不用传

test("x","y");// x y z

1.3 可选参数

通过问号声明可选参数

// 可选参数必须声明在必选参数的后面

function test(a:string, b?:string, c:string = "z"){

console.log(a);

console.log(b);

console.log(c);

}

// 调用的时候可选参数和默认参数可以不传

test("x");// x undefined z

//所以要注意处理可选参数没传这种情况

2. 函数新特性

2.1 Rest and Spread操作符 (…)

用于声明任意数量的函数参数

function func1(..args){

args.forEach(function(){

console.log(arg)

})

}

func1(1,2,3);

func2(1,2,3,4,5,6);

// 还有一个反过来的语法用...来把参数放进数组中传递

// 转化成固定数量的参数的调用

function func1(a,b,c){

console.log(a);

console.log(b);

console.log(c);

}

var args = [1,2];

func1(..args); // 1 2 undefined

var args2=[7,8,9,10,11];

func1(...args2); // 7 8 9

2.2 generator函数

控制函数的指定过程，手工暂停和恢复代码执行，这是es6规范

声明Generator函数使用*

function* doSomething(){

console.log("start");

yield;

console.log("finish");

}

// 必须声明成一个变量来调用

var func1 = doSomething();

func1.next();

现在一个买股票的例子，通过yield实现价格小于15的时候买入

function* getsStockPrice(stock){

while(1){

yield Math.random()*100;

}

var priceGenerator = getsStockPrice("IBM");

var limitPrice = 15;

var price = 100;

while(price > limitPrice){

price = priceGenerator.next().value;

console.log(`the generator return {$}price`);

}

2.3 析构表达式

function getStock(){

return {

code:"IBM",

price:{

price1: 200,

price2: 400

}

// 传统的写法需要三行代码

var stock = getStock();

var code = stock.code;

var price = stock.price;

// 析构一行实现上面三行并给code去一个别名

var {code:codex, price:{price2}} = getStock();

console.log(codex);

//针对对象的析构表达式是用{} 数组的析构表达式是用[]声明

var array1 = [1,2,3,4,5];

var [number1, , number2] = array1;

console.log(number1); // 1

console.log(number2); // 4

// 结合REST操作符

var [number1, number2, ...others] = array1;

console.log(number1); // 1

console.log(number2); // 2

console.log(others); // 3 4 5

// 析构表达式作为函数参数

function doSomething([number1, number2, ...others]){

console.log(number1);

console.log(number2);

console.log(others);

}

doSomething(array1);

3. 表达式与循环

3.1 箭头表达式

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

var sum = (arg1, arg2) => arg1 + arg2; //最简单的匿名函数,如果是一行就不用加{}

var sum = (arg1, arg2) => {

return arg1+arg2;

}

var sum = arg1 = {

console.log(arg1);

}

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

console.log(myArray.filter(value=>value%2 = 0)); // [2,4]

3.2 forEach(), for in 和for of

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

myArray.desc = "four number";

// 会把数组中的属性忽略掉

// 在forEach中是不支持break打断的

myArray.forEach(value => console.log(value)); // 1 2 3 4

// for in 循环的是属性的键值和名字

for(var n in myArray){

console.log(n) // 0 1 2 3 desc 是键名

console.log(myArray[n]) // 1 2 3 4 "four number" 这样获取键值

}

// for of 循环的是对象或数组的值

// 可以break掉也不会输出数组中的属性

// 也可以传字符串这种情况是一个字符一个字符的输出

for(var n of myArray){

console.log(n); // 1 2 3 4

if(n>2) break;

}

4. 面向对象

4.1 类

// 定义

class Person{

// 希望在实例化的时候需要传某项参数的时候就在构造函数中处理

constructor(public name:string){

console.log("构造函数只会在new的时候被调用一次");

this.name = name; // 在构造函数传递参数的时候如果加了public可以不要这一行就可以访问this.name

console.log(this.name);

}

//自动类的属性和方法

public:name; //默认的访问控制符就是public

eat(){

console.log("I am eating");

}

private:lastname; // 只能在类里面访问

protected:test; // 只能在子类和类里面访问到

}

// 类的实例化

var p1 = new Person("bingxiong");

p1.name = "batman";

p1.eat();

var p2 = new Person("bingxiong");

p2.name = "superman";

p2.eat();

// 类的继承

class Employee extends Person(){

constructor(name:string, code:string){

super(name);// 子类必须调用父类的构造函数和

this.code = code;

}

// 指定新的类型和方法

code:string;

work(){

// 子类调取父类的其他方法

super.eat();

this.doWork():

}

private doWork(){

console.log("i am working");

}

var e1 = new Employee("name", 1); // 由于继承了Person 因此要传递Person的构造函数需要的参数

e1.work();

4.2 泛型

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

workers:Array<Person> = []; // 用<>的就是这个数组的泛型

workers[0] = new Person("Zhangsan");

workers[1] = new Employee("lisi",2);

workers[2] = 2;// 报错，只能放Person或其子类的数据

4.3 接口

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

interface声明接口 implement 声明某个类实现某个接口

第一个使用方式：用接口来声明一些属性

interface IPerson {

name:string;

age:number;

}

class Person(){

constructor(public config: Iperson){

}

// 多传一个属性或者少传递一个属性都会报错

var p1 = new Person({

name : "zhangsan",

age : 18,

});

第二种方式：在接口中声明的方法，所有实现接口的类必须实现这个方法

interface Animal(){

eat();

}

class Sheep implements Animal(){

eat(){

console.log("i eat grass");

}

class Tiger implements Animal(){

eat(){

console.log("i eat meat")

}

4.4模块

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

一个文件在TS中就是一个模块，在模块的内部有两个关键字来支撑模块的特性 export 和 import

export var prop1;

var prop2;

export function func1(){

}

function func2(){

}

export class Clazz1(){

}

class Clazz2(){

}

4.5 注解

注解为程序的元素(类、方法、变量)加上更直观明了的说明，这些说明与程序的业务逻辑无关，而是指定的工具或框架使用的，基本上没什么用，不说了。

4.6 类型定义文件(*.d.ts)

类型定义文件用来帮助开发者在TS中使用已有的JS工具包如JQuery等。有这个类型定义文件就可以直接在TS使用JQuery了，这个类型定义文件在网上下载下来放在根目录里面就可以。

类型定义文件的下载地址，这里面有几乎所有JS框架的类型定义文件 https://github.com/DefinitelyTyped/DefinitelyTyped

或者直接使用typings安装https://github.com/typings/typings

TypeScript和ES6一些知识点汇总

1. 参数新特性

1.1 参数新特性

1.2 默认参数

1.3 可选参数

2. 函数新特性

2.1 Rest and Spread操作符 (…)

2.2 generator函数

2.3 析构表达式

3. 表达式与循环

3.1 箭头表达式

3.2 forEach(), for in 和for of

4. 面向对象

4.1 类

4.2 泛型

4.3 接口

4.4模块

4.5 注解

4.6 类型定义文件(*.d.ts)

Related Posts

Leave a Reply Cancel reply