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

一、! 非空断言操作符

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

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

1.1 忽略 undefined 和 null 类型

function myFunc(maybeString: string | undefined | null) {   // Type 'string | null | undefined' is not assignable to type 'string'.   // Type 'undefined' is not assignable to type 'string'.    const onlyString: string = maybeString; // Error   const ignoreUndefinedAndNull: string = maybeString!; // Ok }

type NumGenerator = () => number;  function myFunc(numGenerator: NumGenerator | undefined) {   // Object is possibly 'undefined'.(2532)   // Cannot invoke an object which is possibly 'undefined'.(2722)   const num1 = numGenerator(); // Error   const num2 = numGenerator!(); //OK }

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

"use strict"; const a = undefined; const b = a; console.log(b);

obj?.prop obj?.[expr] arr?.[index] func?.(args)

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

var val = a === null || a === void 0 ? void 0 : a.b;

if(a && a.b) { }   if(a?.b){ } /** * if(a?.b){ } 编译后的ES5代码 *  * if( *  a === null || a === void 0  *  ? void 0 : a.b) { * } */

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

2.1 可选元素访问

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

function tryGetArrayElement<T>(arr?: T[], index: number = 0) {   return arr?.[index]; }

"use strict"; function tryGetArrayElement(arr, index) {     if (index === void 0) { index = 0; }     return arr === null || arr === void 0 ? void 0 : arr[index]; }

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

2.2 可选链与函数调用

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

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

let result = obj.customMethod?.();

var result = (_a = obj.customMethod) === null   || _a === void 0 ? void 0 : _a.call(obj);

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

• 如果存在一个属性名且该属性名对应的值不是函数类型，使用 ?. 仍然会产生一个 TypeError 异常。
• 可选链的运算行为被局限在属性的访问、调用以及元素的访问 —— 它不会沿伸到后续的表达式中，也就是说可选调用不会阻止 a?.b / someMethod() 表达式中的除法运算或 someMethod 的方法调用。

三、?? 空值合并运算符

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

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

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

const foo = null ?? 'default string'; console.log(foo); // 输出："default string"  const baz = 0 ?? 42; console.log(baz); // 输出：0

"use strict"; var _a, _b; var foo = (_a = null) !== null && _a !== void 0 ? _a : 'default string'; console.log(foo); // 输出："default string"  var baz = (_b = 0) !== null && _b !== void 0 ? _b : 42; console.log(baz); // 输出：0

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

3.1 短路

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

function A() { console.log('A was called'); return undefined;} function B() { console.log('B was called'); return false;} function C() { console.log('C was called'); return "foo";}  console.log(A() ?? C()); console.log(B() ?? C());  // 上述代码运行后，控制台会输出以下结果： A was called  C was called  foo  B was called  false 

// '||' and '??' operations cannot be mixed without parentheses.(5076) null || undefined ?? "foo"; // raises a SyntaxError  // '&&' and '??' operations cannot be mixed without parentheses.(5076) true && undefined ?? "foo"; // raises a SyntaxError  // 但当使用括号来显式表明优先级时是可行的，比如： (null || undefined ) ?? "foo"; // 返回 "foo"

interface Customer {   name: string;   city?: string; }  let customer: Customer = {   name: "Semlinker" };  let customerCity = customer?.city ?? "Unknown city"; console.log(customerCity); // 输出：Unknown city

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

四、?: 可选属性

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

在 TypeScript 中使用 interface 关键字就可以声明一个接口：

interface Person {   name: string;   age: number; }  let semlinker: Person = {   name: "semlinker",   age: 33, };

// Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.(2741) let lolo: Person  = { // Error   name: "lolo"   }

interface Person {   name: string;   age?: number; }  let lolo: Person  = {   name: "lolo"   }

interface PullDownRefreshConfig {   threshold: number;   stop: number; }  /**  * type PullDownRefreshOptions = {  *   threshold?: number | undefined;  *   stop?: number | undefined;  * }  */  type PullDownRefreshOptions = Partial<PullDownRefreshConfig>

/**  * Make all properties in T optional  */ type Partial<T> = {   [P in keyof T]?: T[P]; };

interface PullDownRefreshConfig {   threshold: number;   stop: number; }  type PullDownRefreshOptions = Partial<PullDownRefreshConfig>  /**  * type PullDownRefresh = {  *   threshold: number;  *   stop: number;  * }  */ type PullDownRefresh = Required<Partial<PullDownRefreshConfig>>

/**  * Make all properties in T required  */ type Required<T> = {   [P in keyof T]-?: T[P]; };

type PartialPointX = { x: number; }; type Point = PartialPointX & { y: number; };  let point: Point = {   x: 1,   y: 1 }

interface X {   c: string;   d: string; }  interface Y {   c: number;   e: string }  type XY = X & Y; type YX = Y & X;  let p: XY; let q: YX;

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

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

interface D { d: boolean; } interface E { e: string; } interface F { f: number; }  interface A { x: D; } interface B { x: E; } interface C { x: F; }  type ABC = A & B & C;  let abc: ABC = {   x: {     d: true,     e: 'semlinker',     f: 666   } };  console.log('abc:', abc);

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

sayHello("semlinker"); sayHello(undefined);

let num: 1 | 2 = 1; type EventNames = 'click' | 'scroll' | 'mousemove';

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

6.1 类型保护

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

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

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

6.1.1 in 关键字

interface Admin {   name: string;   privileges: string[]; }  interface Employee {   name: string;   startDate: Date; }  type UnknownEmployee = Employee | Admin;  function printEmployeeInformation(emp: UnknownEmployee) {   console.log("Name: " + emp.name);   if ("privileges" in emp) {     console.log("Privileges: " + emp.privileges);   }   if ("startDate" in emp) {     console.log("Start Date: " + emp.startDate);   } }

function padLeft(value: string, padding: string | number) {   if (typeof padding === "number") {       return Array(padding + 1).join(" ") + value;   }   if (typeof padding === "string") {       return padding + value;   }   throw new Error(`Expected string or number, got '${padding}'.`); }

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

6.1.3 instanceof 关键字

interface Padder {   getPaddingString(): string; }  class SpaceRepeatingPadder implements Padder {   constructor(private numSpaces: number) {}   getPaddingString() {     return Array(this.numSpaces + 1).join(" ");   } }  class StringPadder implements Padder {   constructor(private value: string) {}   getPaddingString() {     return this.value;   } }  let padder: Padder = new SpaceRepeatingPadder(6);  if (padder instanceof SpaceRepeatingPadder) {   // padder的类型收窄为 'SpaceRepeatingPadder' }

function isNumber(x: any): x is number {   return typeof x === "number"; }  function isString(x: any): x is string {   return typeof x === "string"; }

const inhabitantsOfMunich = 1_464_301; const distanceEarthSunInKm = 149_600_000; const fileSystemPermission = 0b111_111_000; const bytes = 0b1111_10101011_11110000_00001101;

// Numeric separators are not allowed here.(6188) 3_.141592 // Error 3._141592 // Error  // Numeric separators are not allowed here.(6188) 1_e10 // Error 1e_10 // Error  // Cannot find name '_126301'.(2304) _126301  // Error // Numeric separators are not allowed here.(6188) 126301_ // Error  // Cannot find name 'b111111000'.(2304) // An identifier or keyword cannot immediately follow a numeric literal.(1351) 0_b111111000 // Error  // Numeric separators are not allowed here.(6188) 0b_111111000 // Error  // 当然你也不能连续使用多个 _ 分隔符，比如： // Multiple consecutive numeric separators are not permitted.(6189) 123__456 // Error

Number('123_456') NaN parseInt('123_456') 123 parseFloat('123_456') 123

const RE_NON_DIGIT = /[^0-9]/gu;  function removeNonDigits(str) {   str = str.replace(RE_NON_DIGIT, '');   return Number(str); }

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

八、 语法

8.1 TypeScript 断言

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

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

类型断言有两种形式：

8.1.1 “尖括号” 语法

let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length;

let someValue: any = "this is a string"; let strLength: number = (someValue as string).length;

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

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

• K（Key）：表示对象中的键类型；
• V（Value）：表示对象中的值类型；
• E（Element）：表示元素类型。

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

function identity <T, U>(value: T, message: U) : T {   console.log(message);   return value; }  console.log(identity<Number, string>(68, "Semlinker"));

function identity <T, U>(value: T, message: U) : T {   console.log(message);   return value; }  console.log(identity(68, "Semlinker"));

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;     return c > 3 && r && Object.defineProperty(target, key, r), r; };  var Device = /** @class */ (function (_super) {     __extends(Device, _super);     function Device() {         return _super !== null && _super.apply(this, arguments) || this;     }     Device = __decorate([         Plugin({             pluginName: 'Device',             plugin: 'cordova-plugin-device',             pluginRef: 'device',             repo: 'https://github.com/apache/cordova-plugin-device',             platforms: ['Android', 'Browser', 'iOS', 'macOS', 'Windows'],         }),         Injectable()     ], Device);     return Device; }(IonicNativePlugin));

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

9.2 装饰器的分类

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

9.2.1 类装饰器

类装饰器声明：

declare type ClassDecorator = <TFunction extends Function>(   target: TFunction ) => TFunction | void;

function Greeter(target: Function): void {   target.prototype.greet = function (): void {     console.log("Hello Semlinker!");   }; }  @Greeter class Greeting {   constructor() {     // 内部实现   } }  let myGreeting = new Greeting(); myGreeting.greet(); // console output: 'Hello Semlinker!';

declare type PropertyDecorator = (target:Object, propertyKey: string | symbol ) => void;

function logProperty(target: any, key: string) {   delete target[key];    const backingField = "_" + key;    Object.defineProperty(target, backingField, {     writable: true,     enumerable: true,     configurable: true   });    // property getter   const getter = function (this: any) {     const currVal = this[backingField];     console.log(`Get: ${key} => ${currVal}`);     return currVal;   };    // property setter   const setter = function (this: any, newVal: any) {     console.log(`Set: ${key} => ${newVal}`);     this[backingField] = newVal;   };    // Create new property with getter and setter   Object.defineProperty(target, key, {     get: getter,     set: setter,     enumerable: true,     configurable: true   }); }  class Person {    @logProperty   public name: string;    constructor(name : string) {      this.name = name;   } }  const p1 = new Person("semlinker"); p1.name = "kakuqo";

Set: name => semlinker Set: name => kakuqo

declare type MethodDecorator = <T>(target:Object, propertyKey: string | symbol,             descriptor: TypePropertyDescript<T>) => TypedPropertyDescriptor<T> | void;

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

• target: Object - 被装饰的类
• propertyKey: string | symbol - 方法名
• descriptor: TypePropertyDescript - 属性描述符

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

function LogOutput(tarage: Function, key: string, descriptor: any) {   let originalMethod = descriptor.value;   let newMethod = function(...args: any[]): any {     let result: any = originalMethod.apply(this, args);     if(!this.loggedOutput) {       this.loggedOutput = new Array<any>();     }     this.loggedOutput.push({       method: key,       parameters: args,       output: result,       timestamp: new Date()     });     return result;   };   descriptor.value = newMethod; }  class Calculator {   @LogOutput   double (num: number): number {     return num * 2;   } }  let calc = new Calculator(); calc.double(11); // console ouput: [{method: "double", output: 22, ...}] console.log(calc.loggedOutput); 

declare type ParameterDecorator = (target: Object, propertyKey: string | symbol,    parameterIndex: number ) => void

function Log(target: Function, key: string, parameterIndex: number) {   let functionLogged = key || target.prototype.constructor.name;   console.log(`The parameter in position ${parameterIndex} at ${functionLogged} has     been decorated`); }  class Greeter {   greeting: string;   constructor(@Log phrase: string) {     this.greeting = phrase;    } }  // console output: The parameter in position 0  // at Greeter has been decorated

class Person {   #name: string;    constructor(name: string) {     this.#name = name;   }    greet() {     console.log(`Hello, my name is ${this.#name}!`);   } }  let semlinker = new Person("Semlinker");  semlinker.#name; //     ~~~~~ // Property '#name' is not accessible outside class 'Person' // because it has a private identifier.

class Person {   constructor(private name: string){} }  let person = new Person("Semlinker"); console.log(person.name);

Property 'name' is private and only accessible within class 'Person'.(2341)

console.log((person as any).name);

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

class Person {   #name: string;    constructor(name: string) {     this.#name = name;   }    greet() {     console.log(`Hello, my name is ${this.#name}!`);   } }

"use strict"; var __classPrivateFieldSet = (this && this.__classPrivateFieldSet)    || function (receiver, privateMap, value) {     if (!privateMap.has(receiver)) {       throw new TypeError("attempted to set private field on non-instance");     }     privateMap.set(receiver, value);     return value; };  var __classPrivateFieldGet = (this && this.__classPrivateFieldGet)    || function (receiver, privateMap) {     if (!privateMap.has(receiver)) {       throw new TypeError("attempted to get private field on non-instance");     }     return privateMap.get(receiver); };  var _name; class Person {     constructor(name) {       _name.set(this, void 0);       __classPrivateFieldSet(this, _name, name);     }     greet() {       console.log(`Hello, my name is ${__classPrivateFieldGet(this, _name)}!`);     } } _name = new WeakMap();