阅读 661

亲手码出TypeScript最前沿的教程(进阶篇)

编者荐语: 本文为是TypeScript的进阶篇,在上一篇TypeScript的基础篇中,我们讲到了什么是TypeScript,他们的优缺点对比和如何安装,以及TS基础语法中的原始数据类型任意值联合类型接口数组类型函数类型

那么在进阶篇中,我们将继续带领大家学习TS中的元组枚举类与接口泛型类型别名类型断言,看看它们是如何让TypeScript魅力焕发的。

TypeScript 除了实现了所有 ES6 中的类的功能以外,还添加了一些新的用法。

类的概念

  • 类(Class):定义了一件事物的抽象特点,包含它的属性和方法
  • 对象(Object):类的实例,通过 new 生成
  • 面向对象(OOP)的三大特性:封装、继承、多态
  • 封装(Encapsulation):将对数据的操作细节隐藏起来,只暴露对外的接口。外界调用端不需要(也不可能)知道细节,就能通过对外提供的接口来访问该对象,同时也保证了外界无法任意更改对象内部的数据
  • 继承(Inheritance):子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性
  • 多态(Polymorphism):由继承而产生了相关的不同的类,对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal,但是分别实现了自己的 eat 方法。此时针对某一个实例,我们无需了解它是 Cat 还是 Dog,就可以直接调用 eat 方法,程序会自动判断出来应该如何执行 eat
  • 存取器(getter & setter):用以改变属性的读取和赋值行为
  • 修饰符(Modifiers):修饰符是一些关键字,用于限定成员或类型的性质。比如 public 表示公有属性或方法
  • 抽象类(Abstract Class):抽象类是供其他类继承的基类,抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
  • 接口(Interfaces):不同类之间公有的属性或方法,可以抽象成一个接口。接口可以被类实现(implements)。一个类只能继承自另一个类,但是可以实现多个接口

ES6中类的用法

下面我们先回顾一下 ES6 中类的用法

属性和方法

使用 class 定义类,使用 constructor 定义构造函数。 通过 new 生成新实例的时候,会自动调用构造函数。

class Animal {
  public name;
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    return `My name is ${this.name}`;
  }
}

let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack
复制代码

类的继承

使用 extends 关键字实现继承,子类中使用 super 关键字来调用父类的构造函数和方法。

class Cat extends Animal {
  constructor(name) {
    super(name); // 调用父类的 constructor(name)
    console.log(this.name);
  }
  sayHi() {
    return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
  }
}

let c = new Cat('Tom'); // Tom
console.log(c.sayHi()); // Meow, My name is Tom
复制代码

存取器

使用 getter 和 setter 可以改变属性的赋值和读取行为:

class Animal {
  constructor(name) {
    this.name = name;
  }
  get name() {
    return 'Jack';
  }
  set name(value) {
    console.log('setter: ' + value);
  }
}

let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack
复制代码

静态方法

使用 static 修饰符修饰的方法称为静态方法,它们不需要实例化,而是直接通过来调用:

class Animal {
  static isAnimal(a) {
    return a instanceof Animal;
  }
}

let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function
复制代码

ES7中类的用法

ES7 中有一些关于类的提案,TypeScript 也实现了它们,这里做一个简单的介绍。

实例属性

ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义,ES7 提案中可以直接在类里面定义:

class Animal {
  name = 'Jack';

  constructor() {
    // ...
  }
}

let a = new Animal();
console.log(a.name); // Jack
复制代码

静态属性

ES7 提案中,可以使用 static 定义一个静态属性:

class Animal {
  static num = 42;

  constructor() {
    // ...
  }
}

console.log(Animal.num); // 42
复制代码

TypeScript 中类的用法

public private 和 protected

TypeScript 可以使用三种访问修饰符,分别是 public、private 和 protected

  • public 修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是 public 的
  • private 修饰的属性或方法是私有的,不能在声明它的类的外部访问
  • protected 修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许被访问的

publicd定义属性:

class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom
复制代码

name被设置为了public,所以直接访问实例的name属性是允许的。

private定义属性:

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';

// Property 'name' is private and only accessible within class 'Animal'.
复制代码

name被设置为了private,所以只能在类里访问。

