ts总结之类

原创已于 2022-03-22 11:23:49 修改 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #typescript #javascript

于 2022-03-01 21:20:39 首次发布

typescript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了 TypeScript 中的类、构造函数、继承、抽象类、接口、属性封装（public、private、protected、get、set）以及泛型的用法，通过实例展示了如何在 TypeScript 中创建和使用这些概念，帮助读者深入理解 TypeScript 的面向对象编程特性。

其他内容
ts中的类型
 编译选项
 webpack打包
 类

1.类的简介

使用class关键字
对象中主要包含的两个部分：属性、方法

class Person {
  /**
   * 直接定义的属性是实例属性。需要通过对象的实例去访问：
   *  const per = new Person()
   *  Person.age
   * 
   * readonly 代表只读属性
   * static readonly 代表静态只读属性
   */
  // 定义实例属性
  name: string = '孙悟空'
  // 定义类属性(静态属性)：不需要创建对象就能使用的静态属性
  static age: number = 18

  // 定义方法
  /**
   * 以 static 为类方法
   * 没有的化直接通过实例调用
   */
  sayHello() {
    console.log('Hello 大家好')
  }
}

const per = new Person()
// console.log(per)
// console.log(per.name)
// console.log(Person.age)

// per.name = '荔枝'
// console.log(per.name)
per.sayHello()

2.构造函数 constructor

constructor中的this谁创建就属于谁

(function () {
  class Dog {
    name: string
    age: number
    // 构造函数会在对象创建时调用
    constructor(name: string, age: number) {
      // 在实例方法中，this代表当前的实例（对象）
      // 谁创建，this属于谁
      // 可以通过this给新建对象中添加属性
      // console.log('构造函数执行了', this)
      this.name = name
      this.age = age
    }
    bark() {
      console.log(this.name)
    }
  }
  const dog = new Dog('小黑', 4)
  const dog1 = new Dog('小白', 2)
  // console.log(dog)
  // console.log(dog1)
  dog.bark()
  dog1.bark()
})()

3.继承 extends

使用继承后，子类将拥有父类所有属性和方法，通过继承可以将多个类中共有的代码写在一个父类中，这样只需要写一次就可以同时拥有父类中的属性和方法
如果想要添加父类没有的属性或方法，直接添加即可；如果在子类中添加了父类同样的方法，则子类会覆盖掉父类的方法，这称之为方法的重写。

(function () {
  // Animal被称为父类，Dog与Cat称为子类
  class Animal {
    name: string
    age: number
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }
    sayHello() {
      console.log('动物在叫')
    }
  }
  // 定义一个Dog类，继承Animal类
  class Dog extends Animal {
    sex: string
    constructor(name: string, age: number, sex: string) {
      // 如果在子类中写了构造函数，在子类的构造函数中必须对父类的构造函数进行调用
      super(name, age)  // 调用父类的构造函数
      this.sex = sex
    }
    run() {
      console.log(`${this.name}在跑`)
    }
    sayHello() {
      console.log('汪汪汪')
    }
  }
  // 定义一个Cat类，继承Animal类
  class Cat extends Animal {
    sayHello() {
      // 在类的方法时， super表示当前类的父类
      super.sayHello()
    }
  }
  const dog = new Dog('旺财', 5, '公')
  console.log(dog)
  dog.sayHello()
  dog.run()
  const cat = new Cat('咪咪', 3)
  cat.sayHello()
})()

4.抽象类 abstract

创建抽象类的目的：用来被别人继承。抽象类本身不能被用来创建对象，抽象类中能添加抽象方法

(function () {
  abstract class Animal {
    name: string
    age: number
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }
    /***
     * 定义一个抽象方法
     * 抽象方法使用abstract开头，没有方法体
     * 抽象方法只能定义在抽象类中，子类必须对抽象方法重写
     */
    abstract sayHello(): void;
  }
  class Dog extends Animal {
    sayHello() {
      console.log('汪汪汪')
    }
  }
  class Cat extends Animal {
    sayHello(): void {
    }
  }
  const dog = new Dog('旺财', 18)
  console.log(dog)
  dog.sayHello()
})()

