设计每日一贴

myModule.js内容如下：

exportfunctionappendResult(element){constresult=Math.random();element.innerText+=result;}动态导入ES模块是静态的，这意味着我们不能在运行时更改导入。随着2020年推出的动态导入(dynamicimports)，我们可以动态加载代码来响应用户交互(webpack早在ECMAScript2020推出这个特性之前就提供了动态导入)。

考虑下面的代码：

Load!

再考虑一个带有两个导出的JavaScript模块

//util.jsexportfunctionfuncA(){console.log("Hellonamedexport!");}exportdefaultfunctionfuncB(){console.log("Hellodefaultexport!");}为了动态导入util.js模块，我们可以点击按钮在去导入：

/loader.jsconstbtn=document.getElementById("btn");btn.addEventListener("click",()=>{//loadsnamedexportimport("./util.js").then(({funcA})=>{funcA();});});这里使用解构的方式，取出命名导出funcA方法：

({funcA})=>{}ES模块实际上是JavaScript对象：我们可以解构它们的属性以及调用它们的任何公开方法。

要使用动态导入的默认方法，可以这样做

//loader.jsconstbtn=document.getElementById("btn");btn.addEventListener("click",()=>{import("./util.js").then((module)=>{module.default();});});当作为一个整体导入一个模块时，我们可以使用它的所有导出

//loader.jsconstbtn=document.getElementById("btn");btn.addEventListener("click",()=>

{//loadsentiremodule//useseverythingimport("./util.js").then((module)=>{module.funcA();module.default();

还有另一种用于动态导入的常见样式，如下所示：

constloadUtil=()=>import("./util.js");constbtn=document.getElementById("btn");btn.addEventListener("click",()=>{//});loadUtil返回的是一个promise，所以我们可以这样操作

constloadUtil=()=>import("./util.js");constbtn=document.getElementById("btn");btn.addEventListener("click",()=>{loadUtil().then(module=>{module.funcA();module.default();})})动态导入看起来不错，但是它们有什么用呢？

使用动态导入，我们可以拆分代码，并只在适当的时候加载重要的代码。在JavaScript引入动态导入之前，这种模式是webpack(模块绑定器)独有的。

像React和Vue通过动态导入代码拆分来加载响应事件的代码块，比如用户交互或路由更改。

假设我们项目有一个person.json文件，内容如下：

{"name":"Jules","age":43}现在，我们需要动态导入该文件以响应某些用户交互。

因为JSON文件不是一个方法，所以我们可以使用默认导出方式：

constloadPerson=()=>import('./person.json');constbtn=document.getElementById("btn");btn.addEventListener("click",()=>{loadPerson().then(module=>{const{name,age}=module.default;console.log(name,age);});});这里我们使用解构的方式取出name和age:

const{name,age}=module.default;动态导入与async/await因为import()语句返回是一个Promise，所以我们可以使用async/await:

constloadUtil=()=>import("./util.js");constbtn=document.getElementById("btn");btn.addEventListener("click",async()=>{constutilsModule=awaitloadUtil();utilsModule.funcA();utilsModule.default();})动态导入的名字使用import()导入模块时，可以按照自己的意愿命名它，但要调用的方法名保持一致：

import("./util.js").then((module)=>{module.funcA();module.default();});或者：

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

好的，下面我们来开始介绍第一个符号——!非空断言操作符。

一、!非空断言操作符

在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符!可以用于断言操作对象是非null和非undefined类型。具体而言，x!将从x值域中排除null和undefined。

那么非空断言操作符到底有什么用呢？下面我们先来看一下非空断言操作符的一些使用场景。

1.1忽略undefined和null类型

functionmyFunc(maybeString:string|undefined|null){//Type'string|null|undefined'isnotassignabletotype'string'.//Type'undefined'isnotassignabletotype'string'.constonlyString:string=maybeString;//ErrorconstignoreUndefinedAndNull:string=maybeString!;//Ok}

1.2调用函数时忽略undefined类型

typeNumGenerator=()=>number;functionmyFunc(numGenerator:NumGenerator|undefined){//Objectispossibly'undefined'.(2532)//Cannotinvokeanobjectwhichispossibly'undefined'.(2722)constnum1=numGenerator();//Errorconstnum2=numGenerator!();//OK}

因为!非空断言操作符会从编译生成的JavaScript代码中移除，所以在实际使用的过程中，要特别注意。比如下面这个例子：

consta:number|undefined=undefined;constb:number=a!;console.log(b);

以上TS代码会编译生成以下ES5代码：

"usestrict";consta=undefined;constb=a;console.log(b);

虽然在TS代码中，我们使用了非空断言，使得constb:number=a!;语句可以通过TypeScript类型检查器的检查。但在生成的ES5代码中，!非空断言操作符被移除了，所以在浏览器中执行以上代码，在控制台会输出undefined。

二、.运算符

TypeScript3.7实现了呼声最高的ECMAScript功能之一：可选链（OptionalChaining）。有了可选链后，我们编写代码时如果遇到null或undefined就可以立即停止某些表达式的运行。可选链的核心是新的.运算符，它支持以下语法：

obj.prop

obj.[expr]

arr.[index]func.(args)

这里我们来举一个可选的属性访问的例子：

constval=a.b;

为了更好的理解可选链，我们来看一下该constval=a.b语句编译生成的ES5代码：

varval=a===null||a===void0void0:a.b;

上述的代码会自动检查对象a是否为null或undefined，如果是的话就立即返回undefined，这样就可以立即停止某些表达式的运行。你可能已经想到可以使用.来替代很多使用&&执行空检查的代码：

if(a&&a.b){}if(a.b){}/**

*if(a.b){}编译后的ES5代码

*

*if(

*a===null||a===void0

*void0:a.b){

*}

*/

但需要注意的是，.与&&运算符行为略有不同，&&专门用于检测falsy值，比如空字符串、0、NaN、null和false等。而.只会验证对象是否为null或undefined，对于0或空字符串来说，并不会出现“短路”。

2.1可选元素访问

可选链除了支持可选属性的访问之外，它还支持可选元素的访问，它的行为类似于可选属性的访问，只是可选元素的访问允许我们访问非标识符的属性，比如任意字符串、数字索引和Symbol：

functiontryGetArrayElement(arr:T[],index:number=0){returnarr.[index];

}

以上代码经过编译后会生成以下ES5代码：

"usestrict";functiontryGetArrayElement(arr,index){if(index===void0){index=0;}returnarr===null||arr===void0void0:arr[index];

通过观察生成的ES5代码，很明显在tryGetArrayElement方法中会自动检测输入参数arr的值是否为null或undefined，从而保证了我们代码的健壮性。

2.2可选链与函数调用

当尝试调用一个可能不存在的方法时也可以使用可选链。在实际开发过程中，这是很有用的。系统中某个方法不可用，有可能是由于版本不一致或者用户设备兼容性问题导致的。函数调用时如果被调用的方法不存在，使用可选链可以使表达式自动返回undefined而不是抛出一个异常。

可选调用使用起来也很简单，比如：

letresult=obj.customMethod.();

该TypeScript代码编译生成的ES5代码如下：

varresult=(_a=obj.customMethod)===null||_a===void0void0:_a.call(obj);

另外在使用可选调用的时候，我们要注意以下两个注意事项：

如果存在一个属性名且该属性名对应的值不是函数类型，使用.仍然会产生一个TypeError异常。

可选链的运算行为被局限在属性的访问、调用以及元素的访问——它不会沿伸到后续的表达式中，也就是说可选调用不会阻止a.b/someMethod()表达式中的除法运算或someMethod的方法调用。

三、空值合并运算符

在TypeScript3.7版本中除了引入了前面介绍的可选链.之外，也引入了一个新的逻辑运算符——空值合并运算符。当左侧操作数为null或undefined时，其返回右侧的操作数，否则返回左侧的操作数。

与逻辑或||运算符不同，逻辑或会在左操作数为falsy值时返回右侧操作数。也就是说，如果你使用||来为某些变量设置默认的值时，你可能会遇到意料之外的行为。比如为falsy值（''、NaN或0）时。

这里来看一个具体的例子：

constfoo=null'defaultstring';console.log(foo);//输出："defaultstring"constbaz=042;console.log(baz);//输出：0

以上TS代码经过编译后，会生成以下ES5代码：

"usestrict";var_a,_b;varfoo=(_a=null)!==null&&_a!==void0_a:'defaultstring';

console.log(foo);//输出："defaultstring"varbaz=(_b=0)!==null&&_b!==void0_b:42;

console.log(baz);//输出：0

通过观察以上代码，我们更加直观的了解到，空值合并运算符是如何解决前面||运算符存在的潜在问题。下面我们来介绍空值合并运算符的特性和使用时的一些注意事项。

3.1短路

当空值合并运算符的左表达式不为null或undefined时，不会对右表达式进行求值。

functionA(){console.log('Awascalled');returnundefined;}functionB(){console.log('Bwascalled');returnfalse;}functionC(){console.log('Cwascalled');return"foo";}console.log(A()C());console.log(B()C());

上述代码运行后，控制台会输出以下结果：

Awascalled

Cwascalled

foo

Bwascalled

false

3.2不能与&&或||操作符共用

若空值合并运算符直接与AND（&&）和OR（||）操作符组合使用是不行的。这种情况下会抛出SyntaxError。

//'||'and''operationscannotbemixedwithoutparentheses.(5076)null||undefined"foo";//raisesaSyntaxError//'&&'and''operationscannotbemixedwithoutparentheses.(5076)true&&undefined"foo";//raisesaSyntaxError

但当使用括号来显式表明优先级时是可行的，比如：

(null||undefined)"foo";//返回"foo"

3.3与可选链操作符.的关系

空值合并运算符针对undefined与null这两个值，可选链式操作符.也是如此。可选链式操作符，对于访问属性可能为undefined与null的对象时非常有用。

interfaceCustomer{

name:string;

city:string;

}letcustomer:Customer={

name:"Semlinker"};letcustomerCity=customer.city"Unknowncity";console.log(customerCity);//输出：Unknowncity

前面我们已经介绍了空值合并运算符的应用场景和使用时的一些注意事项，该运算符不仅可以在TypeScript3.7以上版本中使用。当然你也可以在JavaScript的环境中使用它，但你需要借助Babel，在Babel7.8.0版本也开始支持空值合并运算符。

四、:可选属性

在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类去实现。TypeScript中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

interfacePerson{

age:number;

}letsemlinker:Person={

name:"semlinker",

age:33,

};

//Property'age'ismissingintype'{name:string;}'butrequiredintype'Person'.(2741)letlolo:Person={//Errorname:"lolo"}

}letlolo:Person={

name:"lolo"}

4.1工具类型

4.1.1Partial

在实际项目开发过程中，为了提高代码复用率，我们可以利用TypeScript内置的工具类型Partial来快速把某个接口类型中定义的属性变成可选的：

interfacePullDownRefreshConfig{

threshold:number;

stop:number;

}/**

*typePullDownRefreshOptions={

*threshold:number|undefined;

*stop:number|undefined;

*/typePullDownRefreshOptions=Partial

是不是觉得Partial很方便，下面让我们来看一下它是如何实现的：

/**

*MakeallpropertiesinToptional

*/typePartial={

[PinkeyofT]:T[P];

4.1.2Required

}typePullDownRefreshOptions=Partial/**

*typePullDownRefresh={

*threshold:number;

*stop:number;

*/typePullDownRefresh=Required>

同样，我们来看一下Required工具类型是如何实现的：

*MakeallpropertiesinTrequired

*/typeRequired={

[PinkeyofT]-:T[P];

原来在Required工具类型内部，通过-移除了可选属性中的，使得属性从可选变为必选的。

五、&运算符

在TypeScript中交叉类型是将多个类型合并为一个类型。通过&运算符可以将现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

typePartialPointX={x:number;};typePoint=PartialPointX&{y:number;};letpoint:Point={

x:1,

y:1}

在上面代码中我们先定义了PartialPointX类型，接着使用&运算符创建一个新的Point类型，表示一个含有x和y坐标的点，然后定义了一个Point类型的变量并初始化。

5.1同名基础类型属性的合并

那么现在问题来了，假设在合并多个类型的过程中，刚好出现某些类型存在相同的成员，但对应的类型又不一致，比如：

interfaceX{

c:string;

d:string;

}interfaceY{

c:number;

e:string}typeXY=X&Y;typeYX=Y&X;letp:XY;letq:YX;

在上面的代码中，接口X和接口Y都含有一个相同的成员c，但它们的类型不一致。对于这种情况，此时XY类型或YX类型中成员c的类型是不是可以是string或number类型呢？比如下面的例子：

p={c:6,d:"d",e:"e"};

q={c:"c",d:"d",e:"e"};

为什么接口X和接口Y混入后，成员c的类型会变成never呢？这是因为混入后成员c的类型为string&number，即成员c的类型既可以是string类型又可以是number类型。很明显这种类型是不存在的，所以混入后成员c的类型为never。

5.2同名非基础类型属性的合并

在上面示例中，刚好接口X和接口Y中内部成员c的类型都是基本数据类型，那么如果是非基本数据类型的话，又会是什么情形。我们来看个具体的例子：

interfaceD{d:boolean;}interfaceE{e:string;}interfaceF{f:number;}interfaceA{x:D;}interfaceB{x:E;}interfaceC{x:F;}typeABC=A&B&C;letabc:ABC={

x:{

d:true,

e:'semlinker',

f:666}

};console.log('abc:',abc);

以上代码成功运行后，控制台会输出以下结果：

由上图可知，在混入多个类型时，若存在相同的成员，且成员类型为非基本数据类型，那么是可以成功合并。

六、|分隔符

在TypeScript中联合类型（UnionTypes）表示取值可以为多种类型中的一种，联合类型使用|分隔每个类型。联合类型通常与null或undefined一起使用：

constsayHello=(name:string|undefined)=>{/*...*/};

以上示例中name的类型是string|undefined意味着可以将string或undefined的值传递给sayHello函数。

sayHello("semlinker");

sayHello(undefined);

此外，对于联合类型来说，你可能会遇到以下的用法：

letnum:1|2=1;typeEventNames='click'|'scroll'|'mousemove';

示例中的1、2或'click'被称为字面量类型，用来约束取值只能是某几个值中的一个。

6.1类型保护

当使用联合类型时，我们必须尽量把当前值的类型收窄为当前值的实际类型，而类型保护就是实现类型收窄的一种手段。

类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。换句话说，类型保护可以保证一个字符串是一个字符串，尽管它的值也可以是一个数字。类型保护与特性检测并不是完全不同，其主要思想是尝试检测属性、方法或原型，以确定如何处理值。

目前主要有四种的方式来实现类型保护：

6.1.1in关键字

interfaceAdmin{

privileges:string[];

}interfaceEmployee{

startDate:Date;

}typeUnknownEmployee=Employee|Admin;functionprintEmployeeInformation(emp:UnknownEmployee){console.log("Name:"+emp.name);if("privileges"inemp){console.log("Privileges:"+emp.privileges);

}if("startDate"inemp){console.log("StartDate:"+emp.startDate);

6.1.2typeof关键字

functionpadLeft(value:string,padding:string|number){if(typeofpadding==="number"){returnArray(padding+1).join("")+value;

}if(typeofpadding==="string"){returnpadding+value;

}thrownewError(`Expectedstringornumber,got'${padding}'.`);

typeof类型保护只支持两种形式：typeofv==="typename"和typeofv!==typename，"typename"必须是"number"，"string"，"boolean"或"symbol"。但是TypeScript并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型保护。

6.1.3instanceof关键字

interfacePadder{

getPaddingString():string;

}classSpaceRepeatingPadderimplementsPadder{constructor(privatenumSpaces:number){}

getPaddingString(){returnArray(this.numSpaces+1).join("");

}classStringPadderimplementsPadder{constructor(privatevalue:string){}

getPaddingString(){returnthis.value;

}letpadder:Padder=newSpaceRepeatingPadder(6);if(padderinstanceofSpaceRepeatingPadder){//padder的类型收窄为'SpaceRepeatingPadder'}

6.1.4自定义类型保护的类型谓词（typepredicate）

functionisNumber(x:any):xisnumber{returntypeofx==="number";

}functionisString(x:any):xisstring{returntypeofx==="string";

七、_数字分隔符

TypeScript2.7带来了对数字分隔符的支持，正如数值分隔符ECMAScript提案中所概述的那样。对于一个数字字面量，你现在可以通过把一个下划线作为它们之间的分隔符来分组数字：

constinhabitantsOfMunich=1_464_301;constdistanceEarthSunInKm=149_600_000;constfileSystemPermission=0b111_111_000;constbytes=0b1111_10101011_11110000_00001101;

分隔符不会改变数值字面量的值，但逻辑分组使人们更容易一眼就能读懂数字。以上TS代码经过编译后，会生成以下ES5代码：

"usestrict";varinhabitantsOfMunich=1464301;vardistanceEarthSunInKm=149600000;varfileSystemPermission=504;varbytes=262926349;

7.1使用限制

虽然数字分隔符看起来很简单，但在使用时还是有一些限制。比如你只能在两个数字之间添加_分隔符。以下的使用方式是非法的：

//Numericseparatorsarenotallowedhere.(6188)3_.141592//Error3._141592//Error//Numericseparatorsarenotallowedhere.(6188)1_e10//Error1e_10//Error//Cannotfindname'_126301'.(2304)_126301//Error//Numericseparatorsarenotallowedhere.(6188)126301_//Error//Cannotfindname'b111111000'.(2304)//Anidentifierorkeywordcannotimmediatelyfollowanumericliteral.(1351)0_b111111000//Error//Numericseparatorsarenotallowedhere.(6188)0b_111111000//Error

当然你也不能连续使用多个_分隔符，比如：

//Multipleconsecutivenumericseparatorsarenotpermitted.(6189)123__456//Error

7.2解析分隔符

此外，需要注意的是以下用于解析数字的函数是不支持分隔符：

Number()

parseInt()

parseFloat()

这里我们来看一下实际的例子：

Number('123_456')NaNparseInt('123_456')123parseFloat('123_456')123

很明显对于以上的结果不是我们所期望的，所以在处理分隔符时要特别注意。当然要解决上述问题，也很简单只需要非数字的字符删掉即可。这里我们来定义一个removeNonDigits的函数：

constRE_NON_DIGIT=/[^0-9]/gu;functionremoveNonDigits(str){

str=str.replace(RE_NON_DIGIT,'');returnNumber(str);

该函数通过调用字符串的replace方法来移除非数字的字符，具体的使用方式如下：

removeNonDigits('123_456')123456removeNonDigits('149,600,000')149600000removeNonDigits('1,407,836')1407836

八、语法

8.1TypeScript断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其他语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。

类型断言有两种形式：

8.1.1“尖括号”语法

letsomeValue:any="thisisastring";letstrLength:number=(someValue).length;

8.1.2as语法

letsomeValue:any="thisisastring";letstrLength:number=(someValueasstring).length;

8.2TypeScript泛型

对于刚接触TypeScript泛型的读者来说，首次看到语法会感到陌生。其实它没有什么特别，就像传递参数一样，我们传递了我们想要用于特定函数调用的类型。

参考上面的图片，当我们调用identity(1)，Number类型就像参数1一样，它将在出现T的任何位置填充该类型。图中内部的T被称为类型变量，它是我们希望传递给identity函数的类型占位符，同时它被分配给value参数用来代替它的类型：此时T充当的是类型，而不是特定的Number类型。

其中T代表Type，在定义泛型时通常用作第一个类型变量名称。但实际上T可以用任何有效名称代替。除了T之外，以下是常见泛型变量代表的意思：

K（Key）：表示对象中的键类型；

V（Value）：表示对象中的值类型；

E（Element）：表示元素类型。

其实并不是只能定义一个类型变量，我们可以引入希望定义的任何数量的类型变量。比如我们引入一个新的类型变量U，用于扩展我们定义的identity函数：

functionidentity(value:T,message:U):T{console.log(message);returnvalue;

}console.log(identity(68,"Semlinker"));

除了为类型变量显式设定值之外，一种更常见的做法是使编译器自动选择这些类型，从而使代码更简洁。我们可以完全省略尖括号，比如：

}console.log(identity(68,"Semlinker"));

对于上述代码，编译器足够聪明，能够知道我们的参数类型，并将它们赋值给T和U，而不需要开发人员显式指定它们。

九、@XXX装饰器

9.1装饰器语法

@Plugin({

pluginName:'Device',

plugin:'cordova-plugin-device',

pluginRef:'device',

platforms:['Android','Browser','iOS','macOS','Windows'],

})@Injectable()exportclassDeviceextendsIonicNativePlugin{}

var__decorate=(this&&this.__decorate)||function(decorators,target,key,desc){varc=arguments.length,r=c<3target:desc===nulldesc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeofReflect==="object"&&typeofReflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);elsefor(vari=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3d(r):c>3d(target,key,r):d(target,key))||r;returnc>3&&r&&Object.defineProperty(target,key,r),r;

};varDevice=/**@class*/(function(_super){

__extends(Device,_super);functionDevice(){return_super!==null&&_super.apply(this,arguments)||this;

Device=__decorate([

}),

Injectable()

],Device);returnDevice;

}(IonicNativePlugin));

通过生成的代码可知，@Plugin({...})和@Injectable()最终会被转换成普通的方法调用，它们的调用结果最终会以数组的形式作为参数传递给__decorate函数，而在__decorate函数内部会以Device类作为参数调用各自的类型装饰器，从而扩展对应的功能。

9.2装饰器的分类

在TypeScript中装饰器分为类装饰器、属性装饰器、方法装饰器和参数装饰器四大类。

9.2.1类装饰器

declaretypeClassDecorator=(

target:TFunction

)=>TFunction|void;

类装饰器顾名思义，就是用来装饰类的。它接收一个参数：

target:TFunction-被装饰的类

看完第一眼后，是不是感觉都不好了。没事，我们马上来个例子：

functionGreeter(target:Function):void{

target.prototype.greet=function():void{console.log("HelloSemlinker!");

}@GreeterclassGreeting{constructor(){//内部实现}

}letmyGreeting=newGreeting();

myGreeting.greet();//consoleoutput:'HelloSemlinker!';

上面的例子中，我们定义了Greeter类装饰器，同时我们使用了@Greeter语法糖，来使用装饰器。

友情提示：读者可以直接复制上面的代码，在TypeScriptPlayground中运行查看结果。

9.2.2属性装饰器

declaretypePropertyDecorator=(target:Object,

propertyKey:string|symbol)=>void;

属性装饰器顾名思义，用来装饰类的属性。它接收两个参数：

target:Object-被装饰的类

propertyKey:string|symbol-被装饰类的属性名

趁热打铁，马上来个例子热热身：

functionlogProperty(target:any,key:string){deletetarget[key];constbackingField="_"+key;Object.defineProperty(target,backingField,{

writable:true,

enumerable:true,

configurable:true});//propertygetterconstgetter=function(this:any){constcurrVal=this[backingField];console.log(`Get:${key}=>${currVal}`);returncurrVal;

};//propertysetterconstsetter=function(this:any,newVal:any){console.log(`Set:${key}=>${newVal}`);this[backingField]=newVal;

};//CreatenewpropertywithgetterandsetterObject.defineProperty(target,key,{get:getter,set:setter,

configurable:true});

}classPerson{@logPropertypublicname:string;constructor(name:string){this.name=name;

}constp1=newPerson("semlinker");

p1.name="kakuqo";

以上代码我们定义了一个logProperty函数，来跟踪用户对属性的操作，当代码成功运行后，在控制台会输出以下结果：

Set:name=>semlinkerSet:name=>kakuqo

9.2.3方法装饰器

declaretypeMethodDecorator=(target:Object,propertyKey:string|symbol,

descriptor:TypePropertyDescript)=>TypedPropertyDescriptor|void;

方法装饰器顾名思义，用来装饰类的方法。它接收三个参数：

propertyKey:string|symbol-方法名

descriptor:TypePropertyDescript-属性描述符

废话不多说，直接上例子：

functionLogOutput(tarage:Function,key:string,descriptor:any){letoriginalMethod=descriptor.value;letnewMethod=function(...args:any[]):any{letresult:any=originalMethod.apply(this,args);if(!this.loggedOutput){this.loggedOutput=newArray();

}this.loggedOutput.push({

method:key,

parameters:args,

output:result,

timestamp:newDate()

});returnresult;

descriptor.value=newMethod;

}classCalculator{@LogOutputdouble(num:number):number{returnnum*2;

}letcalc=newCalculator();

calc.double(11);//consoleouput:[{method:"double",output:22,...}]console.log(calc.loggedOutput);

9.2.4参数装饰器

declaretypeParameterDecorator=(target:Object,propertyKey:string|symbol,

parameterIndex:number)=>void

参数装饰器顾名思义，是用来装饰函数参数，它接收三个参数：

parameterIndex:number-方法中参数的索引值

functionLog(target:Function,key:string,parameterIndex:number){letfunctionLogged=key||target.prototype.constructor.name;console.log(`Theparameterinposition${parameterIndex}at${functionLogged}has

beendecorated`);

}classGreeter{

greeting:string;constructor(@Logphrase:string){this.greeting=phrase;

}//consoleoutput:Theparameterinposition0//atGreeterhasbeendecorated

十、#XXX私有字段

在TypeScript3.8版本就开始支持ECMAScript私有字段，使用方式如下：

classPerson{

#name:string;constructor(name:string){this.#name=name;

greet(){console.log(`Hello,mynameis${this.#name}!`);

}letsemlinker=newPerson("Semlinker");

semlinker.#name;//~~~~~//Property'#name'isnotaccessibleoutsideclass'Person'//becauseithasaprivateidentifier.

私有字段以#字符开头，有时我们称之为私有名称；

每个私有字段名称都唯一地限定于其包含的类；

不能在私有字段上使用TypeScript可访问性修饰符（如public或private）；

私有字段不能在包含的类之外访问，甚至不能被检测到。

10.1私有字段与private的区别

说到这里使用#定义的私有字段与private修饰符定义字段有什么区别呢？现在我们先来看一个private的示例：

classPerson{constructor(privatename:string){}

}letperson=newPerson("Semlinker");console.log(person.name);

在上面代码中，我们创建了一个Person类，该类中使用private修饰符定义了一个私有属性name，接着使用该类创建一个person对象，然后通过person.name来访问person对象的私有属性，这时TypeScript编译器会提示以下异常：

Property'name'isprivateandonlyaccessiblewithinclass'Person'.(2341)

那如何解决这个异常呢？当然你可以使用类型断言把person转为any类型：

console.log((personasany).name);

通过这种方式虽然解决了TypeScript编译器的异常提示，但是在运行时我们还是可以访问到Person类内部的私有属性，为什么会这样呢？我们来看一下编译生成的ES5代码，也许你就知道答案了：

varPerson=/**@class*/(function(){functionPerson(name){this.name=name;

}returnPerson;

}());varperson=newPerson("Semlinker");console.log(person.name);

这时相信有些小伙伴会好奇，在TypeScript3.8以上版本通过#号定义的私有字段编译后会生成什么代码：

以上代码目标设置为ES2015，会编译生成以下代码：

"usestrict";var__classPrivateFieldSet=(this&&this.__classPrivateFieldSet)

||function(receiver,privateMap,value){if(!privateMap.has(receiver)){thrownewTypeError("attemptedtosetprivatefieldonnon-instance");

privateMap.set(receiver,value);returnvalue;

};var__classPrivateFieldGet=(this&&this.__classPrivateFieldGet)

||function(receiver,privateMap){if(!privateMap.has(receiver)){thrownewTypeError("attemptedtogetprivatefieldonnon-instance");

}returnprivateMap.get(receiver);

};var_name;classPerson{constructor(name){

_name.set(this,void0);

__classPrivateFieldSet(this,_name,name);

greet(){console.log(`Hello,mynameis${__classPrivateFieldGet(this,_name)}!`);

_name=newWeakMap();

通过观察上述代码，使用#号定义的ECMAScript私有字段，会通过WeakMap对象来存储，同时编译器会生成__classPrivateFieldSet和__classPrivateFieldGet这两个方法用于设置值和获取值。

如果你必须在同一个浏览器中从一个标签页发送消息到另一个标签页，你不必用艰难的方式。Localstoragebridge在这里让任务变得更简单。

基本使用：

//发送lsbridge.send(‘app.message.error’,{error:‘Outofmemory’});

//监听lsbridge.subscribe(‘app.message.error’,function(data){console.log(data);//{error:‘Outofmemory’}});

Basil.js统一了session、localStorage和cookie，为你提供了一种处理数据的直接方法。

Store.js像其他东西一样处理数据存储。但还有更多的功能，它的一个高级特性是让你更深入地访问浏览器支持。

store.set(‘book’,{title:‘JavaScript’});//Storeabookstore.get(‘book’);

//Getstoredbookstore.remove(‘book’);//Removestoredbookstore.clearAll();//Clearallkeys

它与localStorageAPI类似。事实上，它是localStorage的一个封装器，并使用HTML5模拟memcaches函数。在上面的文档中发现更多的功能。

Lockr建立在localStorageAPI之上。它提供了一些有用的方法来更轻松地处理本地数据。

是什么让你要使用此库而不是localStorageAPI？

好吧，localStorageAPI仅允许你存储字符串。如果要存储数字，则需要先将该数字转换为字符串。在Lockr中不会发生这种情况，因为Lockr允许你存储更多的数据类型甚至对象。

Barn在localStorage之上提供了一个类似Redis的API。如果持久性很重要，那么你将需要这个库来保持数据状态，以防发生错误。

letbarn=newBarn(localStorage);//原始类型barn.set(‘name’,‘Amy’);letname=barn.get(‘name’);

//Amy//Listbarn.lpush(‘names’,‘Amy’);

barn.lpush(‘names’,‘James’);letname1=barn.rpop(‘names’);//Amyletname2=barn.rpop(‘names’);

//James

这个简单而快速的库将通过IndexedDB或WebSQL使用异步存储来改善Web的脱机体验。它类似于localStorage，但具有回调功能。

crypt.io使用标准JavaScript加密库实现安全的浏览器存储。使用crypto.io时，有三个存储选项：sessionStorage，localStorage或cookie。

letstorage=crypto;letbook={title:‘JavaScript’,price:13};storage.set(‘book’,book,function(error,results){if(error){throwerror;}//Dosomething});storage.get(‘book’,function(error,results){if(error){throwerror;}//Dosomething});

在开始正文前，我们先把本文涉及到的一些内容提前定个基调。

Promise中只有涉及到状态变更后才需要被执行的回调才算是微任务，比如说then、catch、finally，其他所有的代码执行都是宏任务（同步执行）。

上图中蓝色为同步执行，黄色为异步执行（丢到微任务队列中）。

这个问题我们根据ecma规范来看：

了解完以上知识后，正片开始。

Promise.resolve().then(()=>{console.log("then1");Promise.resolve().then(()=>{console.log("then1-1");});}).then(()=>{console.log("then2");});以上代码大家应该都能得出正确的答案：then1→then1-1→then2。

虽然then是同步执行，并且状态也已经变更。但这并不代表每次遇到then时我们都需要把它的回调丢入微任务队列中，而是等待then的回调执行完毕后再根据情况执行对应操作。

基于此，我们可以得出第一个结论：链式调用中，只有前一个then的回调执行完毕后，跟着的then中的回调才会被加入至微任务队列。

大家都知道了Promiseresolve后，跟着的then中的回调会马上进入微任务队列。

那么以下代码你认为的输出会是什么？

letp=Promise.resolve();p.then(()=>{console.log("then1");Promise.resolve().then(()=>{console.log("then1-1");});}).then(()=>{console.log("then1-2");});p.then(()=>{console.log("then2");});按照一开始的认知我们不难得出then2会在then1-1后输出，但是实际情况却是相反的。

基于此我们得出第二个结论：每个链式调用的开端会首先依次进入微任务队列。

接下来我们换个写法：

letp=Promise.resolve().then(()=>{console.log("then1");Promise.resolve().then(()=>{console.log("then1-1");});}).then(()=>{console.log("then2");});p.then(()=>{console.log("then3");});上述代码其实有个陷阱，then每次都会返回一个新的Promise，此时的p已经不是Promise.resolve()生成的，而是最后一个then生成的，因此then3应该是在then2后打印出来的。

顺便我们也可以把之前得出的结论优化为：同一个Promise的每个链式调用的开端会首先依次进入微任务队列。

以下大家可以猜猜then1-2会在何时打印出来？

Promise.resolve().then(()=>{console.log("then1");Promise.resolve().then(()=>{console.log("then1-1");return1;}).then(()=>{console.log("then1-2");});}).then(()=>{console.log("then2");}).then(()=>{console.log("then3");}).then(()=>{console.log("then4");});这题肯定是简单的，记住第一个结论就能得出答案，以下是解析：

接下来我们把return1修改一下，结果可就大不相同啦：

Promise.resolve().then(()=>{console.log("then1");Promise.resolve().then(()=>{console.log("then1-1");returnPromise.resolve();}).then(()=>{console.log("then1-2");});}).then(()=>{console.log("then2");}).then(()=>{console.log("then3");}).then(()=>{console.log("then4");});当我们returnPromise.resolve()时，你猜猜then1-2会何时打印了？

答案是最后一个才被打印出来。

为什么在then中分别return不同的东西，微任务的执行顺序竟有如此大的变化？以下是笔者的解析。

PS：then返回一个新的Promise，并且会用这个Promise去resolve返回值，这个概念需要大家先了解一下。

if(xinstanceofMyPromise){if(x.currentState===PENDING){}else{x.then(resolve,reject);}return;}上述代码节选自手写Promise实现。

那么根据A+规范来说，如果我们在then中返回了Promise.resolve的话会多入队一次微任务，但是这个结论还是与实际不符的，因此我们还需要寻找其他权威的文档。

并且该Jobs还会调用一次then函数来resolvePromise，这也就又生成了一次微任务。

1.形体表现

轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上，即你要把这个图形的内容有明确的示意并画出来，而不是用抽象的图形做填充而已。

比如大众点评的快速入口图标，虽然看起来很复杂，但是那是配色上的复杂，而不是形体轮廓上的具象化。

并且，在描绘轮廓的时候，新手尽可能的采取正视图来进行绘制，而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面，这样难度会大幅度上升，比如下面这种情况。

2.光影表现

除了形体外，光影就是整个拟物的灵魂了。

当一个完整的图形完成填充色时，它是扁平图案，如果完成光影呈现的时候，它就是三维空间的立体图形，比如下面这个圆的案例：

在拟物的设计中，我们对光影的定义是至关重要的，所以首先就是针对该图形确定光源的方向，是上方、前方、左上还右上，这对后续的设计有一连串的影响。

如果对光影没有正确的解释，那么在制作细节的渐变角度、投影的使用上，就会产生错误的设计，造成光影视觉冲突和矛盾。

在创建了光源以后，物体受到光线的影响就会产生明暗面和投影，可以简单划分成4个部分，高光、亮部、暗部、投影。

这和我们学习的素描有一定的差异，美术中对光影的表现还会包含明暗交界、反光面，这对于轻拟物的来说负担太重，所以我们要去掉它们，接下来重点讲讲高光和暗部。

高光是物体作为受光物对光源的直接反映，比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现，再或者一拳超人中男主光头上长期存在的高光配饰（多数动画的光头角色都有）……

高光可以非常有效的增加画面的层次和对比性，让物体看上去更有冲击力和观赏性。

而暗部，则完全是为了正常表现物体结构和弧度增加的示意，因为不在受光面，所以颜色会变暗。在实际操作过程中，我们可以通过渐变的方式开控制明暗的表达，但尽量不要直接手动设置一个渐变色出来，而是为它叠加暗部或亮部的黑白透明度渐变。

了解这几个特性以后，下面，我们就通过一个实例来讲解一下轻拟物设计的过程吧。

作为轻拟物的演示，直接画个图标讲一遍怎么操作是没什么用的，我们要从实际场景出发，用它来解决一些真实的问题。比如看看下面的KFC官方APP首页：

总结它的问题，不难发现首页顶部业务功能太多了，顶部图标就包含30个（加滑动的），虽然每个模块图标单看都没有硬伤，但堆积到一起，就使得顶部缺乏足够的信息层级和对比性。

我们要做的，就是通过轻拟物的方式，调整快速入口最大的三个图标，凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始，讲解一下如何完成轻拟物化设计的升级。

第一步：确认轮廓造型

第一个操作，即确定图标本身的轮廓。根据原有图标的样式我做了一些改动，包括加粗车头，减少高度，增加车灯等。并对每一个模块进行纯色的填充，定义它们的色彩和做出区分。

形体的重要性在于要对图形本身有比较合理的呈现，不要让比例失调和图不达意。

第二步：完善图形细节

这一步，就要在原有基础上，进行下一步的深入。包括对一些细节交代得更清楚一点，增加一些有趣的小元素等等，完善它的具体样式。

第三步：增加基础的暗部表现

在这里，我们就要开始为图标增加高光了，高光从右上角打下来，那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现，让整体的立体感稍强。

这一步在软件中主要使用蒙版功能，通过蒙版在背景上方创建一个图层，然后添加深色的透明度渐变，就可以表现出对暗部和投影的效果。

第四步：增加高光效果

接着，就是最后一步，将高光添加到画面中来，将整个图标的质感进行拉升。

通过上面的演示，我们可以将整个拟物设计流程精简成：

然后，通过这样的步骤，再来完成后续的两个图形，拆解完的效果如下。

然后，再用这三个修改后图标套用进原来的页面，并做出对应的修改，再来看看前后对比：

通过这个对比，我们就可以看出在这个复杂的首页头部中，轻拟物风格可以从一众平面中被凸显出来，且不会显得太突兀和复杂。

而这就是轻拟物在项目设计中的实际作用，当画面元素已经开始超负荷，且容易导致同质化的审美疲劳和主次不清时，就是轻拟物登场的时候了。

最后的总结，学习轻拟物就是增加我们完成界面视觉输出的可能性，为视觉创意增加一些储备弹药，以应对越来越复杂的互联网产品和职业要求。