需要注意的是,TypeScript 编译之后的代码中,并没有限制 private 属性在外部的可访问性。

上面的例子编译后的代码是:

var Animal = (function () {
  function Animal(name) {
    this.name = name;
  }
  return Animal;
})();
var a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name);// Tom
复制代码

使用 private 修饰的属性或方法,在子类中也是不允许访问的:

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}

// Property 'name' is private and only accessible within class 'Animal'.
复制代码

protected定义属性,则允许在子类中访问:

class Animal {
  protected name;
  public constructor(name) {
    this.name = name;
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}
复制代码

区别①:当构造函数修饰为 private 时,该类不允许被继承或者实例化:

class Animal {
  public name;
  private constructor(name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
  }
}

let a = new Animal('Jack');

// Cannot extend a class 'Animal'. Class constructor is marked as private.
// Constructor of class 'Animal' is private and only accessible within the class declaration.
复制代码

区别②:当构造函数修饰为 protected 时,该类只允许被继承:

class Animal {
  public name;
  protected constructor(name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
  }
}

let a = new Animal('Jack');
// Constructor of class 'Animal' is protected and only accessible within the class declaration.
复制代码

参数属性

修饰符readonly还可以使用在构造函数参数中,等同于类中定义该属性同时给该属性赋值,使代码更简洁。

class Animal {
  // public name: string
  public constructor(public name) {
    // this.name = name;
  }
}

let a = new Animal('aaa')
console.log(a)  // Animal { name: 'aaa' }
复制代码

readonly

只读属性关键字,只允许出现在属性声明索引签名或`构造函数中。

class Animal {
  readonly name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
复制代码

注意如果 readonly 和其他访问修饰符同时存在的话,需要写在其后面。

class Animal {
  // public readonly name;
  public constructor(public readonly name) {
    // this.name = name;
  }
}
复制代码

类的类型

给类加上 TypeScript 的类型很简单,与接口类似:

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi():string {
    return `My name is ${this.name}`;
  }
}

let a:Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack
复制代码

类与接口

之前学习过,接口(Interfaces)可以用于对「对象的形状(Shape)」进行描述。

这一章主要介绍接口的另一个用途,对类的一部分行为进行抽象。

类实现接口

实现是面向对象中的一个重要概念。一般来讲,一个类只能继承自另一个类,有时候不同类之间可以有一些共有的特性,这时候就可以把特性提取成接口(interfaces),用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。

举例来说,门是一个类,防盗门是门的子类。如果防盗门有一个报警器的功能,我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类,车,也有报警器的功能,就可以考虑把报警器提取出来,作为一个接口,防盗门和车都去实现它:

// 报警器接口
interface Alarm{
  alert():void;
}

class Door {

}

// 防盗门 继承 门 且 有一个 报警器的接口
class SecurityDoor extends Door implements Alarm {
  alert() {
    console.log('SecurityDoor alert');
  }
}

// 车类 有一个 报警器的接口
class Car implements Alarm {
  alert() {
    console.log('Car alert');
  }
}
复制代码

一个类可以实现多个接口:

interface Alarm {
  alert(): void;
}

interface Light {
  lightOn(): void;
  lightOff(): void;
}

class Car implements Alarm, Light {
  alert() {
    console.log('Car alert');
  }
  lightOn() {
    console.log('Car light on');
  }
  lightOff() {
    console.log('Car light off');
  }
}
复制代码

上例中,Car 实现了 AlarmLight 接口,既能报警,也能开关车灯。

接口继承接口

接口与接口之间可以是继承关系:

interface Alarm {
  alert(): void
}

interface LightableAlarm extends Alarm {
  lightOn(): void;
  lightOff(): void;
}
复制代码

这很好理解,LightableAlarm继承了Alarm类,除了拥有alert方法之外,还拥有两个新方法lightOnlightOff

枚举

枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。

枚举——简单的例子

枚举使用 enum 关键字来定义:

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
复制代码

枚举成员会被赋值为从 0 开始递增的数字,同时也会对枚举值到枚举名进行反向映射:

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true
复制代码

事实上,上面的例子会被编译为:

var Days;
(function (Days) {
  Days[Days["Sun"] = 0] = "Sun";
  Days[Days["Mon"] = 1] = "Mon";
  Days[Days["Tue"] = 2] = "Tue";
  Days[Days["Wed"] = 3] = "Wed";
  Days[Days["Thu"] = 4] = "Thu";
  Days[Days["Fri"] = 5] = "Fri";
  Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));
复制代码

注意,JavaScript中,赋值运算符返回的是被赋予的值,所以上面例子中的 Days["Sun"] = 0 返回 0。

手动赋值

我们也可以给枚举项手动赋值:

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
复制代码

上面的例子中,未手动赋值的枚举项会接着上一个枚举项递增。
如果未手动赋值的枚举项与手动赋值的重复了,TypeScript 是不会察觉到这一点的:

enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true
复制代码

上面的例子中,递增到 3 的时候与前面的 Sun 的取值重复了,但是 TypeScript 并没有报错,导致 Days[3] 的值先是 "Sun",而后又被 "Wed" 覆盖了。编译的结果是:

var Days;
(function (Days) {
  Days[Days["Sun"] = 3] = "Sun";
  Days[Days["Mon"] = 1] = "Mon";
  Days[Days["Tue"] = 2] = "Tue";
  Days[Days["Wed"] = 3] = "Wed";
  Days[Days["Thu"] = 4] = "Thu";
  Days[Days["Fri"] = 5] = "Fri";
  Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));
复制代码

所以使用的时候需要注意,最好不要出现这种覆盖的情况。
手动赋值的枚举项可以不是数字,此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的):

var Days;
(function (Days) {
  Days[Days["Sun"] = 7] = "Sun";
  Days[Days["Mon"] = 8] = "Mon";
  Days[Days["Tue"] = 9] = "Tue";
  Days[Days["Wed"] = 10] = "Wed";
  Days[Days["Thu"] = 11] = "Thu";
  Days[Days["Fri"] = 12] = "Fri";
  Days[Days["Sat"] = "S"] = "Sat";
})(Days || (Days = {}));
复制代码

当然,手动赋值的枚举项也可以为小数或负数,此时后续未手动赋值的项的递增步长仍为 1:

enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1.5); // true
console.log(Days["Tue"] === 2.5); // true
console.log(Days["Sat"] === 6.5); // true
复制代码

常数项和计算所得项

枚举项有两种类型:常数项计算所得项
前面我们所举的例子都是常数项,一个典型的计算所得项的例子:

枚举类型——计算所得想

enum Color {Red, Green, Blue = "blue".length};
复制代码

上面的例子中,"blue".length 就是一个计算所得项。
上面的例子不会报错,但是如果紧接在计算所得项后面的是未手动赋值的项,那么它就会因为无法获得初始值而报错:

enum Color {Red = "red".length, Green, Blue};

// Enum member must have initializer.
// Enum member must have initializer.
复制代码

常数枚举

常数枚举是使用 const enum 定义的枚举类型:

const enum Directions {
  Up,
  Down,
  Left,
  Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
复制代码

常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算成员

普通枚举编译后的情况,我们在上文说了,上例的编译结果是:

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];
复制代码

假如包含了计算成员,则会在编译阶段报错:

const enum Color {Red, Green, Blue = "blue".length};

// In 'const' enum declarations member initializer must be constant expression.
复制代码

外部枚举

外部枚举是使用 declare enum 定义的枚举类型:

declare enum Directions {
  Up,
  Down,
  Left,
  Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
复制代码

declare 定义的类型只会用于编译时的检查,编译结果中会被删除。 上例的编译结果是:

var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
复制代码

外部枚举与声明语句一样,常出现在声明文件中。
同时使用 declareconst 也是可以的:

declare const enum Directions {
  Up,
  Down,
  Left,
  Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
复制代码

编译结果:

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];
复制代码

元组

数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。

元组——简单的例子

定义一对值分别为 stringnumber 的元组:

let tom: [string, number] = ['Tom', 25];
复制代码

当赋值或访问一个已知索引的元素时,会得到正确的类型:

let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;

console.log(tom[1]); // 25
复制代码

也可以只赋值其中一项:

let tom: [string, number];
tom[0] = 'Tom';
复制代码

但是当直接对元组类型的变量进行初始化或者赋值的时候,需要提供所有元组类型中指定的项。

let tom: [string, number];
tom = ['Tom', 25];
复制代码

当只赋值某个元组变量的其中一个索引处的值的话,会报错,应该赋全。

let tom: [string, number];
tom = ['Tom'];
复制代码

// Property '1' is missing in type '[string]' but required in type '[string, number]'.


## 越界的元素
当添加越界的元素时,它的类型会<b>被限制为元组中每个类型的联合类型</b>:
```ts
let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);

