typescript学习之二（类、泛型、接口等）

程序员文章站 2022-07-12 15:53:55

...

扩展运算符

1第一种用法，放在形参中，表示函数中接受任意数量的参数

function funa(...args: any) {
    args.forEach(function (e: any) {
        console.log(e)
    })
}
funa(1, 2, 3, 4, 5);//1，2，3，4，5
funa(3, 4, 5, 6, 7, 8, 9);//3，4，5，6，7，8，9

2第二种用法，函数中参数固定，放在形参中，自动识别参数个数，然后对应，如果参数数量不够，显示undefined

function funb(a: any, b: any, c: any) {
    console.log(a);
    console.log(b);
    console.log(c);
};
let arra = [1, 2, 3, 4];
// 放在形参中会自动识别参数个数，然后对应，如果参数数量不够，显示undefined
funb(...arra);// ts会报错，但是能运行   1，2，3
let arrb = [0, 9]
funb(...arrb);// ts会报错，但是能运行   0，9，undefined

二、generator函数

1、含义

Generator 函数是 ES6 提供的一种异步编程解决方案控制函数的执行过程，手动暂停和恢复代码执行（ES6规范，ts暂不支持）

2、关键字yield

在函数声明时在函数名前面使用"*",其效果相当于给函数打断点,在函数调用时通过声明成一个变量，使用next();掉用一次，执行到一个yield

function* buySomething(params: any) {
    while (true) {
        yield Math.random() * 100;
    }
}
let buyBook = buySomething('book');
let limitPrice: number = 20;
let initPrice: number = 100;
while (initPrice > limitPrice) {
    initPrice = buyBook.next().value;//next()报错，因为ts目前不支持这样写法
    console.log(`${initPrice}`)
}
console.log(`finial price is ${initPrice}`);
// 输出结果为当价格小于15的时候，就跳出循环
// 99.5543943222932
// 20190619.js:72 23.90651757980966
// 20190619.js:72 17.169879754605667
// 20190619.js:74 finial price is 17.169879754605667

三、析构表达式

1、从数组中取值

let array1 = [1,2,3,4,5,6,7,8];
let [number1, number2] = array1;     // 1  2
let [,,number3,,, number6] = array1;  //3  6

2、从数组中取值

Let object = {
name:’haha’;
age:20;
}
Let {name,age} = object  //haha  20
//name和age要和对象中的属性名保持一致，写成names就获取不到了

箭头函数

1、匿名函数的调用

 var aa = function(x){
     alert(x);
}(5);//5
(function(x){alert(x);})(5);//5

2、箭头函数

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

var sum = (arg1, arg2) => { 
return arg1 + arg2;
}

五、ts新增的for-of

foreach for-in for-of区别

foreach不能打断，会忽略对数组添加属性 --输出的是属性对应的值

for-of可以打断，会忽略对数组添加属性 --输出的是属性对应的值

for-in可以打断，--输出的是对象的属性、数组的下标

let array = [4,5,6];
array.xiao = '123';//ts报错，但是可以运行
// foreach不能打断，会忽略对数组添加属性   --输出的是属性对应的值
array.forEach(e=>{
    console.log('foreach'+e)
});
// for-of可以打断，会忽略对数组添加属性  --输出的是属性对应的值
for(const e of array){
    if (e>5) {
        break;
    }
    console.log('for-in'+e);//for-in4 for-in5
}
// for-in可以打断，--输出的是对象的属性、数组的下标
for (const key in array) {
    if (array[key]>5) {
        break;
    }
    console.log('for-of'+key);//for-of0 for-of1
}

六、ts类

1、关键字class

可以用class + 类名定义一个类，可以为类添加属性和方法，new+类名()就可以实例化类

Constructor构造函数

不能在外部被访问到，只有在实例化的时候被调用一次

//ts类--声明class关键字 以及constructor
// class Person{
    // private表示只能被内部访问
    // private age = 20;
//     name: any;//不写的话默认是public
//     constructor(name:string){
//         this.name = name;
//         console.log(name)
//     }
//     eat(){
//         console.log(this.name+' is eating')
//     }
// }
// 下面这种写法跟上面一样
class Person{
    // private表示只能被内部访问
    private age = 20;
    constructor(public name:string){
        this.name = name;
        console.log('i am '+name);
    }
    eat(){
        console.log(this.name+' is eating')
    }
}
// 实例化 new关键字
let person1 = new Person('haha');//i am haha
person1.eat();//haha is eating
let person2 = new Person('xixi');//i am xixi
person2.eat();//xixi is eating

2、关键字public privite protect

public能在类的内部和外部使用，private只能在类的内部访问，protected能在类的内部和子类中使用

3、类的继承

类的继承：extends 父类，重新建立构造函数的话必须要调用父类的构造函数；

继承时，用super关键字来调用父类的构造函数，以及父类中的方法

//继承
class Employee extends Person{
    // 子类的constructor必须用super（）调用父类的构造函数--并传参
    constructor(name:string,public code:string){
        super(name);
        this.code = code;
        console.log('xixi')
    }
    work(){
        // super的第二个用法，调用父类的方法
        super.eat();
        console.log(this.name+' is working');
    }
    isCode(){
        console.log(this.name+' said : my code is '+this.code)
    }
}
let employee1 = new Employee('xiaoxiao','102');
//先执行父类的构造函数，i am xiaoxiao ; 然后执行子类自己的构造函数xixi;
employee1.work();
//super语句，执行父类的eat方法，xiaoxiao is eating ；然后xiaoxiao is working
employee1.isCode();
// xiaoxiao said :my code is 102

七、泛型

1、概念

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

使用尖括号<>定义泛型

泛型用来指定只能放某一类型的元素，不能放其它类型的元素

2、例子

声明workers类型为数组且泛型为Person，表明workers里面只能放Person类型的数据


let arrc :Array<Person> = [];
arrc[0] = new Person('zhangsan');
arrc[1] = new Employee('lisi','108');
// arrc[2] = 12;//ts报错，表示不能把12赋值给Person

console.log(arrc);
// 输出的数组中每一项都是一个类
//(2) [Person, Employee]
// 0: Person {name: "zhangsan", age: 20}
// 1: Employee {name: "lisi", age: 20, code: "108"}

八、接口

1、接口

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

2、关键字

interface：可以声明参数的中必须包括的字段

implements: 类实现接口必须包括接口中的字段和方法

interface规定了字段和方法，用类去implements时必须要遵循接口的定义

使开发变得更加规范化

用法

用法一：接口interface用于规定参数的类型（必须所有属性都具备）

//ts接口interface--一个对象，里面放类型规则或者约定方法
// 方式一用接口申明参数类型
interface Info{
    num:number;
    want:string
}
class Peoples{
    constructor(public arr:Info){

    }
}
// 传递参数的时候就必须跟接口中约定的类型一致
let peoples1 = new Peoples({
    num:1,
    want:'book'
})

用法二：实现某接口的类，必须实现该接口里的方法。

// 方式二 在接口对象中声明一个方法，所有类实现（implements）这个对象。就需要在类中实现这个方法
interface Foo{
    eat():any;
}
class Sheep implements Foo{
    eat(){
        console.log('i eat grass');
    }
}
class Tiger implements Foo{
    eat(){
        console.log(' i eat meat');
    }
}

九、模块

一个文件就是一个模块

export 对外暴露

import 引入

十、注解

使用@符号定义一个注解；告诉一个外部框架如何来处理ts的一个类或程序

十一、类型定义文件

*.d.ts 帮助开发者在ts中使用已有的js工具包

下载工具github

例如引入jquery

上一篇： TypeScript 简明教程：基本类型（二）

下一篇： SpringBoot项目中shiro过滤器的重写以及配置

typescript学习之二（类、泛型、接口等）

Typescript类型、接口、类、泛型综合使用

typescript学习之二（类、泛型、接口等）

TypeScript（数据类型、函数、类、接口、泛型）