zoukankan      html  css  js  c++  java
  • Typescript类、命名空间、模块

    一、类

      类描述了所创建的对象共同的属性和方法。

      TypeScript 支持面向对象的所有特性,比如类、接口等。

      TypeScript 类定义方式如下:class class_name { // 类作用域 }

      定义类的关键字为 class,后面紧跟类名,类可以包含以下几个模块(类的数据成员):

    • 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
    • 构造函数 − 类实例化时调用,可以为类的对象分配内存。
    • 方法 − 方法为对象要执行的操作。

    1、创建类:

      我们声明了类 Car,包含字段为 engine,构造函数在类实例化后初始化字段 engine。

      this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同,this.engine 表示类的字段。此外我们也在类中定义了一个方法 disp()。

    class Car { 
        // 字段 
        engine:string; 
        // 构造函数 
        constructor(engine:string) { 
            this.engine = engine 
        }  
        // 方法 
        disp():void { 
            console.log("发动机为 :   "+this.engine) 
        } 
    }
    

    2、类的继承

      TypeScript 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。

      类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承

      TypeScript 一次只能继承一个类,不支持继承多个类,但 TypeScript 支持多重继承(A 继承 B,B 继承 C)

      语法格式如下:class child_class_name extends parent_class_name

      需要注意的是子类只能继承一个父类,TypeScript 不支持继承多个类,但支持多重继承,如下实例

    class Root { 
       str:string; 
    } 
     
    class Child extends Root {} 
    class Leaf extends Child {} // 多重继承,继承了 Child 和 Root 类
     
    var obj = new Leaf(); 
    obj.str ="hello" 
    console.log(obj.str)
    

    3、继承类的方法重写

      类继承后,子类可以对父类的方法重新定义,这个过程称之为方法的重写

      其中 super 关键字是对父类的直接引用,该关键字可以引用父类的属性和方法

    class PrinterClass { 
       doPrint():void {
          console.log("父类的 doPrint() 方法。") 
       } 
    } 
    class StringPrinter extends PrinterClass { 
       doPrint():void { 
          super.doPrint() // 调用父类的函数
          console.log("子类的 doPrint()方法。")
       } 
    }
    

    4、static关键字

      static 关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用

    5、instanceof 运算符

      instanceof 运算符用于判断对象是否是指定的类型,如果是返回 true,否则返回 false

    class Person{ } 
    var obj = new Person() 
    var isPerson = obj instanceof Person; 
    console.log("obj 对象是 Person 类实例化来的吗? " + isPerson); // true
    

    6、访问控制修饰符

      TypeScript 中,可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

    • public(默认) : 公有,可以在任何地方被访问。
    • protected : 受保护,可以被其自身以及其子类和父类访问。
    • private : 私有,只能被其定义所在的类访问。

      以下实例定义了两个变量 str1 和 str2,str1 为 public,str2 为 private,实例化后可以访问 str1,如果要访问 str2 则会编译错误。

    class Encapsulate { 
       str1:string = "hello" 
       private str2:string = "world" 
    }
     
    var obj = new Encapsulate() 
    console.log(obj.str1)     // 可访问 
    console.log(obj.str2)   // 编译错误, str2 是私有的
    

    二、命名空间

      命名空间一个最明确的目的就是解决重名问题。

      命名空间定义了标识符的可见范围,一个标识符可在多个名字空间中定义,它在不同名字空间中的含义是互不相干的。这样,在一个新的名字空间中可定义任何标识符,它们不会与任何已有的标识符发生冲突,因为已有的定义都处于其他名字空间中。

      TypeScript 中命名空间使用 namespace 来定义,语法格式如下:

    namespace SomeNameSpaceName { 
       export interface ISomeInterfaceName {      }  
       export class SomeClassName {      }  
    }
    

      以上定义了一个命名空间 SomeNameSpaceName,如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口,则需要在类和接口添加 export 关键字。

      要在另外一个命名空间调用语法格式为:SomeNameSpaceName.SomeClassName;

      如果一个命名空间在一个单独的 TypeScript 文件中,则应使用三斜杠 /// 引用它,语法格式如下:

    /// <reference path = "SomeFileName.ts" />
    

      命名空间支持嵌套,即你可以将命名空间定义在另外一个命名空间里头。

    namespace namespace_name1 { 
        export namespace namespace_name2 {
            export class class_name {    } 
        } 
    }
    

      成员的访问使用点号 . 来实现。

    三、模块

      TypeScript 模块的设计理念是可以更换的组织代码。模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。

      两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。模块使用模块加载器去导入其它的模块。在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。此外还有有 SystemJs 和 Webpack。

      模块导出使用关键字 export 关键字,语法格式如下:

    // 文件名 : SomeInterface.ts 
    export interface SomeInterface { 
       // 代码部分
    }
    
    // 要在另外一个文件使用该模块就需要使用 import 关键字来导入:
    import someInterfaceRef = require("./SomeInterface");
    
  • 相关阅读:
    未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage”包
    Only one instance of a ScriptManager can be added to the page.
    springboot SSM
    spring mvc 请求转发和重定向
    Spring Boot 配置 Swagger2 接口文档引擎
    solr
    jQuery
    反向代理负载均衡-Nginx
    mybatis二级缓存
    Vue的路由
  • 原文地址:https://www.cnblogs.com/ajaemp/p/13065689.html
Copyright © 2011-2022 走看看