Typescript 中的模块使用

关注

原创最新推荐文章于 2026-09-27 14:40:32 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

【TypeScript系列】模块模块在其自身的作用域里执行，而不是在全局作用域里；这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们，可以使用import形式之一。阅读详情

在Typescript中定义一些零散的类

// 工具正则
var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /[0-9]+$/;

// 定义一个接口
interface StringValidator {
    isAcceptable(s:string):boolean;
}

// 定义一种校验器
class LettersOnlyValidator implements StringValidator {
    isAcceptable(s:string):boolean {
        return lettersRegexp.test(s);
    }
}

// 定义另一种校验器
class ZipCodeValidator implements StringValidator {
    isAcceptable(s:string):boolean {
        return s.length === 5 && numberRegexp.test(s);
    }
}

Typescript中用模块来封装工具类


var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /[0-9]+$/;

// 使用module关键字来定义一个校验器类
module Validation {
    // 指定一个接口
    export interface StringValidator {
        isAcceptable(s:string):boolean;
    }
    // 子工具类1继承接口
    export class LettersOnlyValidator implements StringValidator{
        isAcceptable(s:string) {
            return lettersRegexp.test(s);
        }
    }
    // 子工具类2继承接口
    class ZipCodeValidator implements StringValidator {
        isAcceptable(s:string):boolean {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}

Typescript中模块的应用实例

封装一个小型定时器模块

module Time {
    export class Test {
        element:HTMLElement;
        span:HTMLElement;
        timer:number;
        constructor(e:HTMLElement) {
            this.element = e;
            this.element.innerHTML = '现在时间是：';
            this.span = document.createElement('span');
            this.element.appendChild(this.span);
            this.span.innerHTML = new Date().toTimeString();
        }
        start() {
            this.timer = setInterval(()=>{this.span.innerHTML = new Date().toTimeString(), 500})
        }
        stop() {
            clearInterval(this.timer);
        }
    }
}