TS基础大全

无名小僧
207 阅读12分钟

数据类型

image.png

原始数据类型包括：boolean、number、string、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt。

any 和 unknown 类型

两者区别：

  1. any 既是 top type（任何类型都是他的子类型）又是 bottom type（他是任何类型的子类型)，简单说就是任何类型都可以赋值给 any 类型的变量，也可以把 any 类型的值赋值给任意类型（never 除外）的变量； unknown 是个 top type（任何类型都是它的子类型），可以把任何类型赋值给 unknown，但 unknown 只能赋值给 unknown 和 any 类型。

  2. unknown 和 any 的主要区别是 unknown 类型会更加严格，在对 unknown 类型的值执行大多数操作之前，我们必须进行某种形式的检查，而在对 any 类型的值执行操作之前，我们不必进行任何检查。

枚举

枚举（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 = {}));

常数枚举

常数枚举是使用 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 */];

接口

TypeScript 中的接口 interface 是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

简单的例子

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

定义的变量比接口多或少一些属性是不允许的，赋值的时候，变量的形状必须和接口的形状保持一致。

可选属性

有时我们希望不要完全匹配一个形状，那么可以用可选属性：

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

可选属性的含义是该属性可以不存在。但这时仍然不允许添加未定义的属性：

interface Person {
  name: string;
  age?: number;
}

let tom: Person = {
  name: 'Tom',
  age: 25,
  gender: 'male' // ！！！报错
};

image.png

任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

interface Person {
    name: string;
    age?: number;
    [key: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型子集，上面的示例中，string 和 number 类型都是 any 类型的子集，所以这样是可以的。

但如果是下面这样定义则会报错：

interface Person {
    name: string;
    age?: number;
    [key: string]: string;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

因为可选属性 age 的类型为 number, 任意属性的类型为 string，并不是任意属性的子类型。

image.png

只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [key: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527; // ！！！报错，Cannot assign to 'id' because it is a read-only property.ts(2540)

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

接口的合并

如果定义了两个相同名字接口，那么它们会合并成一个类型：

interface Alarm {
    price: number;
}
interface Alarm {
    weight: number;
}

相当于：

interface Alarm {
    price: number;
    weight: number;
}

注意，合并的属性的类型必须是唯一的：

interface Alarm {
    price: number;
}
interface Alarm {
    price: string;  // 类型不一致，会报错
    weight: number;
}

接口中方法的合并，相当于函数的重载：

interface Alarm {
    price: number;
    alert(s: string): string;
}
interface Alarm {
    weight: number;
    alert(s: string, n: number): string;
}

相当于：

interface Alarm {
    price: number;
    weight: number;
    alert(s: string): string;
    alert(s: string, n: number): string;
}

命名规范

很多最佳实践和 interface 的命名规范中都强调过这样一句话：

Do not use "I" as a prefix for interface names.

stackoverflow: confused-about-the-interface-and-class-coding-guidelines-for-typescript

函数

函数声明

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

输入多余的（或者少于要求的）参数，是不被允许的

函数表达式

// 函数定义
type SumFunc = (x: number, y: number) => void;

const sum: SumFunc = function (x, y) {
  return x + y;
};

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

我们也可以使用接口的方式来定义一个函数需要符合的形状：

// 接口的方式定义函数
interface SumFunc {
  (x: number, y: number): void;
}

const sum: SumFunc = function (x, y) {
  return x + y;
};

可选参数

与接口中的可选属性类似，我们用 ? 表示可选的参数：

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

需要注意的是，可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必需参数了。

参数默认值

在 ES6 中，我们允许给函数的参数添加默认值：

function buildName(firstName: string = "tom", lastName: string) {
  return firstName + " " + lastName;
}
let tomcat = buildName("Tom", "Cat");

剩余参数

ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数，rest 参数只能是最后一个参数。

function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

函数重载

我们需要实现一个函数 reverse，输入数字 123 的时候，输出反转的数字 321，输入字符串 'hello' 的时候，输出反转的字符串 'olleh'。

利用联合类型，我们可以这么实现：

function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。

这时，我们可以使用重载定义多个 reverse 的函数类型：

// 重载签名
function reverse(x: number): number;
function reverse(x: string): string;
// 实现签名
function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

上例中，我们重复定义了多次函数 reverse，前几次都是函数定义，最后一次是函数实现。在编辑器的代码提示中，可以正确的看到前两个提示。

注意，TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。

定义this类型

在 ts 中 this 的类型检查默认为 any。为什么是 any 呢？因为 ts 也不知道函数是以什么方式调用的：

interface User {
  name: string;
  age: number;
  sayHello(): void;
}

const p: User = {
  name: "tom",
  age: 26,
  sayHello() {
    console.log(`hello, I'm ${this.name}`);
  },
};

上例中的 this 的类型为 any。在大多数的情况下，声明在对象上的方法，都是通过 对象.方法 的方式调用的，但是 ts 默认 this 的类型为 any，为了 this 的指向正确：

  1. 可以在 tsconfig.json 中的 compilerOptions.noImplicitThis: true 开启这个属性的配置，表示：不允许 this 隐式的指向 any，此时的 this 会默认指向当前对象类型。

image.png 2. 可以直接在函数定义中声明 this 的类型：

interface User {
  name: string;
  age: number;
  // this 类型为 User
  sayHello(this: User): void;
}

const p: User = {
  name: "tom",
  age: 26,
  sayHello() {
    console.log(`hello, I'm ${this.name}`);
  },
};

注意此时的 this 参数是伪参数，它位于函数参数列表的第一位。为什么说 this 参数是伪参数呢？因为以上的 sayHello 函数经过编译后，并不会生成实际的参数。

类型守卫

类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。 目前主要有四种的方式来实现类型保护：

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);
  }
}

typeof 关键字

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 并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型保护。

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";
}

断言

类型断言

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

类型断言有两种形式：

  1. “尖括号” 语法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
  1. as 语法
let someValue: any = "this is a string"; 
let strLength: number = (someValue as string).length;

非空断言

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

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

  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
}
  1. 调用函数时忽略 undefined 类型
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
}

确定赋值断言

在 TypeScript 2.7 版本中引入了确定赋值断言，即允许在实例属性和变量声明后面放置一个 ! 号，从而告诉 TypeScript 该属性会被明确地赋值。为了更好地理解它的作用，我们来看个具体的例子：

let x: number;
initialize();
// Variable 'x' is used before being assigned.(2454)
console.log(2 * x); // Error

function initialize() {
  x = 10;
}

很明显该异常信息是说变量 x 在赋值前被使用了，要解决该问题，我们可以使用确定赋值断言：

let x!: number;
initialize();
console.log(2 * x); // Ok

function initialize() {
  x = 10;
}

通过 let x!: number; 确定赋值断言，TypeScript 编译器就会知道该属性会被明确地赋值。

联合类型

创建联合类型的语法格式如下：

Type1 | Type2 | Type3

let val: string | number = 12;
console.log("数字为 "+ val);
val = "Runoob";
console.log("字符串为 " + val);

可辨识联合

TypeScript 可辨识联合（Discriminated Unions）类型，也称为标签联合类型。它包含 3 个要点：可辨识、联合类型和类型守卫。

这种类型的本质是结合联合类型和字面量类型的一种类型保护方法。如果一个类型是多个类型的联合类型，且多个类型含有一个公共属性，那么就可以利用这个公共属性，来创建不同的类型保护区块。

1. 可辨识

可辨识要求联合类型中的每个元素都含有一个单例类型属性，比如：

enum CarTransmission {
  Automatic = 200,
  Manual = 300
}

interface Motorcycle {
  vType: "motorcycle"; // discriminant
  make: number; // year
}

interface Car {
  vType: "car"; // discriminant
  transmission: CarTransmission
}

interface Truck {
  vType: "truck"; // discriminant
  capacity: number; // in tons
}

在上述代码中，我们分别定义了 Motorcycle、 Car 和 Truck 三个接口，在这些接口中都包含一个 vType 属性，该属性被称为可辨识的属性，而其它的属性只跟特性的接口相关。

2. 联合类型

基于前面定义了三个接口，我们可以创建一个 Vehicle 联合类型：

// 类型别名，给类型起一个新的名字
type Vehicle = Motorcycle | Car | Truck;

现在我们就可以开始使用 Vehicle 联合类型，对于 Vehicle 类型的变量，它可以表示不同类型的车辆。

3.类型守卫

下面我们来定义一个 evaluatePrice 方法，该方法用于根据车辆的类型、容量和评估因子来计算价格，具体实现如下：

const EVALUATION_FACTOR = Math.PI; 

function evaluatePrice(vehicle: Vehicle) {
  return vehicle.capacity * EVALUATION_FACTOR;
}

const myTruck: Truck = { vType: "truck", capacity: 9.5 };
evaluatePrice(myTruck);

对于以上代码，TypeScript 编译器将会提示以下错误信息：

Property 'capacity' does not exist on type 'Vehicle'. 
Property 'capacity' does not exist on type 'Motorcycle'.

原因是在 Motorcycle 接口中，并不存在 capacity 属性，而对于 Car 接口来说，它也不存在 capacity 属性。那么，现在我们应该如何解决以上问题呢？这时，我们可以使用类型守卫。下面我们来重构一下前面定义的 evaluatePrice 方法，重构后的代码如下：

function evaluatePrice(vehicle: Vehicle) {
  switch(vehicle.vType) {
    case "car":
      return vehicle.transmission * EVALUATION_FACTOR;
    case "truck":
      return vehicle.capacity * EVALUATION_FACTOR;
    case "motorcycle":
      return vehicle.make * EVALUATION_FACTOR;
  }
}

在以上代码中，我们使用 switch 和 case 运算符来实现类型守卫，从而确保在 evaluatePrice 方法中，我们可以安全地访问 vehicle 对象中的所包含的属性，来正确的计算该车辆类型所对应的价格。

交叉类型

将多个类型合并为一个类型，包含了所有类型的特性，而且要同时满足要交叉的所有类型。

接口的交叉

interface Interface1 {
  id: number;
  name: string;
}

interface Interface2 {
  age: number;
}

type IntersectionType = Interface1 & Interface2;

交叉类型 IntersectionType 的类型为

{
  id: number;
  name: string;
  age: number;
}

对于接口类型来说，交叉类型确实是具有所有接口类型的所有特性。

联合类型的交叉类型

对于联合类型，情况就有点不同了。

type UnionA = 'px' | 'em' | 'rem' | '%';
type UnionB = 'vh' | 'em' | 'rem' | 'pt';
type IntersectionUnion = UnionA & UnionB;

交叉类型 IntersectionUnion 的类型为：

'em' | 'rem'

为什么会这样？可以这样来理解。 交叉类型不仅要将所有的类型合并为一个类型，而且要同时满足要交叉的类型。

avatar
文章
阅读
粉丝