// Argument of type 'true' is not assignable to parameter of type 'string | number'.
复制代码

泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性

泛型——简单的例子

首先,我们来实现一个函数 createArray,它可以创建一个指定长度的数组,同时将每一项都填充一个默认值:

function createArray(length: number, value: any): Array<any> {
  let result = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']
复制代码

上例中,我们使用了之前提到过的数组泛型来定义返回值的类型
这段代码编译不会报错,但是一个显而易见的缺陷是,它并没有准确的定义返回值的类型:

Array<any> 允许数组的每一项都为任意类型。但是我们预期的是,数组中每一项都应该是输入的 value 的类型。
这时候,泛型就派上用场了

function createArray<T>(length: number, value: T): Array<T> {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']
复制代码

上例中,我们在函数名后添加了 <T>,其中 T 用来指代任意输入的类型,在后面的输入 value: T 和输出 Array<T> 中即可使用了。

接着在调用的时候,可以指定它具体的类型为 number

function createArray<T>(length: number, value: T): Array<T> {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

createArray(3, 5); // [ 5, 5, 5 ]
复制代码

多个类型参数

定义泛型的时候,可以一次定义多个类型参数:

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]
复制代码

上例中,我们定义了一个 swap 函数,用来交换输入的元组。

泛型约束

在函数内部使用泛型变量的时候,由于事先不知道它是哪种类型,所以不能随意的操作它的属性或方法:

function loggingIdentity<T>(arg: T): T {
  console.log(arg.length);
  return arg;
}

// Property 'length' does not exist on type 'T'.
复制代码

上例中,泛型 T 不一定包含属性 length,所以编译的时候报错了。
这时,我们可以对泛型进行约束,只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束:

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}
复制代码

上例中,我们使用了 extends 约束了泛型 T 必须符合接口 Lengthwise 的形状,也就是必须包含 length 属性。

此时如果调用 loggingIdentity 的时候,传入的 arg 不包含 length,那么在编译阶段就会报错了:

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity(7);

// Argument of type '7' is not assignable to parameter of type 'Lengthwise'.
复制代码

约束泛型关键在于 在泛型中使用extends,就可以让传入值满足特定的接口条件

多个类型参数之间也可以互相约束:

function copyFields<T extends U, U>(target: T, source: U): T {
  for (let id in source) {
    target[id] = (<T>source)[id];
  }
  return target;
}

let x = { a: 1, b: 2, c: 3, d: 4 };

copyFields(x, { b: 10, d: 20 });
复制代码

上例中,我们使用了两个类型参数,其中要求 T 继承 U,这样就保证了 U 上不会出现 T 中不存在的字段。

下面的两种泛型定义(泛型类泛型接口)的方法有点难理解,好好揣摩一下。

泛型类

在这个例子中,新建一个队列类,在队列上定义两个方法,一个是进入队列,一个是离开队列。(先进先出的数据结构)

class Queue {
  private data = [];
  push(item) {
    return this.data.push(item)
  }
  pop() {
    return this.data.shift()
  }
}

const queue = new Queue();
queue.push(1);
queue.push('push');
console.log(queue.pop().toFixed());

console.log(queue.pop().toFixed()); 
// Cannot read property 'toFixed' of undefined
复制代码

在上面的例子中,因为toFixednumber才有的方法,所以在TypeScript编译阶段会报错,提示toFixed不是一个函数。

在实际开发中,假如传入到队里的值都是Number,我们可以对传入的参数pop的返回值,进行限制number类型。

class Queue {
  private data = [];
  push(item: number) {
    return this.data.push(item)
  }
  pop(): number {
    return this.data.shift()
  }
}

const queue = new Queue();
queue.push(1);
queue.push('push');
console.log(queue.pop().toFixed());

console.log(queue.pop().toFixed()); 
复制代码

那紧接着传入队列的又有可能是String类型的,又该怎么办呢,我们真正想实现的效果是被推出的类型,均与被推入的类型保持一致,这时候,泛型类就派上用场了:

class Queue<T> {
  private data = [];
  push(item: T) {
    return this.data.push(item)
  }
  pop(): T {
    return this.data.shift()
  }
}

// <number>定义传入队列的是什么类型
const queue = new Queue<number>();
queue.push(1);
console.log(queue.pop().toFixed()); // 1

const queue2 = new Queue<string>();
queue2.push('STRING');
console.log(queue2.pop().toLowerCase()); // string
复制代码

泛型接口

我们来用泛型定义接口:

interface KeyPair<T, U> {
  key: T;
  value: U;
}

let kp1: KeyPair<number, string> = { key: 123, value: "str" };
let kp2: KeyPair<string, number> = { key: "str", value: 123 };
复制代码

在使用泛型的接口定义函数之前,我们通常用接口来规定函数对象

interface IPlus {
  (a: number, b: number) : number;
}

function plus(a: number, b: number): number {
  return a + b;
}

const a: IPlus = plus;
// const a: (a: number, b: number) => number
复制代码

当然也可以使用含有泛型的接口来定义函数的形状,通过传入不同的泛型值去适配不同的类型:

interface IPlus<T> {
  (a: T, b: T) : T;
}

function plus(a: number, b: number): number {
  return a + b;
}
function connect(a: string, b: string): string {
  return a + b;
}

const a: IPlus<number> = plus;
const b: IPlus<string> = plus;
复制代码

泛型数组

let arr: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2, 3]
复制代码

泛型类和泛型接口的总结

以上 我们了解了泛型类interface,它们可以创建很灵活的类,在实例化类的时候可以动态地传入我们想要的参数,也可以创建不同的interface,随着传入的参数不同,可以适应多变的Object(Array),也可以适应函数的参数结果统一化。

类型别名

类型别名用来给一个类型起个新名字。

type PlusType = (x: number, y: number) => number

function sum(x: number, y: number): number {
  return x + y;
}

const sum2: PlusType = sum;
复制代码

配合联合类型的例子

在这个例子中,我们定义一个函数,这个函数有1个参数n,参数n允许有两种类型分别是string函数的返回结果
n的另一个类型如果是函数的话,就要求是函数的返回结果。

type NameResolver = () => string;
type NameOrResolver = string | NameResolver;

function getName(n: NameOrResolver): string {
  if (typeof n === 'string') {
    return n
  } 
  return n();
}
复制代码

类型别名常用于联合类型。

类型断言

告诉我们开发人员应该比编译器,更能准确判断出类型,不应该再编译出现错误。

function getLength(input: string | number) : number {
  input.length  // 报错
}
复制代码

此时编译器就会报错,因为当函数的参数是联合类型的时候,只能返回他们共有的属性,显然length不是stringnumber的共有属性,所以报错。
此时类型断言登场了,使用as关键字:

function getLength(input: string | number) : number {
  // 先假设 断言成 String类型
  const str = input as String;
  if (str.length) {
    return str.length;
  } else {
    const number = input as Number;
    return number.toString().length;
  }
}
复制代码

当然还有一种简单的写法:

function getLength(input: string | number) : number {
  // 先假设 断言成 String类型
  if ((<string>input).length) {
    return (<string>input).length;
  } else {
    return input.toString().length;
  }
}
复制代码

注意:应该避免的情况,类型断言时,只能判断联合类型中共有的类型不能出现联合类型包含之外的类型,否则会报错:

function getLength(input: string | number) : boolean {
  // 不能断言成 boolean类型
  return <boolean>input; 
  // Conversion of type 'string | number' to type 'boolean' may be a mistake
}
复制代码

两种联合类型不能被断言成另外的类型。

看完三件事❤

如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:

  1. 点赞,转发让更多的人也能看到介绍内容(收藏不点赞,皆是耍流氓!!)
  2. 关注公众号 “前端时光屋”,不定期分享原创知识。
  3. 同时可以期待后续文章ing

也可以来我的个人博客:

前端时光屋:www.javascriptlab.top/