
TypeScript
汪子熙
JerryWang,2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师,SAP中国技术大使。2020年5月下旬,Jerry做了脑部肿瘤的开颅切除手术,对编程和人生又有了新的感悟。
-
原创 TypeScript里数组foreach和map操作的区别
如果map操作里的返回值没有被使用,那么map可以被forEach替换。2021-01-05 11:47:2945
0
-
原创 TypeScript里的类型合并操作符&
通过 & 运算符可以将现有的多种类型叠加到一起成为一种类型:type PointX = { x: number; };type PointY = { y: number; }type Point = PointX & PointY;const point:Point = { x: 1, y: 1};编译之后的JavaScript代码:var point = { x: 1, y: 1 };...2020-11-30 22:27:52118
0
-
原创 TypeScript里的工具类型Partial的用法
在SAP Spartacus的源代码里我们可以观察到很多Partial的使用场景:Partial 可以快速把某个接口类型中定义的属性变成可选的(Optional):interface People { age: number; name: string;}const Jerry:People = { age: 10, name: 'Jerry'};const Tom: People = { name: 'Tom'}上述代码会发生编译时错误:1.ts:11:7 -2020-11-30 14:52:23239
0
-
原创 TypeScript里的空值合并运算符(双问号)用法
当左侧操作数为 null 或 undefined 时,其返回右侧的操作数,否则返回左侧的操作数。例子:const foo = null ?? 'default string';编译后的JavaScript代码:var _a;var foo = (_a = null) !== null && _a !== void 0 ? _a : 'default string';可见,这个例子,foo必定为default string, 因为编译后的JavaScript代码里,已经能看到n2020-11-30 14:37:40174
0
-
原创 TypeScript里的可选链(Optional Chaining,即问号)用法
用途:遇到null或者undefined时可以立即停止表达式的运行。看个例子:let a = { b: 1};const val = a?.b;编译之后生成的JavaScript代码:var a = { b: 1 };var val = a === null || a === void 0 ? void 0 : a.b;可见,如果a为null或者void 0,会直接返回void 0,而不会接着执行a.b因此,以后我们可以不需要编写形如if( a && a.b){}2020-11-30 14:23:23131
0
-
原创 TypeScript里的自定义类型用法
我的博客即将同步至 OSCHINA 社区,这是我的 OSCHINA ID:JerryWang_SAP,邀请大家一同入驻:https://www.oschina.net/sharing-plan/apply2020-11-19 19:16:2679
0
-
原创 TypeScript的非空断言操作符(感叹号)
# Created by Jerry Wang, last modified on Dec 01, 2014 如果UI上遇到如下error message:...2019-06-20 11:03:35132
0
-
原创 在StackBlitz上进行rxjs编程练习
网址:https://stackblitz.com/新建一个Angular应用,类型选择RxJS:StackBlitz会自动生成应用模板:源代码:import { of } from 'rxjs'; import { map } from 'rxjs/operators';const source = of('World').pipe( map(x => `Hello ${x}!`));source.subscribe(console.log);import { Ob2020-11-21 09:47:0637
0
-
原创 Initializer provides no value for this binding element and the binding element has no default value
引起错误的TypeScript代码:test(){ const a = () => ({ a , b = 2 } = {}): number => 11; }该编译错误的解决方法1test(){ const a = () => ({ a , b = 2 }:any = {}): number => 11; }解法2test(){ const a = () => ({ a = 1, b = 2 } = {}): number =&g2020-11-10 12:09:42116
0
-
原创 TypeScript里的高阶函数-返回函数的函数,以及对应的JavaScript代码
const a = () => ({ a = 1, b = 2 } = {}): number => 11;编译之后生成的JavaScript函数:var a = function () { return function (_a) { var _b = _a === void 0 ? {} : _a, _c = _b.a, a = _c === void 0 ? 1 : _c, _d = _b.b, b = _d === void 0 ? 2 : _d; return 12020-11-10 11:59:12575
0
-
原创 TypeScript输入参数的默认值一例,以及对应生成的JavaScript代码分析
const fun = ({ aa = 1, bb = 0 } = {}) => { console.log('aa: ' + aa); console.log('bb: ' + bb); return 'hello'; }document.body.innerHTML = fun(); 使用tsc进行编译:生成的JavaScript代码:var fun = function (_a) { var _b = _a === void 02020-11-10 11:30:51101
0
-
原创 TypeScript里get属性的实现
例子:private get activeBaseSite(): string { return ( this._activeBaseSite ?? getContextParameterDefault(this.config, BASE_SITE_CONTEXT_ID) ); }语法:private get 属性名():返回类型{}运行时调试:Object.defineProperty:什么时候填充的?这个前面加了_前缀的activeB2020-10-21 12:17:54111
0
-
原创 SAP Spartacus源代码里declare关键字的含义
https://stackoverflow.com/questions/35019987/what-does-declare-do-in-export-declare-class-actionsvar creates a new variable. declare is used to tell TypeScript that the variable has been created elsewhere. If you use declare, nothing is added to the Java2020-09-09 15:18:59230
0
-
原创 TypeScript里的.d.ts语法
在SAP Spartacus的实现里有很多.d.ts文件:https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html相当于commonJS的module pattern.回忆一下commonJS:Node 应用由模块组成,采用 CommonJS 模块规范。每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。// exampl2020-09-09 15:15:52490
0
-
原创 SAP Spartacus源代码里的declare var window的含义
By writing declare var angular you are simply telling Typescript to trust you that it exists, even though it hasn’t seen it be imported into the scope of this file.https://stackoverflow.com/questions/56048760/why-is-declare-var-angular-necessary-when-usin2020-09-09 14:40:05355
0
-
原创 SAP Spartacus TypeScript源代码中的三个点用法
args可以传递任意数量的参数,返回类型是T:2020-09-09 14:31:34210
0
-
原创 TypeScript里的类型为any和泛型的区别
看下面这个TypeScript函数:function identity(arg: any): any { return arg;}虽然使用any类型后这个函数已经能接收任何类型的arg参数,但是却丢失了一些信息:传入的类型与返回的类型应该是相同的。 通过any类型,无法实现这个约束。因此,需要一种方法使返回值的类型与传入参数的类型是相同的。 这里,我们使用了类型变量,它是一种特殊的变量,只用于表示类型而不是值。function identity<T>(arg: T): T {2020-08-19 17:44:48461
0
-
原创 TypeScript里的完整函数定义语法
例子:let myAdd: (x:number, y:number)=>number = function(x: number, y: number): number { return x+y; };函数参数列表和返回值类型之前,用=>分隔:生成的JavaScript代码:var myAdd = function (x, y) { return x + y; };...2020-08-19 17:12:36217
0
-
原创 TypeScript里的混合类型
TypeScript的对象可以同时做为函数和对象使用,并带有额外的属性。interface Counter { (start: number): string; interval: number; reset(): void;}function getCounter(): Counter { let counter = <Counter>function (start: number) { }; counter.interval = 123;2020-08-19 16:56:52241
0
-
原创 TypeScript里的interface扩展,多继承以及对应的JavaScript代码
TypeScriptinterface Shape { color: string;}interface Square extends Shape { sideLength: number;}let square = <Square>{};square.color = "blue";square.sideLength = 10;对应生成的JavaScript:var square = {};square.color = "blue";square.2020-08-19 16:48:33171
0
-
原创 TypeScript里的interface和class以及对应的JavaScript代码
TypeScriptinterface ClockInterface { currentTime: Date;}class Clock implements ClockInterface { currentTime: Date; constructor(private h: number, private m: number) { this.currentTime = new Date(); }}JavaScriptvar Clock = /** @clas2020-08-19 16:43:30149
0
-
原创 什么是TypeScript的字符串索引签名
可选属性interface SquareConfig { color?: string; width?: number;}function createSquare(config: SquareConfig): {color: string; area: number} { let newSquare = {color: "white", area: 100}; if (config.color) { newSquare.color = config.color; }2020-08-19 16:34:18376
0
-
原创 TypeScript的类型断言,有点像ABAP的强制类型转换
通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。 TypeScript会假设开发人员已经进行了必须的检查。类型断言有两种形式。 其一是“尖括号”语法:let someValue: any = "this is a string";let strLength: number = (<string>someValue).length;第二种形式是as语法:2020-08-19 16:05:03122
0
-
原创 TypeScript里一些特殊的类型
本文内容部分来自:https://www.w3cschool.cn/typescript/typescript-basic-types.htmlany有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量:let notSure: any = 4;notSure = "maybe a string i2020-08-19 15:31:27107
0
-
原创 TypeScript的class关键字
TypeScript在构造函数参数中使用public是一种简写形式,它将自动创建具有该名称的属性:class Student { fullName: string; constructor(public firstName, public middleInitial, public lastName) { this.fullName = firstName + " " + middleInitial + " " + lastName; }}interface2020-08-19 15:18:59116
0
-
原创 TypeScript的interface关键字
使用interface关键字定义一个接口,它描述了具有firstName和lastName字段的对象。在TypeScript中,如果两个类型其内部结构兼容,那么这两种类型兼容。这使我们实现一个接口,仅仅只需必要的结构形状,而不必有明确的implements子句。interface Person { firstName: string; lastName: string;}function greeter(person: Person) { return "Hello, " +2020-08-19 15:13:01189
0
-
原创 使用npm安装TypeScript
命令行:npm install -g typescript新建一个TypeScript文件,粘贴如下内容:function greeter(person) { return "Hello, " + person;}var user = "Jane User";document.body.innerHTML = greeter(user); 使用命令行tsc 1.ts编译,得到一个同名的JavaScript文件:新建一个html,将1.js的代码粘贴进去:最后的效果:2020-08-19 15:05:0883
0