5.接口 interface

接口就是用来定义一个类的结构，用来定义一个类中应该包含哪些属性和方法，同时接口也可以当成类型声明去使用

(function () {
  // 描述一个对象的类型
  type myType = {
    name: string,
    age: number,
    [proname: string]: any,
  }
  // interface
  interface myInterface {
    name: string;
    age: number;
  }
  interface myInterface {
    gender: string;
  }
  const obj: myInterface = {
    name: 'ss',
    age: 34,
    gender: '男'
  }
  /**
   * 接口可以在定义类的时候去显示类的结构
   *    接口中所有的属性都不能有实际的值
   *    接口只定义对象的结构，而不考虑实际值
   *    在接口中，所有方法都是抽象方法
   */
  interface myInter {
    name: string;
    sayHello(): void;
  }
  /**
   * 定义一个类时，可以使用类去实现接口
   *    实现接口就是使类满足接口的要求
   */
  class MyClass implements myInter {
    name: string
    constructor(name: string) {
      this.name = name
    }
    sayHello(): void {
      console.log('大家好~~~~')
    }
  }
})()

6.属性的封装 public、private、protected、get、set

(function () {
  class People {
    /**
     * ts可以在属性前添加属性的修饰符
     *    public 修饰的属性可以在任意位置被修改,子类也可以访问
     *    private 私有属性，私有属性只能在类的内部进行访问，子类不可以访问
     *    protected 保护属性，只有在当前类和子类中访问，实例不能访问
     */
    private _name: string;
    private _age: number;

    constructor(name: string, age: number) {
      this._name = name
      this._age = age
    }
    /**
     * getter 用来读取属性
     * setter 用来设置属性
     * 
     */
    // 定义方法，用来获取name属性
    // getName() {
    //   return this._name
    // }
    // // 定义方法，用来修改name属性
    // setName(value: string) {
    //   this._name = value
    // }
    // getAge() {
    //   return this._age
    // }
    // setAge(value: number) {
    //   if (value >= 0) {
    //     this._age = value
    //   }
    // }

    // ts中设置getter方法的方式：代理，类似数据劫持
    get name() {
      return this._name
    }
    set name(value: string) {
      this._name = value
    }
    get age() {
      return this._age
    }
    set age(value: number) {
      this._age = value
    }
  }
  const per = new People('孙悟空', 20)

  // 现在属性是在对象中设置的，属性可以任意修改，不安全
  // per._name = 'er'
  // per._age = 29

  // console.log(per.getName())
  // per.setName('test')
  // per.setAge(40)
  // console.log(per)
  per.name = 'www'
  per.age = 30
  console.log(per)

  class A {
    num: number;
    private count: number;
    protected age: number;
    constructor(num: number, count: number, age: number) {
      this.num = num
      this.count = count
      this.age = age
    }
  }
  class B extends A {
    test() {
      console.log(this.num)
      // this.count;
      console.log(this.age)
    }
  }
  class C {
    // 和上面的写法等价
    constructor(public name: string, private age: number) {
    }
  }
})()

7. 泛型

在定义函数或者是类时，如果类型不明可以使用泛型

// 泛型
function fn<T>(a: T): T {
  return a
}

// 可以直接调用具有泛型的函数
let res1 = fn(10)  //不指定泛型，ts可以自动对类型进行判断
let res2 = fn<string>('hello')   //指定泛型

function fn2<T, K>(a: T, b: K): T {
  console.log(a, b)
  return a
}
let res3 = fn2<number, string>(123, 'xyz')

interface Inter {
  length: number,
}
// T 必须是Inter的实现类
function fn3<T extends Inter>(a: T): number {
  return a.length
}

class myClass<T>{
  name: T;
  constructor(name: T) {
    this.name = name
  }
}
const mc = new myClass<string>('孙悟空')