TypeScript基础入门之命名空间(二)
栏目: JavaScript · 发布时间: 6年前
内容简介:继续上篇文章[当应用变得越来越大时,我们需要将代码分离到不同的文件中以便于维护。现在,我们把Validation命名空间分割成多个文件。 尽管是不同的文件,它们仍是同一个命名空间,并且在使用的时候就如同它们在一个文件中定义的一样。 因为不同文件之间存在依赖关系,所以我们加入了引用标签来告诉编译器文件之间的关联。 我们的测试代码保持不变。
继续上篇文章[ TypeScript基础入门之命名空间(一) ]
跨文件拆分
当应用变得越来越大时,我们需要将代码分离到不同的文件中以便于维护。
多文件名称空间
现在,我们把Validation命名空间分割成多个文件。 尽管是不同的文件,它们仍是同一个命名空间,并且在使用的时候就如同它们在一个文件中定义的一样。 因为不同文件之间存在依赖关系,所以我们加入了引用标签来告诉编译器文件之间的关联。 我们的测试代码保持不变。
Validation.ts
namespace Validation { export interface StringValidator { isAcceptable(s: string): boolean; } }
LettersOnlyValidator.ts
/// <reference path="Validation.ts" /> namespace Validation { const letterRegexp = /^[A-Za-z]+/; export class LettersOnlyValidator implements StringValidator { isAcceptable(s: string): boolean { return letterRegexp.test(s); } } }
ZipCodeValidator.ts
/// <reference path="Validation.ts" /> namespace Validation { export const numberRegexp = /^[0-9]+$/; export class ZipCodeValidator implements StringValidator { isAcceptable(s: string): boolean { return s.length === 5 && numberRegexp.test(s); } } }
Test.ts
/// <reference path="Validation.ts" /> /// <reference path="LettersOnlyValidator.ts" /> /// <reference path="ZipCodeValidator.ts" /> // 测试数据 let strings = ["Hello", "98052", "101"]; // let validators:{ [s: string]: Validation.StringValidator } = {}; validators["zip code validator"] = new Validation.ZipCodeValidator(); validators["letter validator"] = new Validation.LettersOnlyValidator(); strings.forEach((e) => { for (let name in validators) { console.log(`"${e}" - ${ validators[name].isAcceptable(e) ? "matches" : 'does not match'} ${name}`) } });
编译运行后的结果如下
$ tsc --outFile src/module_demo/Test.js src/module_demo/Test.ts $ node src/module_demo/Test.js "Hello" - does not match zip code validator "Hello" - matches letter validator "98052" - matches zip code validator "98052" - does not match letter validator "101" - does not match zip code validator "101" - does not match letter validator
一旦涉及多个文件,我们需要确保加载所有已编译的代码。
有两种方法可以做到这一点。
首先,我们可以使用--outFile标志使用连接输出将所有输入文件编译为单个JavaScript输出文件:
tsc --outFile sample.js Test.ts
编译器将根据文件中存在的引用标记自动 排序 输出文件。
您还可以单独指定每个文件:
tsc --outFile sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts
或者,我们可以使用每个文件编译(默认)为每个输入文件发出一个JavaScript文件。
如果生成了多个JS文件,我们需要在我们的网页上使用<script>标签以适当的顺序加载每个发出的文件,例如:
<script src="Validation.js" type="text/javascript" /> <script src="LettersOnlyValidator.js" type="text/javascript" /> <script src="ZipCodeValidator.js" type="text/javascript" /> <script src="Test.js" type="text/javascript" />
未完待续...
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
《生活大爆炸》之科学揭秘
乔治·毕姆 / 韩准、徐漪、江业华、叶夜 / 世界图书出版公司 / 2012-12 / 49.00元
《 之科学揭秘:GEEK探索频道》对流行美剧《生活大爆炸》进行“深度解密”,重点在解读剧中涉及的流行文化及科学元素。正如我们所知,《生活大爆炸》是一部“技术含量很高”的肥皂剧。不光是普通观众,科学家也爱《生活大爆炸》。《 之科学揭秘:GEEK探索频道》中,科学家详尽为你解释了电视剧中出现的科学道理和典故。包括谢尔顿的高深弦理论、霍华德的花生过敏是怎么回事、如果你和谢尔顿的妈妈有同样的信仰该如何看待......一起来看看 《《生活大爆炸》之科学揭秘》 这本书的介绍吧!