Typescript 中的模块使用

最新推荐文章于 2025-11-02 23:11:45 发布

原创最新推荐文章于 2025-11-02 23:11:45 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #module

Typescript 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了在TypeScript中如何定义工具类和模块，包括正则验证工具类、StringValidator接口及其实现类LettersOnlyValidator和ZipCodeValidator，并提供了一个定时器模块的实现示例。

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