TypeScript类的使用

TypeScript类的使用

    • 属性
    • 方法
    • 构造函数
    • extends继承
    • abstract抽象类
    • interface接口
    • get和set
    • 简化定义属性

使用class来定义类

class Person{

}

属性

  • 实例属性,通过实例访问
class Person{
	name:string="熏悟空";
	age.number=1000;
}

const person = new Person();
console.log(person.name)
  • 静态属性
    静态属性使用static修饰,通过类名访问
class Person{
	static name:string="熏悟空";
	age.number=1000;
}

console.log(Person.name)
  • 只读属性
    使用readonly修饰,赋值后不能改变
  • public公共属性
    默认是公共属性
  • private私有属性
    只能在类的内部访问或修改,可以在类的内部创建方法修改或访问属性

方法

  • 实例方法.通过实例访问
class Person{
	static name:string="熏悟空";
	age.number=1000;

	eat(){
	console.log("吃桃子");
	}
}
const person = new Person();
console.log(person.eat());
  • 静态方法
    使用static修饰的方法.通过类名访问
class Person{
	static name:string="熏悟空";
	age.number=1000;

	static eat(){
	console.log("吃桃子");
	}
}
console.log(Person.eat());

构造函数

使用constructor修饰,创建实例时调用

class Person{
	name:string;
	age.number;

	constructor(name:string,age:number){
		this.name = name;
		this.age = age;
	}
}

const person = new Person("熏悟空",1000);
console.log(person.name,person.age);

extends继承

使用继承子类将会拥有父类的所有方法和属性

class Animal{
    name:string;
    age:number;

    constructor(name:string,age:number){
        console.log("构造函数")
        this.name= name;
        this.age= age;
    }
    sayHello(){
        alert("动物在叫");
    }
}
class Dog extends Animal{

    sayHello(){
        console.log("汪汪汪");
    }
}

const dog = new Dog("旺财",3);
console.log(dog)
dog.sayHello()

需要注意,如果子类重写了构造方法,必须要使用super调用父类的构造方法

class Animal{
    name:string;

    constructor(name:string){
        console.log("构造函数")
        this.name= name;
    }
    sayHello(){
        alert("动物在叫");
    }
}
class Dog extends Animal{
	age:number;
	contructor(name:string,age:number){
		super(name);
		this.age = age;
	}
	
    sayHello(){
        console.log("汪汪汪");
    }
}

const dog = new Dog("旺财",3);
console.log(dog)
dog.sayHello()

abstract抽象类

使用abstract修饰的类是抽象类,

  • 抽象类不能被创建实例,
  • 类中方法使用abstract修饰,是抽象方法,可以不写方法体,子类必须实现抽象方法.
abstract class Animal{
	name:string;
	contructor(name:string){
		this.name = name;
	}
	abtract sayHello():void;
}

interface接口

使用interface修饰的类结构是接口,

  • 接口中所有属性不能定义值
  • 所有方法都不能有方法体
interface MyInterface{
	name:string;

	sayHello():void;
}

class MyClass implements MyInterface{
	constructor(name:string){
		this.name = name;
	}

	sayHello(){
		console.log("Hello");
	}
}

get和set

class Person{
    private name:string;
    private age:number

    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }

    getName(){
        return this.name;
    }
    setName(name:string){
        this.name = name;
    }

    get _age(){
        return this.age;
    }

    set _age(age:number){
        this.age = age
    }

}

const person = new Person("熏悟空",300);

person._age=360;
person.setName("沙和尚");
console.log(person._age);

注意
使用getter,setter 空格属性时需要注意以下两点

  • 如果属性名_开始,定义getset可以不加_
  • 需要注意这种方式可以实例名._属性名设置属性值和获取属性值

简化定义属性

class Person{
	constructor(public name:string,private age:number){
	}
}
const person = new Person("小明",25);
console.log(person)

你可能感兴趣的:(前端,typescript,javascript,前端)