06.TypeScript面向对象特性

阅读更多

1. 类

   1.1类的声明，Person.ts文件内容如下

   class Person{
       /**默认访问控制符为public
        * private控制符修饰的变量或方法只能在本类内部使用，外部不可调用
        * protected控制符修饰的变量或方法在本类内部和继承的子类调用
       */
       name;
       eat() {
          console.log("I'm eating");
       }
   } 
   
   
   var p1 = new Person();
   p1.name = "batman";
   p1.eat();
   
   var p2 = new Person();
   p2.name = "superman";
   p2.eat();

   编译后的Person.js文件内容如下  

   var Person = /** @class */ (function () {
       function Person() {
       }
       Person.prototype.eat = function () {
           console.log("I'm eating");
       };
       return Person;
   }());
   var p1 = new Person();
   p1.name = "batman";
   p1.eat();
   var p2 = new Person();
   p2.name = "superman";
   p2.eat();

     1.2类的构造函数，Person2.ts文件内容如下

   class Person{
       /**以下构造函数的写法等价于
        * name;
        *  constructor(name: string) {
        *   this.name = name;
        *  }
       */
       constructor(public name: string) {
           
       }
       sayHello() {
          console.log(`Hello,my name is ${this.name}`);
       }
   } 
   
   var p1 = new Person("batman");
   p1.sayHello();
   var p2 = new Person("superman");
   p2.sayHello();

     编译后的Person2.js文件内容如下

   var Person = /** @class */ (function () {
       /**以下构造函数的写法等价于
        * name;
        *  constructor(name: string) {
        *   this.name = name;
        *  }
       */
       function Person(name) {
           this.name = name;
       }
       Person.prototype.sayHello = function () {
           console.log("Hello,my name is " + this.name);
       };
       return Person;
   }());
   var p1 = new Person("batman");
   p1.sayHello();
   var p2 = new Person("superman");
   p2.sayHello();

     1.3类的继承，Person3.ts文件内容如下

   class Person{
       constructor(public name: string) {
           
       }
       eat() {
          console.log(`eating!!!`);
       }
   } 
   
   class Employee extends Person{
       code;
       work() { 
           console.log('working!!!');
       }
   }
   
   var e1 = new Employee('lisi');

   子类调用父类的构造函数和方法，Person4.ts文件内容如下  

   class Person{
       constructor(public name: string) {
           console.log('new Person');
       }
       eat() {
          console.log(`eating!!!`);
       }
   } 
   
   class Employee extends Person{
       code;
       constructor(name: string, code: string) {
           /**必须先调用父类的构造函数 */
           super(name);
           console.log('new Employee');
           this.code = code;
       }
       work() { 
           super.eat();
           this.dowork();
       }
       private dowork() {
            console.log('working!!!');
       }
   }
   
   var e1 = new Employee('lisi', '123');
   e1.work();

    

2. 泛型

   Person5.ts文件内容如下

   class Person{
       constructor(public name: string) {
           console.log('new Person');
       }
       eat() {
          console.log(`eating!!!`);
       }
   } 
   
   class Employee extends Person{
       code;
       constructor(name: string, code: string) {
           super(name);
           console.log('new Employee');
           this.code = code;
       }
       work() { 
           super.eat();
           this.dowork();
       }
       private dowork() {
            console.log('working!!!');
       }
   }
   
   /**泛型为Person */
   var worker: Array = [];
   worker[0] = new Person('liling');
   worker[1] = new Employee('heliang', '133');

    

3. 接口

   方法参数的接口Person6.ts文件内容如下

   interface IPerson{
       name: string;
       age: number;
   }
   
   class Person{
       constructor(public config: IPerson) {
           
       }
   }
   
   var p1 = new Person({
       age:18,
       name:'lining'
   });

    编译后Person6.js的代码如下

   var Person = /** @class */ (function () {
       function Person(config) {
           this.config = config;
       }
       return Person;
   }());
   var p1 = new Person({
       age: 18,
       name: 'lining'
   });
   

     类的接口Person7.ts文件的代码如下

   interface Animal{
       eat();
   }
   
   class Sheep implements Animal{
       eat() {
           console.log('I eat grass');
      }
   }
   
   class Tiger implements Animal{
       eat() {
           console.log('I eat meat');
      }
   }

   编译后Person7.js的代码如下

   var Sheep = /** @class */ (function () {
       function Sheep() {
       }
       Sheep.prototype.eat = function () {
           console.log('I eat grass');
       };
       return Sheep;
   }());
   var Tiger = /** @class */ (function () {
       function Tiger() {
       }
       Tiger.prototype.eat = function () {
           console.log('I eat meat');
       };
       return Tiger;
   }());
   

      

4. 模块

   文件即模块，a模块a.ts代码如下

   /**export向外暴露的资源*/
   export var prop1;
   var prop2;
   
   export function func1() {
   }
   function func2(){	
   }
   
   export class Clazz1{	
   }
   class Clazz2{
   }

   b模块b.ts代码如下

   /**引用的资源*/
   import { prop1, func1, Clazz1 } from './a'
   
   console.log(prop1);
   func1();
   new Clazz1();
   
   /**向外暴露的资源 */
   export function func3(){	
   }

     

5. 注解

   为类、方法和变量加上直观明了的说明，这些说明信息与程序的业务逻辑无关，供指定的工具或框架使用

6. 类型定义文件

   *.d.ts文件，帮助开发者在TypeScript中使用已用的JavaScript包
   搜索JavaScript包的类型定义文件工具https://github.com/typings/typings
   类型定义文件下载地址https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery