`

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<Person> = [];
    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

分享到:
评论

相关推荐

    Apress.TypeScript.Revealed.Feb.2013

    TypeScript是由微软开发的一种强类型、面向对象的编程语言,它是JavaScript的一个超集,旨在为大型项目提供更稳定的代码基础和更好的工具支持。这本书可能是对TypeScript的基本概念、语法特性、开发工具和最佳实践的...

    15.typescript.rar

    1. 类(Class):TypeScript引入了ES6中的类语法,支持继承、构造函数、访问修饰符(public、private、protected)、抽象类和接口等面向对象特性。 2. 抽象类与接口的区别:抽象类可以包含实现的方法,而接口只定义...

    Tackling.TypeScript.2020.6.pdf

    - **目标读者**:面向希望了解或进一步提升TypeScript技能的JavaScript开发者。 #### 1.3 购买收益 - **内容获取**:购买本书后,可以获得完整版的电子书及可能的额外资源。 - **支持作者**:通过购买来支持作者的...

    typescript.pdf

    2.基于类的面向对象编程:TypeScript支持ES6的类,可以创建对象,继承,多态等面向对象的特性。 3.接口:TypeScript的接口是对行为的抽象,它定义了类的行为和方法的规范。 4.模块:TypeScript支持模块化编程,可以...

    前端大厂最新面试题-typescript_javascript.docx

    TypeScript 是 JavaScript 的超集,支持 ES6 语法,支持面向对象编程的概念,如类、接口、继承、泛型等。TypeScript 是一种静态类型检查的语言,提供了类型注解,在代码编译阶段就可以检查出数据类型的错误,同时...

    TypeScript开发手册(极其适合C#开发人员)

    1. TypeScript介绍:TypeScript 是一种由微软开发的开源编程语言,它是JavaScript的超集,添加了可选的静态类型系统和基于类的面向对象编程特性。由于TypeScript的出现,开发者可以在保持与JavaScript的兼容性的同时...

    cocosCreator socket.io typescript环境搭建.rar

    typescript是JavaScript的一个超集,提供静态类型系统和面向对象的特性,可以提高代码质量和可维护性。以下是一步一步的详细指南: 1. **安装Cocos Creator**: 首先,你需要从Cocos官方网站下载并安装最新版本的...

    Python库 | typescript-0.0.1.tar.gz

    2. **TypeScript**:尽管TypeScript通常是用于编写JavaScript的,但在这个上下文中,它似乎被用于Python环境,可能提供类型检查、面向对象编程等特性。 3. **开发语言**:表明这个库是作为开发工具使用的,可能是...

    《TypeScript》电子pdf版

    - 支持面向对象编程。 - 例如: `class Person { name: string; constructor(name: string) { this.name = name; } }`。 - **接口与类**: - 类可以实现一个或多个接口。 - 例如: `class Employee implements ...

    TypeScript.docset.rar

    6. **类(Classes)**:TypeScript引入了面向对象编程的概念,如类、继承和多态,使得构建复杂的应用程序更加容易。 7. **枚举(Enums)**:枚举提供了一种更易于理解和管理常量集合的方式,尤其在处理状态机或表示...

    typescript-handbook.pdf

    在面向对象编程方面,手册详细讲解了TypeScript中的类(Classes)。类支持继承、构造函数、访问修饰符、静态属性和方法,以及抽象类和接口,这些都是构建复杂对象模型的关键元素。 Modules章节则讨论了TypeScript对...

    typescript 基本用法md文档 和 面向对象用法

    通过深入理解 TypeScript 的基本用法和面向对象特性,开发者可以编写更健壮、更易于维护的代码。TypeScript 的静态类型检查和丰富的语言特性使得它在大型项目中尤其受欢迎。无论是进行前端开发还是后端开发,掌握 ...

    《TypeScript》电子pdf版.zip

    **TypeScript**是一种由微软开发的强类型、面向对象的编程语言,它是JavaScript的一个超集,旨在提升开发者的代码质量和可维护性。TypeScript在JavaScript的基础上添加了静态类型系统、接口、类、泛型等特性,使其更...

    typescript 教程.pdf

    类和接口是面向对象编程的核心概念,TypeScript对这些概念提供了更丰富的支持,比如类的继承、访问修饰符、静态属性和方法等。泛型是允许在定义函数、接口和类时创建可重用的组件,这些组件能够支持多种类型的数据而...

    Apress - Essential TypeScript From Beginner to Pro.pdf

    2. 面向对象编程(OOP):TypeScript支持OOP概念,如封装、继承和多态性。熟悉这些概念对于编写模块化和可维护的代码至关重要。 3. TypeScript高级特性:如泛型编程、装饰器、异步编程等,这些特性有助于开发高性能...

    typescript-中文手册

    Angular 是一个流行的前端框架,由 Google 开发,其核心部分使用 TypeScript 编写,充分利用了 TypeScript 的强类型和面向对象特性,提升了框架的稳定性和开发效率。 通过阅读 "typescript - 中文手册",开发者可以...

    atlas:用于alt的1#Typescript面向对象框架

    Atlas是一款针对Alt的1# TypeScript框架,它旨在提升开发效率,同时提供强大的面向对象特性,以支持更复杂的业务逻辑和项目结构。Alt是一款基于Node.js的轻量级状态管理库,常用于React应用的状态管理。而Atlas则为...

    TypeScript Handbook(中文版)typescript-handbook.pdf

    TypeScript增加了静态类型系统和其他面向对象编程特性,如类、接口等,这些特性使得开发者可以在编写代码时发现并解决类型错误,从而提高代码质量和可维护性。 #### 二、TypeScript的魅力 1. **类型安全**:...

Global site tag (gtag.js) - Google Analytics