TypeScript|设计模式00

简介: 设计模式是软件开发过程中总会涉及到一部分知识,是程序员必备的知识点。准备使用TypeScript边巩固typescript边学习设计模式。

前言

设计模式是软件开发过程中总会涉及到一部分知识,是程序员必备的知识点。准备使用Type
Script边巩固typescript边学习设计模式。

某项技术的出现都有其出现的目的或者说是设计理念,学习时可以先问自己几个问题:

1、TypeScript 是什么?

2、TypeScript 是为了解决什么问题,有什么优势

3、设计模式是为了解决什么问题

TypeScript

  • 是JavaScript的超集,是JavaScript语言的特性扩展
  • 可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上
  • 支持ES6标准
  • TypeScript 能让应用易于维护、迭代,且稳定可靠
  • 优势:静态类型的检测,可以避免一部分javascript的低级错误,使得更加可靠

TypeScript:Hello

配置TypeScript环境

//全局安装typescript环境
npm i -g typescript
​
// 安装完后可通过 查看版本号来检查是否安装成功
tsc -v

创建TypeScript项目

在项目文件中使用命令tsc --init,快速创建一个 tsconfig.json 文件 或者手动创建

新建一个hello.ts文件

function say(name: string) {
    console.log(name);
  }
  say('Hello, 南吕');

运行项目

1、通过 tsc(TypeScript Compiler) 命令将 .ts 文件转译为 .js 文件,但这种方式tsc 将忽略当前应用路径下的 tsconfig.json 配置,因此我们需要通过显式设定如下所示的参数,让 tsc 以严格模式检测并转译 TypeScript 代码

tsc hello.ts --strict --alwaysStrict false

2、另一种方式直接运行:(本质上是先自动进行转译,再运行)TypeScript 的 ts-node 命令行来编写代码

//支持使用ts-node直接运行 TypeScript 代码
npm i -g ts-node
ts-node hello.ts

出现问题:

1、执行ts-node命令时,出现Error: Cannot find module 'typescript' ,但是使用tsc -v时发现是已安装typescript 但是安装的版本是4.4.2

解决方法:卸载当前版本,重新安装 3.9.*的版本

设计模式

  • 设计模式,类似设计的一种模版,一种设计经验
  • 每个设计模式都有其名称,适用的场景,解决方案和达成的效果
  • 用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。

总共有23种设计模式,现有的设计模式分类:

  • 创建型模式

    • 单例模式(Singleton)、工厂(方法)模式(Factory Method)、抽象工厂模式(Abstract Factory)、原型模式(Prototype)、建造者模式(Builder)
  • 结构型模式

    • 适配器模式(Adapter)、桥接模式(Bridge)、装饰者模式(Decorator)、组合模式、外观模式、享元模式、代理模式(Proxy)
  • 行为型模式

    • 模板方法模式、命令模式、访问者模式、迭代器模式、观察者模式、中介者模式、备忘录模式、解释器模式、状态模式、策略模式、责任链模式

参考资料

\

目录
相关文章
|
设计模式 前端开发 JavaScript
图解23种设计模式(TypeScript版)——前端切图崽必修内功心法
图解23种设计模式(TypeScript版)——前端切图崽必修内功心法
图解23种设计模式(TypeScript版)——前端切图崽必修内功心法
|
设计模式 JavaScript 关系型数据库
TypeScript | 设计模式06 - 适配器模式
适配器模式 将一个类的接口转换成客户希望的另外一个接口,使得原本由于接口不兼容而不能一起工作的那些类能一起工作。
122 0
|
设计模式 JavaScript 安全
TypeScript | 设计模式05 - 代理模式
为某对象提供一种代理以控制对该对象的访问。即客户端通过代理间接地访问该对象,从而限制、增强或修改该对象的一些特性。 比如,某对象需访问目标对象,但由于某种情况,不适合或不能直接访问目标对象,通过一个中介进行访问,这个中介就是代理对象。
520 0
|
设计模式 JavaScript
TypeScript | 设计模式04 - 建造者模式
建造者模式 也叫做 生成器模式
224 0
|
设计模式 安全 JavaScript
TypeScript|设计模式01-单例模式
本文首先谈到单例模式,顾名思义,就是在整个系统中只有一个对象,且该对象应当是全局性的。在架构设计的过程,可以想想哪些内容是需要考虑一个全局唯一的,像系统的回收站,只能打开一个;再比如,日志应用,是都可以考虑使用单例模式?
297 0
|
设计模式 JavaScript
TypeScript | 设计模式09 - 装饰者模式
装饰模式又称为包装模式,对象被包装后,还可以继续包装添加新的功能,从而扩展对象的功能,通过装饰模式可以使系统更具有弹性,且其遵循了面向对象原则:对外开放,对修改关闭。
124 0
|
设计模式 JavaScript
TypeScript | 设计模式03 - 工厂模式
工厂,是创建产品的地方。在软件设计中的工厂模式,就是封装和管理对象的创建。工厂模式,具体划分的话,有简单工厂模式和工厂方法模式,根据抽象程度划分,有工厂方法模式和抽象工厂模式
260 0
|
设计模式 JavaScript 前端开发
TypeScript | 设计模式02 - 原型模式
原型模式 用一个已经创建的实例为原型,通过复制该原型实例来创建一个和原型相同或类似的新对象。简单说,通过克隆对象来实现一个新的对象。
143 0
|
设计模式 存储 JavaScript
TypeScript装饰器与设计模式
TypeScript装饰器与设计模式
|
设计模式 JavaScript C++
图解设计模式之发布-订阅模式(TypeScript)下
图解设计模式之发布-订阅模式(TypeScript)下
217 0