day38

一、typescript的class类

①class类（和js里面的类是一样的）

class Person {
    // 必须先声明类型
    name: string
    age: number
    constructor(a: string, b: number){
        this.name = a
        this.age = b
    }
}
let p = new Person('张', 18)
console.log(p)

class Person {
    // 必须先声明类型，也可以设置初始化的值
    name: string = '张'
    age: number = 18
    constructor(name: string, age: number){
        this.name = name
        this.age = age
    }
}
let p = new Person('哈哈', 19)
console.log(p)

②类的两种继承（JS 中只有 extends，而 implements 是 TS 提供的）

• extends（继承父类）

• implements（实现接口）

extends（继承父类）

class Animal {
    move() { console. log('go...') }
}
class Dog extends Animal {
    bark() {
    console.log('汪')
  }
}
const dog = new Dog()

implements（实现接口）

interface Singable {
    sing(): void
}
class Person implements Singable {
  sing() {
    console.1og('唱的真难听！')
  }
}

③类成员可见性

public：表示公有的、公开的，公有成员可以被任何地方访问，默认可见性。

class Animal {
  public move() {
    console. log('加油！")
  }
}

protected：表示受保护的，仅对其声明所在类和子类中（非实例对象）可见

class Animal {
    protected move() { console. log('加油!') }
}
class Dog extends Animal {
  bark() {
    console.log('汪')
    this.move()
  }
}

private：表示私有的，只在当前类中可见，对实例对象以及子类也是不可见的

class Animal {
    private move() { console. log('加油!") }
    walk(){
        this.move()
    }
}

readonly：表示只读，用来防止在构造函数之外对属性进行赋值

class Person {
  readonly age: number
  constructor(age: number) {
    this.age = age
  }
}
new Person(20).age = 30

④抽象类（用来给子类做限定并提供模板）

abstract class Person {
    name: string
    readonly age: number
    constructor(name: string, age: number){
        this.name = name
        this.age = age
    }
}

class Son extends Person{}
let s = new Son('张三', 18)
console.log(s.name)

二、泛型（以往都是先确定类型，再进行赋值。但是有时候，无法先确定类型，这个时候泛型就有用了）

①函数泛型

function fn<T>(a: T){
    console.log(a)
}
fn<number>(10)
fn<string>('hello')
fn<boolean>(true)

function fn<T1, T2>(a: T1, b: T2){
    console.log(a, b)
}
fn<number, string>(10, 'hello')

②接口泛型

interface Person<T1, T2> {
    name: T1
    age: T2
}
const obj: Person<string, number> = {
    name: '张三',
    age: 18
}

③泛型类

class Person<T> {
    name: T
    constructor(name: T){
        this.name = name
    }
}
console.log(new Person<string>('张三'))

三、类装饰器（其实就是自己书写一个方法, 对一个类进行扩展）

// params表示的就是当前类本身，名称可以换成其他的
function fn(params: any) {
    params.prototype.play = function () {}
    params.prototype.study = function () {}
    params.prototype.sleep = function () {}
}

@fn
class Student {}

@fn
class Person {}

@fn
class Teacher {}

可以通过装饰器, 把不同的内容分开, 实现更加灵活

function addPlay(params: any) {
    params.prototype.play = function () {}
}
function addStudy(params: any) {
    params.prototype.study = function () {}
}
function addSleep(params: any) {
    params.prototype.sleep = function () {}
}

// 扩展 study 和 sleep
@addStudy
@addSleep
class Student {}

// 扩展 play 和 sleep
@addPlay
@addSleep
class Person {}

// 扩展 play 和 study
@addPlay
@addStudy
class Teacher {}

四、命名空间（给一个空间取名称做限定。在模块的基础上再次做了限定）

namespace Cart {
    export const addAmount = ()=>{
        console.log('改变购物车的数量')
    }
    export const deleteGoods = ()=>{
        console.log('删除商品')
    }
}
// Cart.addAmount()
// Cart.deleteGoods()

五、模块化

导出

1、在一个文件中, 所有的声明都可以利用 export 关键字进行导出

2、其实就是向外暴露该内容, 被其他模块使用

例如：

基础导出 moduleA.ts

// 导出一个变量
export const num = 100
export const str = 'hello world'

// 导出一个函数
export function fn() {}

// 导出一个类
export class Student {}
export class Person extends People {}

// 导出一个接口
export interface Users {}

重新导出

有的时候我们可能会在某一个文件内导入一段内容, 然后再次进行导出

举个例子

moduleA.ts

export const num = 100

moduleB.ts

export const str = 'hello world'

moduleC.ts

export interface Users {}

moduleIndex.ts

export * from './moduleA'
export * from './moduleB'
export * from './moduleC'

这样一来, 就相当于用 moduleIndex 文件对前面三个模块进行一个整合导出

导入

// moduleA
export function study () {}
export function play () {}

import { study, play } from './moduleA'