TypeScript基础篇一: HelloWorld TypeScript

TypeScript基础篇二: 使用TypeScript编写接口和类

TypeScript基础篇三: TypeScript的命名空间

文章目录

一、背景

  • 我们在创建项目时需要一种命名方式来组织代码，避免与其他对象产生命名冲突。因此，我们需要把代码包裹到一个命名空间内，而不是把它们放在全局命名空间下。本文章将介绍命名空间的应用方法。

二、命名空间的定义

  • 命名空间最明确的目的就是解决重名问题。TypeScript 中命名空间使用 namespace 来定义，语法格式如下：
// 相同名字的接口与类在不同名字空间中是互不相干的
namespace myNameSpace{ 
   export interface utils{      }  
   export class mathUtils{      }  
}

namespace yourNameSpace{ 
   export interface utils{      }  
   export class mathUtils{      }  
}
  • 如果我们需要在外部可以调用 myNameSpace中的类和接口，调用语法格式为：
let me=new myNameSpace.mathUtils()
let you=new yourNameSpace.mathUtils()

三、命名空间应用实例

  • 创建utils.ts文件，在文件中定义一个命名空间Utils，导出接口MathUtil
/**
 * 命名空间Utils中定义MathUtil接口，接口中含有加减乘除算法
 */
namespace Utils {
  export interface MathUtil {
    // 两数相加
    add(x: number, y: number);
    // 两数相减
    subtract(x: number, y: number);
    // 两数相乘
    multiply(x: number, y: number);
    // 两数相除
    divide(x: number, y: number);
  }
}
  • 创建mathUtil.ts文件，在命名空间Utils，实现接口MathUtil的加减乘除算法
//如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：
/// <reference path = "utils.ts" /> 

namespace Utils {
  export class MathUtils implements MathUtil {
    constructor(){};
    
    add(x: number, y: number) {
      return x + y;
    }
    subtract(x: number, y: number) {
      return x - y;
    }
    multiply(x: number, y: number) {
      return x * y;
    }
    divide(x: number, y: number) {
      if (y === 0) {
        throw new Error("divide zero error.");
      } else {
        return x / y;
      }
    }
  }
}
  • 创建mathUtilTest.ts文件，测试MathUtil的加减乘除算法
/// <reference path = "mathUtil.ts" /> 
// 使用用命名空间Utils中的MathUtils类创建对象
let u = new Utils.MathUtils();

console.log("1+2=",u.add(1,2));
console.log("1-2=",u.subtract(1,2));
console.log("1*2=",u.multiply(1,2));
console.log("1/2=",u.divide(1,2));
  • 使用 tsc 命令编译以上mathUtilTest.ts代码：
>
  • 产生的js代码如下：
/// <reference path = "utils.ts" /> 
var Utils;
(function (Utils) {
    var MathUtils = /** @class */ (function () {
        function MathUtils() {
        }
        ;
        MathUtils.prototype.add = function (x, y) {
            return x + y;
        };
        MathUtils.prototype.subtract = function (x, y) {
            return x - y;
        };
        MathUtils.prototype.multiply = function (x, y) {
            return x * y;
        };
        MathUtils.prototype.divide = function (x, y) {
            if (y === 0) {
                throw new Error("divide zero error.");
            }
            else {
                return x / y;
            }
        };
        return MathUtils;
    }());
    Utils.MathUtils = MathUtils;
})(Utils || (Utils = {}));
/// <reference path = "mathUtil.ts" /> 
var u = new Utils.MathUtils();
console.log("1+2=", u.add(1, 2));
console.log("1-2=", u.subtract(1, 2));
console.log("1*2=", u.multiply(1, 2));
console.log("1/2=", u.divide(1, 2));
  • 运行以上js代码，得到如下结果:

    • TypeScript基础篇三: TypeScript的命名空间_命名空间