typescript快速入门--面向对象编程

typescript面向对象

接口interface

• 接口是对象属性，方法的抽象，也可以理解为预定义

// 使用接口来抽象方法，接口是需要具体去实现的
interface Animals {
  name: string;
  age: number;
  eat: (some: string) => string;
}

// 定义一个类型来具体实现上面的接口，这种情况可以看作是一个json对象来理解
var Dog: Animals = {
  name: "dog",
  age: 12,
  eat: (some: string) => {
    return "eat " + some;
  },
};

console.log(Dog.name);
console.log(Dog.age);
console.log(Dog.eat("rice"));

// 接口直接实例
var Cat = <Animals>{};
Cat.name = "cat";
Cat.age = 12;
Cat.eat = (some: string) => {
  return "eat " + some;
};

console.log(Cat.name);
console.log(Cat.age);
console.log(Cat.eat("猫粮"));

// 接口继承
interface Human extends Animals {
  read: () => string;
}

var Man = <Human>{};
Man.name = "man";
Man.read = () => "read book";
console.log(Man.read());
console.log(Man.name);

类class

• 类是面向对象编程,具有属性，构造函数，方法，继承等一系列

// 类

class Animals {
  // 属性
  name: string;
  age: number;

  // 构造函数
  constructor(name: string, age: number) {
    // 为属性赋值
    this.name = name;
    this.age = age;
  }
  // 方法
  eat(food: string) {
    return "eat " + food;
  }
  info() {
    return `我是${this.name},今年${this.age}岁`;
  }
}

let dog = new Animals("dog", 12);
console.log(dog.info());
console.log(dog.eat("狗粮"));
console.log(dog.name);

class Human extends Animals {
  // 继承后新增方法
  read(bookName: string) {
    return `我喜欢读${bookName}`;
  }
  // 重写父类方法
  eat(): string {
    return `${this.name}仅仅喜欢吃米饭`;
  }
}

let me = new Human("chinese", 10);
console.log(me.read("三国演义"));
console.log(me.info());
console.log(me.eat());
console.log(me instanceof Human); // 检测对象是由实例化来的 true
console.log(me instanceof Animals); //true

typescript对象

// typescript对象,与class差不多
var Women = {
  name: "women",
  age: 12,
  eat: () => "eat function",
};

console.log(Women.name);
console.log(Women.age);
console.log(Women.eat());
console.log(Women);

命名空间与导包

• test.ts

// namespace可以解决函数，方法属性同名问题
// 声明export以外部调用
export namespace test {
  export var Women = {
    name: "women",
    age: 12,
    eat: () => "eat function",
  };
}

• test1.ts

import { test } from "./test"; // 导入模块
test.Women.name = "woshi women"
console.log(test.Women.name)