这是我参与「第五届青训营 」伴学笔记创作活动的第 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