TypeScript|青训营笔记

50 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 5天

JS:动态类型 TS:静态类型语言 why choose TypeScript?

静态类型

  • 可读性增强,语法解析TSdoc,ide增强
  • 可维护性增强,在编译阶段暴露大部分错误

JS的超集

  • 包含于兼容所有Js特性,支持共存
  • 支持渐进式引入与升级
属性名称表达式含义
只读属性readonly jobId:number;约束属性不可在对象初始化外赋值
可选属性hobby?:string;定义该属性可以不存在
任意属性[key:string]:any;约束所有对象属性否必须是该属性的子类型

泛型

创建一个使用泛型的例子:identity函数。 这个函数会返回任何传入它的值。

不用泛型的话,这个函数可能是下面这样:

function identity(arg: number): number {
    return arg;
}

或者,我们使用any类型来定义函数:

function identity(arg: any): any {
    return arg;
}

虽然使用any类型后这个函数已经能接收任何类型的arg参数,但是却丢失了一些信息:传入的类型与返回的类型应该是相同的。 如果我们传入一个数字,我们只知道任何类型的值都有可能被返回。

因此,我们需要一种方法使返回值的类型与传入参数的类型是相同的。 这里,我们使用了 类型变量,它是一种特殊的变量,只用于表示类型而不是值。

function identity<T>(arg: T): T {
    return arg;
}

我们给identity添加了类型变量T。 T帮助我们捕获用户传入的类型(比如:number),之后我们就可以使用这个类型。 之后我们再次使用了 T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。 这允许我们跟踪函数里使用的类型的信息。

我们把这个版本的identity函数叫做泛型,因为它可以适用于多个类型。 不同于使用 any,它不会丢失信息,像第一个例子那像保持准确性,传入数值类型并返回数值类型。

单例模式 全局唯一访问对象

应用场景:缓存全局状态管理

JS中的事件就是经典的发布-订阅模式的实现

// 提取出通用的单例
function getSingleton(fn) {
    var instance = null;
    return function() {
        if (!instance) {
            instance = fn.apply(this, arguments);
        }
        return instance;
    }
}

发布订阅模式 一种订阅机制,可在被订阅对象发生变化时通知订阅者 应用场景:从系统架构之间的解耦到业务中一些实现模式,像邮件订阅,上线浏览等等。 JS中的事件就是经典的发布-订阅模式的实现

复制代码

// 订阅
document.body.addEventListener('click', function() {
    console.log('click1');
}, false);

document.body.addEventListener('click', function() {
    console.log('click2');
}, false);

// 发布
document.body.click(); // click1  click2