TypeScript
关注
TypeScript 在 SAP 产品开发中的应用介绍
汪子熙
Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达15年的 SAP 产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign，SAP CRM，SAP Cloud for Customer，SAP S/4HANA，SAP Commerce Cloud(电商云)等标准产品的研发工作。
Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发, 对包括 SAP UI5 在内的多款 SAP 自研框架有深入的研究。
展开
-
一个前端开发工程师的天猫精灵评测报告
虽然从普通用户眼中，使用语音向天猫精灵发起指令，然后收到后者的语音回复，这个流程似乎很简单，但背后实际上有着人工智能中 ASR（语音识别）、NLP（自然语言处理）、TTS（语音合成）等自然语言处理技术的参与和整合。我们先来看一个典型的用户通过语音同天猫精灵交互的流程图。用户用语音唤醒天猫精灵，后者接收到用户语音，上传到智能应用平台。平台使用 ASR（音频转文字）和 NLP（自然语言处理）技术，智能解析出用户发出语音包含的意图(通俗的说，即用户当前期望天猫精灵完成什么样的操作)。平台会自动将当前原创 2022-07-22 10:39:23 · 58 阅读 · 0 评论 -
rxjs Observable 设计原理背后的 Pull 和 Push 思路
Observables 顾名思义，是可以被观察的事务。在 Rxjs 的上下文里，Observable 会随着时间的推移，在某个时间点产生数据。Observables 可以：不停地（永远）产生值，比如 interval 操作符。可以一次性生产价值，然后进入 complete 状态。可能会产生错误，然后进入 complete 状态。Observable 是一种异步事件的实现利器，例如单个操作（HTTP 请求）或多个可重复的操作（例如光标移动或按键）。响应式编程(Reactive Programm原创 2022-07-22 10:27:14 · 35 阅读 · 0 评论 -
在 NgModule 里通过依赖注入的方式注册服务实例
首先，我们现在可以拥有两个具有完全相同类名的providers，Angular在解析正确的服务时不会有任何问题。其次，我们还可以使用不同的提供者覆盖现有提供者，同时保持令牌相同。对象中的provide属性是我们正在注册的提供者的令牌。现在假设有一个新的需求，需要将我们的登录身份验证方式，更改为一个使用Facebook登录用户的库。上面的例子用不同的值替换了useClass属性。这样，我们可以在我们的应用程序中的任何地方使用AuthService-而无需进行进一步的更改。...原创 2022-07-18 19:15:50 · 50 阅读 · 0 评论 -
Angular InjectionToken APP_INITIALIZER 的实现方法介绍
APP_INITIALIZER 是 InjectionToken的一个实例。它是 Angular 提供的内建注入令牌。Angular会在应用加载时执行这个令牌提供的函数。如果函数返回promise，那么angular会一直等待，直到promise被解析。这将使它成为在应用程序初始化之前执行一些初始化逻辑的理想位置。Angular 注入器使用 DI 令牌来定位 Angular providers 中的依赖项。我们使用令牌在提供者中注册依赖项：上面代码里的 ，可以是一个 type，一个字符串，或者是 Inje原创 2022-07-11 16:11:34 · 61 阅读 · 0 评论 -
SAP 电商云 Spartacus UI Site Context 模块里 Providers 组件的实现明细
index.ts 里只有两份 export：是一些参数常量。context-service-map.ts (ContextServiceMap)ContextServiceMap 是一个 map 结构，key 是字符串，value 是这种 site context 对应的 SiteContext Facade 类？比如我们之前在 文件夹里讨论过的：serviceMapFactory工厂函数，负责提供 ContextServiceMap 的实现？什么时候 ContextServiceMap 的实原创 2022-07-11 15:54:52 · 57 阅读 · 0 评论 -
如何使用 Angular 服务器端渲染的 Transfer State Service
假设我们使用 Angular Universal 开发一个服务器端渲染的 Angular 应用，这个应用会消费一个第三方的 Restful API.上述场景分为下列六个步骤：用户向部署了 Angular 服务器端应用的 Node.js 服务器发起页面请求Node.js 调用第三方 Restful API，第三方 Restful API 返回结果，这个结果被用于渲染最后的页面服务器端渲染的页面，返回给浏览器Angular 在浏览器中引导，并再次调用 Restful API原创 2022-06-24 16:27:20 · 65 阅读 · 0 评论 -
关于 JavaScript 事件循环 Event Loop 的一些理解
浏览器 JavaScript 执行流程以及在 Node.js 中都是基于事件循环的。了解事件循环的工作原理对于正确编写健壮和高性能的 JavaScript 代码非常重要。本文首先介绍有关事物如何工作的理论细节，然后介绍这些知识的实际应用。事件循环遵循下面的处理范式：任务被设置——引擎处理它们——然后等待更多任务（在睡眠和消耗接近于零的 CPU 事件）。如果在 JavaScript 执行引擎忙时又有新任务达到，这些新任务会被排队，形成一个队列，即所谓的 （v8 术语）。例如，当引擎忙于执行脚本时，用户可能会移原创 2022-06-14 09:47:23 · 53 阅读 · 0 评论 -
rxjs 里 Skip 操作符的一个使用场景
skip 操作符允许我们忽略源的前 x 个排放。 当我们有一个始终在 subscription 上发出希望忽略的某些值的可观察对象时，就可以使用这个操作符。比如 Observable emit 的前几个值并不是我们感兴趣的值，另一种情况是我们订阅了 Replay 或 BehaviorSubject，并且不需要对初始值进行操作，而只关心初始值之后的数据 emit. 这种情况下，skip 操作符非常有用。有时候我们可以通过使用带有索引的 filter 操作符来达到和使用 skip 同样的效果：filter原创 2022-05-14 21:54:21 · 96 阅读 · 0 评论 -
Content Security Policy 学习笔记之二：default-src 指令的使用方式
我们定义了这样一条 CSP 策略：Content-Security-Policy: script-src ‘self’ https://apis.google.comscript-src 是一个指令，用于控制特定页面的一组与脚本相关的权限。 我们将 self 指定为一个有效的脚本来源，并将 https://apis.google.com 指定为另一个。 浏览器尽职尽责地通过 HTTPS 从 apis.google.com 以及当前页面的来源下载并执行 JavaScript。定义此策略后，当浏览器从原创 2022-05-14 21:40:38 · 628 阅读 · 0 评论 -
rxjs 里 CombineLatest 操作符的一个使用场景
一个具体的例子：combineLatest([ data$.pipe(startWith(null)), loading$,]).pipe( takeWhile(([data, loading]) => !data || loading, true), map(([data, loading]) => loading ? null : data), skip(1), distinctUntilChanged(),);我们在这里使用巧妙的 takeWhile 函数原创 2022-05-10 09:33:49 · 147 阅读 · 0 评论 -
SAP 电商云 Spartacus UI ActiveCartService 的 isStable API 里的 EMPTY 操作符
isStable API 源代码如下：return this.activeCartId$.pipe( switchMap((cartId) => this.multiCartService.isStable(cartId)), debounce((state) => (state ? timer(0) : EMPTY)), distinctUntilChanged() );EMPTY 操作符：直接发送 complete 事件。看一个简单的例原创 2022-05-09 09:43:27 · 101 阅读 · 1 评论 -
TypeScript 里的 Reference Type 和 Triple-Slash Directives
SAP Spartacus 是一个 TypeScript 应用，在有些文件开头，发现了这样的定义：// '@sapui5/ts-types-esm' package contains types for sap modules, e.g. 'sap/ui/core/Core'/// <reference types="@sapui5/ts-types-esm" />对第 31 行的代码按住 Ctrl 再单击鼠标左键：直接跳转到了 sap.ui.core.d.ts 文件内部：///原创 2022-05-08 09:50:15 · 145 阅读 · 0 评论 -
什么是 constructor signature in interface
接口中的 constructor signature 不能在类中实现； 它们仅用于定义定义 newable 的现有 JS API. 下面是一个例子：interface ComesFromString { name: string;}意思是这个接口代表一个可以使用 `new` 操作符操作的对象。返回的类型是 ComesFromStringinterface StringConstructable { new(n: string): ComesFromString;}class原创 2022-03-25 10:05:16 · 358 阅读 · 2 评论 -
SAP UI5 的 TypeScript 实践
TypeScript 是 JavaScript 的超集，它为语言添加了可选的静态类型。 它带有一个编译器，可以将 TypeScript 代码转换为 JavaScript，并在 JavaScript 运行的任何地方运行它，浏览器，NodeJS 等等。 最大的变化是 TypeScript 自带了 Types。同时，这使得开发像您在 JavaScript 中可能习惯的通用代码变得更加困难，因为它是无类型的。TypeScript 的目标是在我们的 IDE 中提供更好的集成，以帮助我们更早地发现错误。TypeScr原创 2022-01-30 09:52:17 · 628 阅读 · 0 评论 -
通过 SAP UI5 的 TypeScript 开发环境，来学习什么是 DefinitelyTyped
我们看个具体的例子。下面这个使用 TypeScript 编写的 SAP UI5 Component：import UIComponent from "sap/ui/core/UIComponent";/** * @namespace ui5.typescript.helloworld */export default class Component extends UIComponent { public multiply(x : number, y : number) : numb原创 2022-01-28 10:05:29 · 469 阅读 · 0 评论 -
使用 TypeScript 编写 SAP UI5 应用的准备工作
新建一个文件夹 ui5-ts, 执行命令行 npm init -y 初始化：新建一个 src 文件夹，里面存放一个 Component.ts 文件，源代码如下：import UIComponent from "sap/ui/core/UIComponent";/** * @namespace ui5.typescript.helloworld */export default class Component extends UIComponent { public multiply原创 2022-01-27 09:41:58 · 328 阅读 · 0 评论 -
rxjs 操作符 pairwise 的一个例子
Groups pairs of consecutive emissions together and emits them as an array of two values.pairwise 将连续的发射出的值进行分组并配对，然后以数组的数据结构进行发射。pairwise 返回的数据类型如下：返回一个新的 OperatorFunction，这是一个函数，该函数返回一个新的 Observable，以数组的结构包裹了源 Observable 发射的值。OperatorFunction<T, .原创 2022-01-14 16:36:51 · 249 阅读 · 0 评论 -
debounceTime 和 throttleTime 的弹珠图
debounceTime：测试代码import { concat, debounceTime, filter, interval, mapTo, of, take, throttleTime,} from 'rxjs';const a = of(1);const b = of(2);const c = concat(a, b);c.subscribe((data) => console.log(data));const a1$ = interval原创 2022-01-05 15:12:48 · 239 阅读 · 0 评论 -
rxjs ThrottleTime 和 debounceTime 的操作符区别
throttleTime 的作⽤是限制在 duration 时间范围内，从上游传递给下游数据的个数；debounceTime 的作⽤是让传递给下游的数据间隔不能⼩于给定的时间 dueTime。一旦把下列代码拷贝到 StackBlitz 里，就报错：import { interval, throttleTime } from 'rxjs';import 'rxjs/add/observable/interval';import 'rxjs/add/operator/throttleTime';.原创 2022-01-05 14:29:55 · 696 阅读 · 1 评论 -
Cypress 的条件测试
条件测试用下列的编程范式可以清晰表示出来：If X, then Y, else Z如今，现代 JavaScript 应用程序是高度动态和可变的。 它们的状态和 DOM 在一段时间内不断变化。条件测试的问题在于它只能在状态稳定后才能使用。 在现代应用程序中，知道状态何时稳定通常是不可能的。对人类而言——如果从现在起 10 毫秒或 100 毫秒发生变化，我们甚至可能不会注意到这种变化并假设状态总是相同的。对于机器人来说——即使是 10 毫秒也代表着数十亿+ 的时钟周期。 时间尺度的差异令人难以置信原创 2021-12-30 15:09:59 · 409 阅读 · 0 评论 -
Cypress 里的 Flaky test 管理
鼠标 hover 上去，看到提示信息：This test both passed and failed when retried within a run何谓 Flaky test？Cypress 官网有如下定义：当一个测试可以在多次重试尝试中通过和失败而没有任何代码更改时，它被认为是不稳定的。例如，执行了一个测试并失败，然后再次执行该测试，代码没有任何更改，但这次它通过了。当之前测试过的代码测试失败时，这是一个强烈的信号，表明代码出现了新的错误。 之前，测试通过，代码正确； 现在测试失败并原创 2021-12-28 22:04:13 · 179 阅读 · 0 评论 -
关于 TypeScript 联合类型 union type 赋值的一个错误消息
今天我做开发时遇到如下的 TypeScript 错误：Type ‘Observable<boolean | undefined>’ is not assignable to type ‘Observable’.Type ‘boolean | undefined’ is not assignable to type ‘boolean’.Type ‘undefined’ is not assignable to type ‘boolean’.ts(2322)原因是参与 combine原创 2021-12-08 15:06:06 · 248 阅读 · 0 评论 -
TypeScript Partial 使用的一个小技巧
TypeScript 提供了一些工具性质的类型定义来方便开发人员进行一些通用的类型定义。Partial 是其中之一。看个例子：interface Todo { title: string; description: string;}const todo1 = { title: 'organize desk', description: 'clear clutter',};我们将如何编写一个方法来获取我们的 Todo 实例并使用来自另一个 Todo 的值更新它？原创 2021-12-08 11:42:22 · 129 阅读 · 0 评论 -
什么是 TypeScript 的 Module Augmentation
在进入模块扩充之前，让我们看看一些 TypeScript 合并原则，这些原则将随着我们的进步而变得有用。TypeScript 支持创建同名的 class 和 interface：class Food { cheese: string;}interface Food { bacon: string;}const food = new Food();food.bacon = "nice bacon";food.cheese = "sweet cheese";console.lo原创 2021-12-01 16:47:37 · 601 阅读 · 0 评论 -
从一个实际的例子触发，理解什么是 Rxjs 的 defer 函数
我们在开发复杂的 Angular 应用时，经常会使用到 Rxjs 的 defer 函数，例如：创建一个 Observable，在订阅时调用 Observable 工厂为每个新的 Observer 创建一个 Observable 对象。该函数接收一个输入参数，类型为一个工厂函数。输出为一个 Observable 对象，一旦被订阅时，其绑定的工厂函数会被调用。defer 的实质是延迟创建机制，即只有在返回的 Observable被订阅时，才开始创建 Observable 对象。defer 允许你只在原创 2021-11-27 22:54:50 · 327 阅读 · 0 评论 -
JavaScript 里三个点 ... 的用法
Three dots ( … ) in JavaScriptRest Parameters使用 rest 参数，我们可以将任意数量的参数收集到一个数组中，然后用它们做我们想做的事情。 引入了其余参数以减少由参数引起的样板代码。function myFunc(a, b, ...args) { console.log(a); // 22 console.log(b); // 98 console.log(args); // [43, 3, 26]};myFunc(22, 98, 43, 3, 2原创 2021-10-16 16:15:01 · 470 阅读 · 0 评论 -
关于 TypeScript 内 constructor signature 的一些失败尝试
interface ArrayContaining { //new (sample: any[]): any; jasmineToString(): string; }class Jerry{ jasmineToString = () => '1'; constructor(private name:string){ console.log('name: ', this.name); }}const b:ArrayCon原创 2021-09-29 21:15:45 · 120 阅读 · 0 评论 -
TypeScript constructor signature 类型的变量赋值方式
看这段代码：interface ArrayContaining { new (sample: string): any;}试图给一个类型为 ArrayContaining 的变量赋值，下列这样赋值行不通：const a: ArrayContaining = () => 1;遇到错误消息：Type ‘() => number’ is not assignable to type ‘ArrayContaining’.Type ‘() => number’原创 2021-09-29 12:37:07 · 145 阅读 · 0 评论 -
如何理解 new (...args: any[]) =＞ any
关于javascript：如何开始理解类型…args：any [])=> any如何理解下面这段代码里的 new 操作？/** * Checks if the value is an instance of the specified object. */isInstance(object: any, targetTypeConstructor: new (...args: any[]) => any) { return targetTypeConstructor原创 2021-09-28 11:38:03 · 619 阅读 · 0 评论 -
NgRx Selector 的 Memoization 特性学习笔记
在计算机编程领域中，memoization 或 memoisation 是一种优化技术，主要用于通过存储昂贵的函数调用的结果并在再次出现相同的输入时返回缓存的结果来加速计算机程序。Memoization 也已用于其他上下文（以及速度增益以外的目的），例如在简单的相互递归下降解析中。尽管与缓存有关，但记忆化是指此优化的特定情况，将其与缓存或页面替换等缓存形式区分开来。在某些逻辑编程语言的上下文中，记忆化也称为 Tabling.记忆功能“记住”与某些特定输入集相对应的结果。使用记住输入的后续调用返回记住的结原创 2021-09-15 16:36:14 · 136 阅读 · 0 评论 -
RxJs SwitchMapTo 操作符之移花接木
将每个源值投影到同一个 Observable，该 Observable 在输出 Observable 中使用 switchMap 多次展平。输入一个 Observable，输出一个 function Operator. 实际是一个函数，每次在源 Observable 上发出值时，该函数都会返回一个 新的 Observable.该函数从给定的 innerObservable 发出项目，并且仅从最近投影的内部 Observable 中获取值。看个例子：import { EMPTY, range } fr原创 2021-09-15 16:02:41 · 134 阅读 · 0 评论 -
Rxjs 的一些学习笔记
源自观察者-发布者设计模式：观察者注册于 Subject 上，每当 subject 状态发生变化时，通知观察者。RxJs 里的 Observable 就是 Subject：管道：连接 Observable 的同时，增添额外的逻辑：冷热 Observable 的区别：Cold Observable，仅当被订阅时，才通过内部生产者生产数据Hot Observable，具有外部生产者，不管被订阅与否，都能够自主生产数据，比如基于 HTML Event listener 的 Observable原创 2021-09-12 17:34:55 · 107 阅读 · 0 评论 -
关于 SAP Spartacus CSR fallback 之后，是否仍然会继续进行 SSR 的处理
来自 nguniversal 的 express engine 渲染完了后，渲染完毕的 HTML 源代码保存在 150 行代码 html 里，callback 就是 Spartacus 团队开发的 ssr optimization engine 的实现：回调执行时，maxRenderTimeout 不为空，说明 maxRenderTime 驱动的 setTimeout 尚未执行，这说明 maxRenderTime 超时没有发生，因此不会执行到第 170 行。先调用 callback 把 html原创 2021-09-01 21:45:25 · 125 阅读 · 0 评论 -
TypeScript 编译生成的 JavaScript 源代码里的 ɵcmp 属性
Angular Component definitions我有一个 Angular Component，名为 RegisterComponent，其 HTML 实现部分摘录如下：<section class="cx-page-section container" *ngIf="!(isLoading$ | async); else loading"> <div class="row justify-content-center"> <div class原创 2021-08-23 12:01:38 · 175 阅读 · 1 评论 -
乐高(LEGO)在线购物店面剖析
这是 Jerry 2021 年的第 55 篇文章，也是汪子熙公众号总共第 332 篇原创文章。下图是 SAP Commerce Cloud(电商云) UI 加载默认的 SampleData 数据集后打开的主页，这是一个电子设备的在线购物店面，基于 SAP Spartacus 开源项目构建而成。本文介绍一个实际客户案例，在 Jerry 之前的文章 关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine Optimization 曾经提到过，下图这个网站，是乐原创 2021-08-15 22:56:29 · 269 阅读 · 0 评论 -
JavaScript 里变量名前面加了大括号代表什么含义
在ES6的语法里面, 如果export的时候加了default , import的时候就不需要加{};如果没有加default就需要加{}在ES5用require引入的语法,第一和第三个，相当于把export的module的对象赋给局部变量而第二个，就是 {log} 那个，相当于把export的对象里名字叫做log的那个属性的值拿出来，assign给本地的log这个变量要获取更多Je...原创 2019-03-04 14:44:31 · 5143 阅读 · 0 评论 -
promise 和 Observable 的区别
StackOverflow 上的讨论：What is the difference between Promises and Observables?得赞最高的一个回答：1777 赞当异步操作完成或失败时，Promise 会处理单个事件。注意：有 Promise 库支持 cancellation 操作，但 ES6 Promise 到目前为止还不支持。Observable一个 Observable 就像一个 Stream（在许多语言中），允许传递零个或多个事件，其中为每个事件调用回调。通常 Ob原创 2021-07-19 11:10:31 · 229 阅读 · 1 评论 -
一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别
原文今天当我在做 Angular 开发时，一个知识点引起了我的注意：在检查 DOM 时，我看到 ngcontent 被 Angular 应用于元素。 嗯……如果它们包含了最终 DOM 中的元素，那么 <ng-container> 有什么用？ 当时我对 <ng-container> 和 <ng-content> 的区别感到困惑。在寻求知道我的问题的答案的过程中，我发现了 <ng-template> 的概念。 令我惊讶的是，还有另一个容易混淆的概念： *n原创 2021-07-15 15:13:25 · 234 阅读 · 0 评论 -
RxJS switchMap, mergeMap, concatMap，exhaustMap 的比较
原文：Comprehensive Guide to Higher-Order RxJs Mapping Operators: switchMap, mergeMap, concatMap (and exhaustMap)我们日常发现的一些最常用的 RxJs 操作符是 RxJs 高阶映射操作符：switchMap、mergeMap、concatMap 和exhaustMap。例如，我们程序中的大部分网络调用都将使用这些运算符之一完成，因此熟悉它们对于编写几乎所有反应式程序至关重要。知道在给定情况下使用哪原创 2021-07-14 16:19:29 · 331 阅读 · 0 评论 -
TypeScript 书写 .d.ts 文件的一些注意事项
Do’s and Don’ts永远不要使用类型 Number、String、Boolean、Symbol 或 Object. 这些类型是指几乎从未在 JavaScript 代码中正确使用的非原始装箱对象。下列用法不推荐：function reverse(s: String): String;应该使用下列用法：function reverse(s: string): string;any除非您正在将 JavaScript 项目迁移到 TypeScript，否则不要使用 any 作为类型。 编译器原创 2021-07-02 09:31:06 · 394 阅读 · 0 评论