首页 > 其他 > 详细

typescript 类

时间:2020-06-29 17:24:21      阅读:56      评论:0      收藏:0      [点我收藏+]

访问限定符

//	Public	(方法可以在任何地方访问到,1.类中2.类的实例对象3.类的子类中4.子类的示例对象)
//	默认所有类的属性和方法都是public修饰

//	类内部
class Animal {
  public name: string; 
  public constructor(name: string) { // 函数体 }
  move(distance: number) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

const bird = new Animal(‘Tuture‘);
bird.move(520); // 打印 `Tuture moved 520m.`

//	类外部
const animal = new Animal(‘bird‘);
console.log(animal.name) // 打印 bird

//	在子类中
class Bird extends Animal {
  fly() {
    console.log(`${this.name} can fly!`); 
  }
}

const bird = new Bird(‘Tuture‘);
bird.fly() // 打印 `Tuture can fly!`

//	在子类外部
class Bird extends Animal {
  fly() {
    console.log(`${this.name} can fly!`);
  }
}

const bird = new Bird(‘Tuture‘);
console.log(bird.name) // 打印 Tuture

//	Protected	(只能在类和子类中访问)

//	在类中
class Animal {
  protected name: string;

  public constructor(name: string) { // 函数体 }

  move(distance: number) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

const bird = new Animal(‘Tuture‘);
bird.move(520); // 打印 `Tuture moved 520m.`

//	在子类中
class Animal {
  protected name: string;
  constructor(name: string) {
    this.name = name
  }
}

class Bird extends Animal {
  fly() {
    console.log(`${this.name} can fly!`);
  }
}

const bird = new Bird(‘Tuture‘);
bird.fly() // 打印 `Tuture can fly!`

//	Private	(只能在类的内部中访问)
class Animal {
  private name: string;
  public constructor(name: string) { // 函数体 }

  move(distance: number) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

const bird = new Animal(‘Tuture‘);
bird.move(520); // 打印 `Tuture moved 520m.`

只读修饰符

//	reaconly
class Animal {
  type: string;
  
  setType(type: string, readonly defaultType = ‘哺乳动物‘) {
    this.type = type || defaultType;
  }
}

抽象类

  • 不允许实例化
  • 抽象类中的方法(1,注解参数和返回值2,不给出具体的表现)
  • 只能被继承,不可以被实例化(且继承另一个抽象类,就必须实现抽象类中的抽象方法)
abstract class Animal {
  abstract makeSound(): void;	//	抽象类的中的抽象方法
  move(): void {
    console.log("Roaming the earth...");
  }
}
const bird = new Animal() 	// error
abstract class Animal {
  abstract makeSound(): void;
  move(): void {
    console.log("Roaming the earth...");
  }
}

class Bird extends Animal {
  //	必须实现抽象类中的抽象方法	
  makeSound(): void {
    console.log(‘Tuture tuture tuture.‘);
  }
}

构造函数

class Animal {
  name: string;
    //	1.声明注解类实例的类型
  static isAnimal(a: Animal): boolean {	//	值允许传入为Animal实例的参数a
    return a instanceof Animal;	//	返回一个 ainstanceof Animal的函数,永远为true
  }

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

  move(distance: number) {
    console.log(`Animal moved ${distance}m.`);
  }
}

//	2.声明构造函数
const bird: Animal = new Animal(‘Tuture‘);


//	注解
let AnimalCreator: typeof Animal = Animal	//	通过typeof Animal获取构造函数的类型,然后用此类型注解AnimalCreator

类与接口

//	类实现接口(类似于抽象方法)

interface Alarm {
    alert(): void
}
//	一旦implements了这个接口,那么也要实现接口中的方法
class Car implements Alarm{
    alert(){
        console.log(‘Car alarm‘)
    }
}
//	一旦implements了这个接口,那么也要实现接口中的方法
class Door implements Alarm{
    alert(){
        console.log(;Door alarm)
    }
}



//	一个类可以实现多个接口(不同于类的单继承)
interface Alarm{
    alert(): void
}
interface Light{
    lightOn(): void
    lightOff(): void
}

class Car implements Alarm,Light{
    alert(){
        console.log(‘Car alarm‘)
    }
    lightOn(){
        console.log(‘Car lightOn‘)
    }
    lightOff(){
        console.log(‘Car lightOff‘)
    }
}
//	接口继承类(类在声明时会声明一个类型,此类型用于注解类的实例	而接口继承类就是继承这个声明的类型)
class Point{
    x: number
    y: number
}
interface Point3d extends Point {
    z: number
}

let point3d: Point3d = { x: 1,y: 2,z: 3 }
//	类作为接口使用
//	主要用于React组件的Props和State进行类型注解
interface TodoInputProps {
  value: string;
  onChange: (value: string) => void;
}

interface TodoInputState {
  content: string;
  user: string;
  date: string;
}

const hardCodeDefaultProps = {
  value: ‘tuture‘,
  onChange(value: string) { console.log(`Hello ${value}`); }
}

class TodoInput extends React.Component<TodoInputProps, TodoInputState> {
  static defaultProps: TodoInputProps = hardCodeDefaultProps;

  render() {
    return <div>Hello World</div>;
  }
}

typescript 类

原文:https://www.cnblogs.com/lok660/p/13208784.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!