TypeScript 模块

首先介绍2个关键字 : export(导出,让其他模块可以导入使用)  和  import(导入)

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

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

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

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

CodeValidator.ts代码如下:

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代码如下(把打印信息修改下):

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的代码如下:

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的代码如下:

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 如下:

module com {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}

可见模块(命名空间)的名称为com

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

CodeValidator.ts如下:::

///<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);
    }
}

let s : com.StringValidator =  new CodeValidator();
console.log(`this CodeValidator is  : ${s.isAcceptable("123")}`);

注意上面的  ///<reference path="Greeter.ts" /> 是引用Greeter.ts模块 , 那么调用此模块中的成员,需要使用模块名 + “.” + 元素名 如 com.StringValidator 即为调用接口

MC.ts 代码如下:

///<reference path="com/Greeter.ts" />
import {numberRegexp} from "./com/CodeValidator"

export class MC implements com.StringValidator{
    isAcceptable( s : string ) : boolean{
        return  numberRegexp.test(s);
    }
}

let  mc : com.StringValidator = new MC();
console.log(`this MC func : ${mc.isAcceptable("123")}`);

SP.ts代码如下 :

///<reference path="../com/Greeter.ts" />
import {numberRegexp} from "./../com/CodeValidator"
export class SP implements com.StringValidator{
    isAcceptable( s : string ) : boolean{
        return  numberRegexp.test(s);
    }
}

let  sp : com.StringValidator = new SP();
console.log(`this MC func : ${sp.isAcceptable("123")}`);

结果:



或许有读者说每次带个com.  挺烦的 , 好了扩展继续(以SP.ts为例)

SP.ts

///<reference path="../com/Greeter.ts" />
import {numberRegexp} from "./../com/CodeValidator"
type  StringValidator = com.StringValidator;
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")}`);

核心  type  StringValidator = com.StringValidator;   将com.StringValidator 命名为 StringValidator  (映射) 。

好了 , 本篇关于模块的博客 , 写完收工!!!!!!!!!!!

时间: 2024-10-14 01:08:37

TypeScript 模块的相关文章

es6模块 nodejs模块和 typescript模块

es6模块 import和export nodejs模块 require和module.exports typescript模块 module和export 原文地址:https://www.cnblogs.com/mttcug/p/8120274.html

Angular2.x/Typescript模块引入解析

首先,模块引入的时候有两种方式:1.相对导入: import Entry from "./components/Entry"; import { DefaultHeaders } from "../constants/http"; import "/mod"; 相对导入在解析时是相对于导入它的文件,并且不能解析为一个外部模块声明,你应该为你自己写的模块使用相对导入,这样能确保它们在运行时的相对位置. 2.非相对导入: import * as $

Typescript和Node模块解析策略

一般我们在模块化编码时,总会导入其它模块,通常我们使用如下语法: import { A } from './a'; // ES6语法 import { A } from 'a'; var A = require('./a'); // commonjs规范 不论使用哪种语法,导入的文件一般有两种:内部文件(自己开发的)和外部(node_modules)中两种,其中导入内部模块称之为相对导入,导入node_modules中,称之为非相对导入,它们在语法上的区别就是导入的路径是否是相对的 接下来我们看

ASP.NET MVC(三) TypeScript

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销:增加一个完整的类结构,使之更新是传统的面向对象语言. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用,JavaScript 没有提供类和模块的概

浅谈TypeScript

TypeScript为JavaScript的超集(ECMAScript6), 这个语言添加了基于类的面向对象编程.TypeScript作为JavaScript很大的一个语法糖,本质上是类似于css的less.sass,都是为了易于维护.开发,最后还是编译成JavaScript.趁着周末的时间,浅尝了Typescript,下面是总结的一些特性. Types 所有类型都是any类型的子类型,其他类型被分成元类型(primitive types)和对象类型(object types). 1.  元类型

TypeScript 简介

原文链接: http://www.oschina.net/question/12_72250 你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销:增加一个完整的类结构,使之更新是传统的面向对象语言. 为什么会有 TypeSc

TypeScript入门指南(JavaScript的超集)

TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父Anders Hejlsberg发起的. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非真正设计用于开发大型 Web 应用,JavaScript 没有提供类和模块等概念,对于一个真正的应用开发,TypeSc

TypeScript 入门指南

你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销:增加一个完整的类结构,使之更新是传统的面向对象语言. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用,Jav

TypeScript入门指南

原文转自:http://www.oschina.net/question/12_72250 TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销:增加一个完整的类结构,使之更新是传统的面向对象语言. 为什么会有 TypeScript? JavaScript 只是