TypeScript（二）类、泛型（not end）

(一)类

1.属性和方法

// 1.====属性和方法====
class Person {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    sayHello() {
        console.log('Hello' + this.name);
    }
}
// 创建实例对象
let p = new Person('csq', 18)
// 调用函数
p.sayHello()

2.类的继承

使用关键字extends进行继承 

// 2.====类的继承====
class Animal {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    sayHello(): void {
        console.log('动物在叫');
    }
}

class dog extends Animal {
    feet: number
    constructor(name: string, age: number, feet: number) {
        // 调用父类构造函数
        super(name, age)
        this.feet = feet
    }
    // 可以重写父类已有的函数，也可以直接继承父类的函数
    sayHello(): void {
        // 调用父类函数
        super.sayHello()
        console.log('汪汪汪');
    }
}
let d = new dog('小红', 6, 4)
d.sayHello()

3.存取器

通过get和set帮助控制对象成员的访问（有点像vue2响应式的get、set机制了）

// 3.====存取器====
class Name {
    firstName: string
    lastName: string
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName
        this.lastName = lastName
    }
    // 设置存取器
    // 访问器 get
    get fullName() {
        return this.firstName + '-' + this.lastName
    }
    // 设置器 set
    set fullName(value) {
        this.firstName = value.split('-')[0]
        this.lastName = value.split('-')[1]
    }
}
let n = new Name('c', 'sq')
console.log(n);

4.静态成员static

是属于类自己的方法和属性，不能通过实例对象获取到，只有类本身能够获取 

// 4.====静态属性和静态方法====
class A {
    static name: string
    constructor(name: string) {
        // this.name = name // this.name无法获取到静态属性name
    }
    static sayHello() {
        console.log('hello');
    }
}
let a = new A('csq')
// 实例对象无法获取属性和使用方法
// console.log(a.name);
// a.sayHello()

5.访问修饰符public、private、protected

(1)public 

public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 

(2)private

private 修饰的属性或方法是私有的，不能在声明它的类的外部访问

在子类只能通过super访问父类私有的属性或方法，其他情况下都无法访问 

(3)protected

protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许
被访问的

6.参数属性

(1)readonly

只读属性在构造函数中可以修改

// 1.readonly
class B {
    readonly name: string
    constructor(name: string) {
        this.name = name
    }
}
let b = new B('csq')
// 只读属性无法修改数据
// b.name = 'zkj' 

 readonly以及三个修饰符定义在参数上，那就是创建并且初始化的age参数

class B {
    // readonly name: string
    // readonly以及三个修饰符定义在参数上，那就是创建并且初始化的age参数
    constructor(readonly name: string) {
        // this.name = name
    }
}

7.抽象类

abstract class Y {//定义一个抽象类，为子类服务
    abstract name: string//抽象属性
    // constructor(name){
    //     this.name=name
    // }
    abstract sayHi()//不能有具体实现
}
// 不能够实例化
class Z extends Y {
    name: string
    constructor(name) {
        super()
        this.name=name
    }
    //在子类中去具体实现抽象类中抽象方法
    sayHi(){
        console.log('hi');
        
    }
}
const z = new Z("张三")
console.log(z.name);
z.sayHi()

8.类实现接口、接口继承类、接口继承接口

(1)类实现接口

// 1.类实现接口
interface ISing {
    // 这个方法是没有任何的实现
    sing()
}
interface IDance {
    dance()
}
class P implements ISing, IDance {//人 唱歌，跳舞
    sing() {
        console.log('唱歌');
    }
    dance() {
        console.log('跳舞');

    }
}
class An implements ISing, IDance {//动物 唱歌，跳舞
    sing() {
        console.log('唱歌');

    }
    dance() {
        console.log('跳舞');

    }
}
const p1 = new P()
const an = new An()
p1.sing()
an.sing()
p1.dance()
an.dance()

(2)类继承接口

// 2.接口继承类
class NewPerson {
    name: string
    constructor(name: string) {
        this.name = name
    }
    sayHi() {
        console.log('hi');

    }
}
interface IPerson extends NewPerson {//接口继承类中的实例属性和实例方法
    age: number
}
let person: IPerson = {
    name: "",
    age: 18,
    sayHi() {

    }
}

(3)接口继承接口

// 3.接口继承接口
interface IRun {
    run()
}
interface ISwim {
    swim()
}
// 接口可以继承其他的多个接口的
interface IActive extends IRun, ISwim {

}
// ...
class I implements IActive {
    run() {

    }
    swim() {
    }
}

9.声明合并

如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型

(二)泛型

1.泛型的基本使用

// 1.泛型的基本使用
function fun1<T>(name: T): T {
    return name
}
fun1<string>('77')
fun1(77) // 不写出泛型的类型会自动进行类型推断

2.多个泛型参数

// 2.多个泛型参数
// 实现元组内属性的交换
function fun2<T, U>(t: [T, U]): [U, T] {
    return [t[1], t[0]]
}
fun2(['1', 2])
fun2([[1, 2], '3'])

3.泛型约束

// 3.泛型约束
// 约束这个输入的元素必须要有length属性
interface Ilength {
    length: number
}
// 返回value的长度
function fun3<T extends Ilength>(value: T): number {
    return value.length
}
fun3('123')
fun3([1, 2, 3])
// fun3(123) // 报错 number没有length属性

4.泛型接口

好抽象。。泛型接口好抽象 。。等需要用到时就来补好

5.泛型类

TypeScript 中文网: 文档 - 泛型 

// 5.泛型类
class Tclass<NumType> {
    value: NumType
    add: (x: NumType, y: NumType) => NumType
}

let c = new Tclass<number>(77)
c.add = function(x,y){
    return x+y
}
c.add(1,2)  // 3