3、类

一、ts中类的定义

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Test',
  setup() {
    class Person {
      age: number;
      name: string;
      constructor(age: number, name:string) {
        this.age = age;
        this.name = name;
      }
      getName (): string {
        return this.name;
      }
      setName(name: string): void {
        this.name = name;
      }
    }
    const p = new Person(18, '张三');
    alert(p.age) // 18
    p.setName('李四')李四
    alert(p.getName()) // 李四
    return { p }
  },
});
</script>

class Person{
    /* 实例的name */
    name:string
    age:number
    getName():void{
        console.log(this.name);
    }
}
var p:Person = new Person();
p.getName();
//当没有构造函数的时候,代码底层有自动补全构造函数

二、类的继承 —>extends、super()

1、子类可以继承父类的属性和方法，也可以定义自己的属性和方法

2、当子类的属性和方法与父类冲突时，子类会调用自己的方法和属性

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Test',
  setup() {
    class Person {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
      getName(): string {
        return `父类：this.name`;
      }
    }
    class Son extends Person { // extends：Son继承Person的类
      constructor(name: string) {
        super(name); // 当传入name时，super()调用父类的构造函数初始化name值
      }
      getName(): string {
        return `子类：this.name`;
      }
      work() {
        alert('子类的方法'); // 子类自己的方法
      }
    }
    const s = new Son('李四');
    alert(s.getName());  // 父类：李四--（当子类没有此方法时）
    alert(s.getName());  // 子类：李四--（当子类有和父类一样的方法时，会调用子类的方法）
    return { s };
  },
});
</script

三、类里面的修饰符

属性如果不加修饰符，默认是公有类型（public）

1、public：公有， 在类里面、子类、类外面都可以访问

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Test',
  setup() {
    class Person {
      public name: string;
      constructor(name: string) {
        this.name = name;
      }
      getName(): string {
        return this.name; // 类里面访问
      }
    }
    // const p = new Person('李四');
    // console.log(p.name) // 李四 --> 类外面访问
    class Son extends Person {
      constructor(name: string) {
        super(name);
      },
      work() {
        console.log(this.name) // 李四 --> 子类里面访问
      }
    }
    const s = new Son('李四');
  },
});
</script>

2、protected：保护类型， 在类里面、子类里面可以访问， 类外面不能访问

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Test',
  setup() {
    class Person {
      protected name: string;
      constructor(name: string) {
        this.name = name;
      }
      getName(): string {
        return this.name; // 类里面访问
      }
    }
    // const p = new Person('李四');
    // console.log(p.name) // --> 类外面访问 -- > ts语法会报错
    class Son extends Person {
      constructor(name: string) {
        super(name);
      },
      work() {
        console.log(this.name) // 李四 --> 子类里面访问
      }
    }
    const s = new Son('李四');
  },
});
</script>

3、private：私有， 在类里面可以访问，子类、类外面不能访问

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Test',
  setup() {
    class Person {
      private name: string;
      constructor(name: string) {
        this.name = name;
      }
      getName(): string {
        return this.name; // 类里面访问
      }
    }
    // const p = new Person('李四');
    // console.log(p.name) // --> 类外面访问 -- > ts语法会报错
    class Son extends Person {
      constructor(name: string) {
        super(name);
      },
      work() {
        console.log(this.name) // --> 子类里面访问 -- > ts语法会报错
      }
    }
    const s = new Son('李四');
  },
});
</script>

4、类的静态属性、方法

static：定义静态属性、方法

//static修饰的变量是类所共有的,只能通过类名去调用。
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Test',
  setup() {
    class Person {
      private name: string;
      static sex = '男'; // 静态属性
      constructor(name: string) {
        this.name = name;
      }
      getName(): string {
        return Person.sex;  // 静态属性只能通过类名去调用
      }
      static getSex(val: string): string { // 静态方法，其中无法直接调用类的属性
        return val + Person.sex;
      }
    }
    alert(Person.getSex('李四'));
    alert(Person.sex);
  },
});
</script>

四、属性类型接口类函数

即：定义接口的传参类型

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
export default defineComponent({
  name: 'Test',
  setup() {
    // 定义接口的传参
    interface userInfo {
      name: string;
      age: number;
      sex?: string; // ? --> 表示可选参数（传与不穿都可以）
      data: object
    }
    const info = {
      name: '张三',
      age: 18,
      sex: '男',
      data: {num: 1, str: 'xx'}
    };
    // 接口函数
    // 1、info: userInfo --> info内的参数必须符合userInfo中的类型
    // 2、参数顺序没有限制
    const getUserInfo = (info: userInfo) => {
      console.log(info.name, info.age, info.sex, info.data);
    };
    onMounted(() => {
      getUserInfo(info);
    });
  },
});
</script>

五、泛型

1、泛型函数

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
export default defineComponent({
  name: 'Test',
  setup() {
    // 箭头函数-定义泛型（必须要return）
    const getData = <T> (value: T): T => {
      console.log(value);
      return value
    }
    // 普通函数-定义泛型
    // function getData<T>(value: T): T {
    //   return value;
    // }
    onMounted(() => {
      getData<number>(123); // 传入的参数必须和定义的函数类型一致
    })
  },
});
</script>

2、泛型类

<template></template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
export default defineComponent({
  name: 'Test',
  setup() {
    // 泛型类
    class MinClass<T> {
      public list: T[] = [];
      add(val: T): void {
        this.list.push(val);
      }
      min(): T {
        var minNum = this.list[0];
        for (var i = 0; i < this.list.length; i++) {
          if (minNum > this.list[i]) {
            minNum = this.list[i];
          }
        }
        return minNum;
      }
    }
    onMounted(() => {
      const findNum = new MinClass<number>(); // 实例化类，并且制定了类的T代表的类型是number
      findNum.add(2);
      findNum.add(10);
      findNum.add(20);
      console.log(findNum.min()); // 最小值
    });
  },
});
</script>

本文来自

Vue

已关注