• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

TypeScript 模块

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

首先介绍2个关键字 ： export（导出，让其他模块可以导入使用）  和  import（导入）

先可以这么理解 ： 一个TS文件就是一个模块。现在有一个需求 ： A模块要使用B模块中的内容 ， 也就是代码复用问题。

其中 ： Greeter.ts的代码如下：

1
2
3
export interface StringValidator{
    isAcceptable( s : string ) : boolean;
}

注意一点 ： export修饰了这个接口（实际上，它"export"还可以修饰类，变量，函数），则这个接口可以被别的模块导入使用 例如： CodeValidator.ts

CodeValidator.ts代码如下：

1
2
3
4
5
6
7
8
9
10
11
import {StringValidator} from "./Greeter"
export const numberRegexp = /^[0-9]+$/;
 
export class CodeValidator implements StringValidator{
    isAcceptable( s : string ) : boolean{
        return  s.length == 5 && numberRegexp.test(s);
    }
}
 
let s : StringValidator =  new CodeValidator();
console.log(`this is  : ${s.isAcceptable("123")}`);

注意：import {StringValidator} from "./Greeter" 既是从Greeter.ts模块中导入StringValidator接口 ， 常量 numberRegexp 也是被export修饰 

查看结果：



我们稍微延伸一下：

修改一个CodeValidator.ts代码如下（把打印信息修改下）：

1
2
3
4
5
6
7
8
9
10
11
import {StringValidator} from "./Greeter"
export const numberRegexp = /^[0-9]+$/;
 
export class CodeValidator implements StringValidator{
    isAcceptable( s : string ) : boolean{
        return  s.length == 5 && numberRegexp.test(s);
    }
}
 
let s : StringValidator =  new CodeValidator();
console.log(`this CodeValidator is  : ${s.isAcceptable("123")}`);

我在com文件夹外见一个MC.ts

MC.ts的代码如下：

1
2
3
4
5
6
7
8
9
10
11
import {StringValidator} from "./com/Greeter"
import {numberRegexp} from "./com/CodeValidator"
 
export class MC implements StringValidator{
    isAcceptable( s : string ) : boolean{
        return  numberRegexp.test(s);
    }
}
 
let  mc : StringValidator = new MC();
console.log(`this MC func : ${mc.isAcceptable("123")}`);

注意：from后面的路径变了

结果：


我们继续扩展 ， 我间一个和com文件夹平级的文件夹cn，在cn文件夹中使用com文件夹中的CodeValidator.ts和Greeter.ts的内容或功能

SP.ts的代码如下：

1
2
3
4
5
6
7
8
9
10
import {StringValidator} from "./../com/Greeter"
import {numberRegexp} from "./../com/CodeValidator"
export class SP implements StringValidator{
    isAcceptable( s : string ) : boolean{
        return  numberRegexp.test(s);
    }
}
 
let  sp : StringValidator = new SP();
console.log(`this MC func : ${sp.isAcceptable("123")}`);

结果：


可以总结如下：

./    :    在本TS的文件夹中

../   :    返回上一级文件夹

如果还是不懂 ， 可以再看看以上的测试


好了，开始使用正儿八经的使用模块 ， 需要使用关键字   module

其实module 相当于高级语言的 命名空间 。那么使用module ， 只要module不同 ， 里面的内容都是独立的 ， 这样可以避免命名冲突

还在原来的基础上改： 在Greeter.ts上以上module 如下：

1
2
3
4
5
module com {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}

可见模块（命名空间）的名称为com

那么导入它也需要发生改变：

CodeValidator.ts如下：：：

1
2
3
4
5
6
7
8
9
10
11
///<reference path="Greeter.ts" />
export const numberRegexp = /^[0-9]+$/;
 
export class CodeValidator implements com.StringValidator{
    isAcceptable( s : string ) : boolean{
        return  s.length == 5 && numberRegexp.test(s);
    }
}
 

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
【typescript】typescript的命名空间和模块的区别发布时间：2022-07-18
下一篇：
TypeScript-字符串字面量类型发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap