typescript

最新文章

TypeScript:基本类型详解

布尔值(Boolean)TypeScript的布尔值和JavaScript一样有两个值:true和false。类型标识:boolean示例:let isDone: boolean = false; 数字(Number)和JavaScript一样,TypeScript的所有数字都是用浮点数表示,支持二进制,八进制,十进制以及十六进制的表示方式,类型标识:num

TypeScript:函数接口以及回调函数的应用

在TypeScript,interface可以用来定义函数的结构。基本语法interface InterfaceName {  (param1: parameterType1,param2:parameterType2... ): returnType;}示例interface  Formatter{ (i

使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。初始化项目创建一个空文件夹demo,使用npm在空文件夹初始化项目。npm init npm install --save-dev webpack npm install --save-dev types

解决TypeScript报错TS2304: cannot find name ' require'

这个原因是TypeScript不能识别require。简单但不推荐的做法如果只是一个文件需要用到require,或者只是一个demo,可以通过下面方式引入require:declare var require: anyTypeScript 2.x的方法如果是使用TypeScript2.x,可以使用npm安装typings:npm install @types/node --save-dev在tsc

CKEditor5事件系统(基础使用)

最近在学习CK5,一种最大的感受就是CK5的架构不是很大,但是内容特别多。笔者在学习中,总结出一个浅显的道理,那就是掌握基础知识,对框架宏观把握,学习起来会事半功倍。今天开始初步研究一下CK5的事件系统:在CK5的事件系统中,关键的一个对象被称作Emitter(发射器),Emitter是一个可以发送事件的对象。如何创建一个Emitter,下面的代码创建了一个混合了事件发送的AnyClass类,它实

CKEditor5事件系统(事件优先级)

今天继续学习CK5的事件系统,上一节我们知道了绑定和取消绑定事件的两种方法,知道在一个emitter上一个同名事件可以绑定多个回调函数,自然问题来了,这些函数的执行顺序是怎么样的呢?CK5的事件监听优先级实际上,对于一个同名事件,CK5提供了事件优先级功能,如下代码所示const anyClass = new AnyClass(); anyClass.on( 'eventName', ( even

CKEditor5事件系统(代理事件)

emitter接口提供了事件代理机制。也就是说指定选择的事件能够被其他的emitter触发。 1、代理指定的事件到另一个emitterlet anyClass = new AnyClass(); let anotherClass = new AnyClass(); let oneClass = new AnyClass(); anotherClass.on('bar',(evt,data

CKEditor5事件系统(视图事件冒泡)

CK5的视图(view.document)不仅是一个Observable和emitter,而且还实现了一个BubblingEmitter,它是由BubblingEmitterMixin实现的。它提供了在虚拟dom机制上的冒泡事件。 它与普通的dom树上的冒泡机制不同。它不会在特定的元素上注册监听器,而是在指定的上下文上注册监听器。这里的上下文,要么是一个元素,要么是虚拟上下文之一,要么是

CKEditor5 Observables

在CKEditor5中除了事件系统外,还有另一个重要的系统就是可观测对象,俗称Observable对象。此对象的属性是可观测的,一段对象的属性发生改变,将会触发一个事件,监听此事件的代码片段可以做出一些相应的操作。 CK5定义一个可观测对象import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin'

CKEditor5 模板绑定

CK5还可以将模板的属性绑定到可观测对象属性,如下代码所示:import {View} from 'ckeditor5/src/ui'; export default class Button extends View { constructor(){ super(); this.type = 'button'; const bind =

CKEditor5 Observable——属性绑定

前面我们知道了,在CK5中怎么样将一个对象设置成Observable以及Observable在UI中如何使用?属性绑定今天我们来看看如何进行可观测对象的属性绑定和重命名。首先,我们假定有两个Observable对象,所谓绑定就是将一个对象的可观测状态绑定到另一个可观测对象,如下所示:const button = new Button(); const command = editor.comman

CKEditor5 Observable——绑定多个对象或属性

上一节我们学习了如何绑定属性,今天我们继续学习绑定多个属性或者多个Observable对象。 绑定多个属性如何绑定多个属性,下面我们用代码来说明:const button = new Button(); const command = editor.commands.get( 'bold' ); button.bind( 'isOn', 'isEnabled' ).to( command

CKEditor5 Observable——装饰方法

上一节我们学习了在CK5中,如何绑定多个属性以及绑定多个Observable对象,今天我们学习如何装饰方法。 首先,我们提出一个问题,为什么会有装饰方法呢?以及什么叫做装饰?所谓装饰,就是在不改变原来方法功能的前提下,增加方法的功能,众所周知在java的IO流中,就有很多地方用到了装饰。 而在CK5中,装饰是什么意思呢?请看下面这段话:Decorating object met

Angular装饰器——Decorators

最近有空学习了一下angular的基础知识,对于angular的装饰器有了一些理解。其实装饰器并非angular特有的,它是Typescript的语言特性。首先我们看看什么是装饰器  我们先看看Typescript官方的说明:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必

CKEditor5——视图添加

上一节我们介绍了在CK5中UI组件的一些基本使用,今天我们继续UI部分的学习,如何添加一个UI视图到CK5?CK5视图结构首先,我们贴上代码:EditorUIView ├── "top" collection │ └── ToolbarView │ └── "items" collection │ ├── DropdownView

RxJs——map,filter第二种实现

上一节我们实现了map和filter函数,我们将这些函数都挂载在MyObservable对象上,这里存在一个问题,类似map和filter这样的操作型函数很多,所以不可能将他们都挂载在MyObservable对象上,因此,这里出现了第二种实现。 这些操作函数能串联起来的本质就是能够形成嵌套调用,因此我想到了使用pipe,pipe的本质是接收一个 RxJS 操作符的运行结果作为参数,并返回

RxJs——subject理解一

什么是subject首先我们来理解什么是subject,按照官方的定义:A Subject is a special type of Observable that allows values to be multicasted to many Observers.Subjects are like EventEmitters.从定义我们看出subject就是一种允许发送值到多个观察者的特殊类型的

RxJs——错误处理(一)

错误处理是RxJs中重要组成部分,我们在响应式编程中几乎都要使用到;然而RxJs中的错误处理不像在其他库中的错误处理那么容易理解。小窍门就是关注Observable的约定,这样就容易理解RxJs中错误处理。 今天我们介绍一些常见的错误处理策略,涵盖一些常用场景,当然还是从Observable的基础知识——Observable的约定。Observable约定首先我们需要理解的是给定的流只能

RxJs——Subject理解二

上一节我们对subject有了初步理解,今天我们继续学习subjectReplaySubject介绍这个ReplaySubject之前,我们说下一种使用场景1、我们创建一个subject2、在应用的某个地方,我们向subject推送值,但此时没有订阅3、在某个时点,有第一个观察者开始订阅4、我们期望观察者能接收之前主题推送的值(可能是全部值或者时其中一个)5、实际上啥都没发生,因为主题不能存储记忆

RxJs——错误处理(二)

从前文我们知道,错误处理有两种方式,一种是重新抛出一个错误,另一个是提供一个默认的回调值。今天我们介绍错误处理的另一种方式,先来看看重试。重试策略有一点需要记住,一旦流出现了错误,我们不能恢复它。但是没有什么能阻碍我们订阅其派生类对应的Observable,并且创建一个新的流。这种策略的工作原理是:1、我们将获取输入Observable并且订阅它,这将创建一个新的流。2、如果流没有出错,我们将在输

RxJs高阶运算——mergeMap

上一节我们介绍了第一个高阶运算concatMap,今天我们开始学习第二个高阶运算mergeMap。同样的道理,为了掌握mergeMap,我们先了解merge。mergeMap动态图我们知道concatMap是顺序执行,有的时候我们可能需要并行执行,此时我们就要用到merge.Observable Merge代码举例onst series1$ = interval(1000).pipe(map(va

CKEditor5——模型理解(二:Node)

上一节我们理解了基本的CK5的模型基本信息,今天我们来学习一些模型的API。节点说明首先,需要理解的就是模型的节点。在这一点上,CK5的模型节点和dom的节点有点类似,也有一些不同。我会在文章中一一介绍。节点是模型树的基本结构。它是模型中不同节点类型的一种抽象。这里需要指出的一点是:如果一个节点从模型树中分离出来,你可以使用它的 API 来操作它。但是,非常重要的是,已经附加到模型树的节点只能通过

CKEditor5——模型理解(五:Position, Range, Selection)

今天我们继续学习CK5中模型的一些知识,主要包括:Position, Range, Selection首先,我们需要知道:position表示模型树中的一个位置。模型的位置有两部分组成:root,path。即位置由其根和该根中的路径表示。位置基于偏移量,而不是索引。这意味着两个文本节点 foo 和 bar 之间的位置偏移为 3,而不是 1。由于模型中的位置由位置根和位置路径表示,因此可以创建不存在

TypeScript对优化代码最有用的几个工具类型(Utility Type)

TypeScript提供了好几个工具类型,它们主要用于常见的类型转换。这里介绍让代码优化非常有用的几个工具类型:Partial,Required,Record,Pick,Omit和Exclude。PartialPartial顾名思义,取部分。它的作用是把已有类型里的所有属性变为可选。示例interface User{ id:number; name:string; atavarUrl:

BabelJS - 使用 Babel 7 设置项目

BabelJS - 使用 Babel 7 设置项目最新版本的 Babel,7 发布,对现有包进行了更改。安装部分与 Babel 6 相同。abel 7 唯一的区别是所有的包都需要用@babel/ 安装,例如@babel/core、@babel/preset-env、@babel/cli、@babel/polyfill 等。这是使用 babel 7 创建的项目设置。1、执行以下命令开始项目设置npm