【vue.js之夯实基础-6】TypeScript 入门之实操 namespace命名空间 声明文件以 .d.ts(引用第三方的Js库) module模块(在其自身的作用域里执行)export导出
作者：互联网
namespace 命名空间
假设这样一种情况，当一个班上有两个名叫小明的学生时，为了明确区分它们，我们在使用名字之外，不得不使用一些额外的信息，比如他们的姓（王小明，李小明），或者他们父母的名字等等。
命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。
TypeScript 中命名空间使用 namespace 来定义，语法格式如下： 解决重名问题
namespace Drawing{ export } 定义implements IShape 文件 IShape.ts
namespace Drawing {
export interface IShape {
draw();
}
}
//以上定义了一个命名空间 Drawing，
// 如果我们需要在外部可以调用 Drawing中的类和接口，
// 则需要在类和接口添加 export 关键字。
定义class Circle 文件 Circle.ts
如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：
/// <reference path = "IShape.ts" />
namespace Drawing {
export class Circle implements IShape {
public draw() {
console.log("Circle is drawn");
}
}
}
定义class Triangle文件 Triangle.ts
/// <reference path = "IShape.ts" />
namespace Drawing {
export class Triangle implements IShape {
public draw() {
console.log("Triangle is drawn");
}
}
}
测试命名空间 TestShape.ts
//如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：
/// <reference path = "IShape.ts" />
/// <reference path = "Circle.ts" />
/// <reference path = "Triangle.ts" />
//函数参数为接口类型，可以实现多态
function drawAllShapes(shape:Drawing.IShape) {
shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());
声明文件 声明文件以 .d.ts 为后缀
TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。
假如我们想使用第三方库，比如 jQuery，我们通常这样获取一个 id 是 foo 的元素：
$('#foo');
// 或
jQuery('#foo');
但是在 TypeScript 中，我们并不知道 $ 或 jQuery 是什么东西：
jQuery('#foo');
// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.
这时，我们需要使用 declare 关键字来定义它的类型，帮助 TypeScript 判断我们传入的参数类型对不对：
eclare var jQuery: (selector: string) => any;
jQuery('#foo');
declare 定义的类型只会用于编译时的检查，编译结果中会被删除。
上例的编译结果是：
jQuery('#foo');
1.CalcThirdPartyJsLib.js 第三方类库
2.Calc.d.ts 把第三方类库通过模块引用
3.index.html 本地应用
4.CalcTest.js 本地脚本 引用 ///
CalcThirdPartyJsLib.js Runoob库，提供doSum()方法
var Runoob;
(function(Runoob) {
var Calc = (function () {
function Calc() {
}
})
Calc.prototype.doSum = function (limit) {
var sum = 0;
for (var i = 0; i <= limit; i++) {
sum = sum + i;
}
return sum;
}
Runoob.Calc = Calc;
return Calc;
})(Runoob || (Runoob = {}));
var test = new Runoob.Calc();
Calc.d.ts
declare module Runoob {
export class Calc {
doSum(limit:number) : number;
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src = "CalcThirdPartyJsLib.js"></script>
<script src = "CalcTest.js"></script>
</head>
<body>
<h1>声明文件测试</h1>
<p>菜鸟测试一下。</p>
</body>
</html>
CalcTest.ts
/// <reference path = "Calc.d.ts" />
var obj = new Runoob.Calc();
//obj.doSum("Hello"); // 编译错误
console.log(obj.doSum(10));
模块 import export
TypeScript 模块的设计理念是可以更换的组织代码。
模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
SomeInterface.ts
// 文件名 : SomeInterface.ts
export interface SomeInterface {
// 代码部分
}
要在另外一个文件使用该模块就需要使用 import 关键字来导入:
import someInterfaceRef = require("./SomeInterface");
class InterfaceImpl implements someInterfaceRef.SomeInterface {}
模块 实例
IShape.ts 文件代码：
/// <reference path = "IShape.ts" />
export interface IShape {
draw();
}
Circle.ts 文件代码：
import shape = require("./IShape");
export class Circle implements shape.IShape {
public draw() {
console.log("Cirlce is drawn (external module)");
}
}
Triangle.ts 文件代码：
import shape = require("./IShape");
export class Triangle implements shape.IShape {
public draw() {
console.log("Triangle is drawn (external module)");
}
}
estShape.ts 文件代码：
import shape = require("./IShape");
import circle = require("./Circle");
import triangle = require("./Triangle");
function drawAllShapes(shapeToDraw: shape.IShape) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
使用 tsc 命令编译以上代码（AMD）：
tsc --module amd TestShape.ts
得到以下 JavaScript 代码：
IShape.js 文件代码：
define(["require", "exports"], function (require, exports) {
});
Circle.js 文件代码：
define(["require", "exports"], function (require, exports) {
var Circle = (function () {
function Circle() {
}
Circle.prototype.draw = function () {
console.log("Cirlce is drawn (external module)");
};
return Circle;
})();
exports.Circle = Circle;
});
Triangle.js 文件代码：
define(["require", "exports"], function (require, exports) {
var Triangle = (function () {
function Triangle() {
}
Triangle.prototype.draw = function () {
console.log("Triangle is drawn (external module)");
};
return Triangle;
})();
exports.Triangle = Triangle;
});
TestShape.js 文件代码：
define(["require", "exports", "./Circle", "./Triangle"],
function (require, exports, circle, triangle) {
function drawAllShapes(shapeToDraw) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
});
使用 tsc 命令编译以上代码（Commonjs）：
tsc --module commonjs TestShape.ts
Circle.js 文件代码：
var Circle = (function () {
function Circle() {
}
Circle.prototype.draw = function () {
console.log("Cirlce is drawn");
};
return Circle;
})();
exports.Circle = Circle;
Triangle.js 文件代码：
var Triangle = (function () {
function Triangle() {
}
Triangle.prototype.draw = function () {
console.log("Triangle is drawn (external module)");
};
return Triangle;
})();
exports.Triangle = Triangle;
TestShape.js 文件代码：
var circle = require("./Circle");
var triangle = require("./Triangle");
function drawAllShapes(shapeToDraw) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
标签：function,TypeScript,Triangle,作用域,require,ts,module,Circle,IShape 来源： https://blog.csdn.net/alwarse/article/details/122554459