【typescript入门手册】class 类

简介: 【typescript入门手册】class 类

class 相当于es5中升级版的构造函数

class 中无需用“ ,” 分割 , 添加会执行报错

class People {
    name: string = '张三';
    // 1、属性除了可以定义在constructor中,也可以定义在最顶部
    age: number = 18; // 年龄
    sex: boolean = true; // 为true 性别男
    // 2、static 设置为(静态)私有属性,在class本身的属性,并不是实例对象中的属性
    static address: string = '北京顺义';
    // 3、constructor()方法是类的默认方法,
    // 通过new命令生成对象实例时,自动调用该方法。
    // 一个类必须有constructor()方法,如果没有显式定义, 一个空的constructor()方法会被默认添加。
    // 属性是实例对象自身的属性,而不是定义在实例对象的原型上面。
    constructor(sex, age) {
        this.sex = sex;
        this.age = age;
    }
    // 4、类的实例属性、方法默认定义在原型class上,使用this.可以定义在对象上
    hi() {
        return `你好呀 ${this.name}, 你今年 ${this.age} 岁啦,你是一个 ${this.sex ? '男生' : '女生'},住在 ${
            People.address
        }`;
    }
}
// 5、继承 People ,创建一个新的calss 类
class Lisi extends People {
    constructor(sex, name) {
        super(true, name);
        console.log(this.name);
    }
    // 在原先基础上,新增一个setName 方法来修改name名称
    setName(name: string): string {
        this.name = name;
        console.log('super-sex', this.sex);
        // 6、在 ES6 中,super 是一个关键字,用于在子类中调用父类的构造函数和方法。
        return super.hi();
    }
}
// 7、类必须使用new调用,否则会报错。
// 这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。
const zhangSan = new People(false, 19);
const zhangHi = zhangSan.hi();
const liHi = new Lisi(false, 29).setName('李四');
console.log('zhangHI', zhangHi);
console.log('liHi', liHi);
// 8、存取器 使用 getter 和 setter 可以改变属性的赋值和读取行为:
// 和vue中的computed 计算属性异曲同工,用与计算转换等操作
// vue中的计算属性 有缓存、和数据依赖
class Animal {
    constructor(name) {
        this.name = name;
    }
    get name() {
        return 'Jack';
    }
    set name(value) {
        console.log('setter: ' + value);
    }
}
const a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log('存取器:', a.name); // Jack

【typescript 中新特性】

//1、 修饰符
// public 公共
// private 私有
// protected 保护,与private类似,区别在于protected可以在子类访问
class TypePeople {
    public name: string; // 公共
    private age: number = 19; // 外部不可访问\
    protected address: string = '北京顺义区'; // 仅在 子类可用
    public constructor(name) {
        this.name = name + this.age;
    }
}
class childrenPeople extends TypePeople {
    constructor(name) {
        super(name + ' 🐂 ');
    }
    getAddress() {
        return `hi ${this.name} 你家在 ${this.address}`;
    }
}
const newPeople = new TypePeople('谢广坤');
const newChildren = new childrenPeople('谢飞机');
console.log(newPeople.name, newChildren.getAddress());
// 继承 - 看第5序章
// 抽象类 abstract 
// abstract 用于定义共同的方法和属性,抽离到抽象类, 特性可以被继承,不可被实例化。
// 使用抽象类的好处是它提供了一种通用的方式来定义父类,以及要求子类遵循规定并提供自己的实现。
// 【案例】
// 假设你正在写一个动物园管理系统,你有不同类型的动物,例如狗、猫和鸟。每种动物都有一些共同的属性和行为,例如它们都有名字和年龄,它们都可以发出叫声。
// 在这种情况下,你可以使用抽象类来定义一个叫做 "Animal" 的类作为基类。这个抽象类可以包含共同的属性和方法,如下所示:
abstract class AnimalNew {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  abstract makeSound(): void;
}
// 在这个例子中,"AnimalNew" 类是一个抽象类。它定义了两个属性:name 和 age,以及一个抽象方法 makeSound()。
// 现在你可以创建动物的具体子类,例如狗、猫和鸟,并实现它们自己的特殊行为。下面是一个示例:
class Dog extends AnimalNew {
  breed: string;
  constructor(name: string, age: number, breed: string) {
    super(name, age);
    this.breed = breed;
  }
  makeSound(): void {
    console.log("Woof!");
  }
}
class Cat extends AnimalNew {
  color: string;
  constructor(name: string, age: number, color: string) {
    super(name, age);
    this.color = color;
  }
  makeSound(): void {
    console.log("Meow!");
  }
}
// 在这个例子中,Dog 类和 Cat 类都继承自 AnimalNew 抽象类,并且实现了 makeSound() 方法。
// 使用抽象类的好处是它提供了一种通用的方式来定义父类,以及要求子类遵循规定并提供自己的实现。在上述例子中,所有的动物都有共同的属性和方法,但每种动物的具体实现是不同的。
// 这样,你可以创建不同类型的动物对象,并调用它们的方法,例如:
const dog = new Dog("旺财", 3, "柯基");
dog.makeSound(); // 输出:Woof!
const cat = new Cat("小咪", 2, "灰色");
cat.makeSound(); // 输出:Meow!


相关文章
|
5天前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
19 3
|
5天前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
5天前
|
JavaScript
类和继承在TypeScript中的使用详解
【4月更文挑战第23天】TypeScript中的类和继承详解:使用`class`定义类,包含属性和方法,如`Animal`示例。通过`extends`实现继承,如`Dog`继承`Animal`,可重写父类方法。使用访问修饰符`public`、`protected`、`private`控制成员可见性。抽象类和抽象方法用于定义基类和强制子类实现特定方法,提升代码组织和可维护性。
|
5天前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
31 0
|
5天前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
42 0
|
5天前
|
JavaScript 前端开发
vite+typescript从入门到实战(一)
vite+typescript从入门到实战
67 0
|
5天前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
34 4
|
5天前
|
存储 JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
47 0
|
5天前
|
JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
34 0
|
5天前
|
JavaScript 前端开发 索引
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
47 0