乐趣区

关于typescript:扒官方文档学Ts类型编程一

jiezi

写作背景：󠀰

     TypeScript 作为 JavaScript 的一个超集带来了十分弱小的类型零碎，但作为天天泡在业务开发中的咱们来说没感觉比其它面向对象的 Java，C# 等语言高级了多少，最近发现吵吵着类型体操的人比拟多，决定翻看了一下 TypeScript 文档来搞搞分明这个类型有什么高级之处，接下来就具体上手学习一下 TypeScript 类型编程的弱小之处吧。

重要的事件提前说：

  1. 你申明的是类型而非变量，你看到的 true、false 大多数均是类型而非 Boolean 类型的值。🕊️
  2. TypeScript 类型编程倡议点击对应链接进 Playground 边看文章边调试代码学习。

TypeScript 类型操作：

     TypeScript 类型零碎的弱小之处次要体现在它容许咱们通过类型来表白类型，也就是说咱们能够通过现有的类型通过一系列的操作失去另一个类型（从类型创立类型），咱们将通过上面表格所列举的程序来解说如何表白一个新的类型：

序号 Types 类型 形容
1 Generics-Types 泛型类型 带参数的类型
2 Keyof Type Operator Keyof 类型运算符 应用 keyof 运算符创立新类型
3 Typeof Type Operator Typeof 类型运算符 应用 typeof 运算符创立新类型
4 Indexed Access Types 索引拜访类型 应用 Type[‘a’]语法拜访类型的子集
5 Conditional Types 条件类型 行为相似于类型零碎中的 if 语句的类型
6 Mapped Types 映射类型 通过映射现有类型中的每个属性来创立类型
7 Template Literal Types 模板字符串类型 通过模板字符串更改属性的映射类型

Generic Types：

     泛型在高级编程语言 Java、C# 中的利用是很宽泛的，泛型的援用使得咱们将类型指定的申明周期提早到实例化时进行，使得咱们的程序设计达到更高的复用水平，变得更加灵便。

泛型引入：

     在 TypeScript 开发过程中咱们能够显示的来标记传入参数和返回数据的类型，当须要反对传入和返回数据类型的限度绝对宽泛咱们能够应用 any 来示意，但这样也就失落了 TypeScript 的弱小之处（动态类型推断）。

定义固定类型的函数：

function identity(arg: number): number {return arg;}

定义任意类型的函数：

function identity(arg: any): any {return arg;}

应用泛型定义通用类型的函数：

  1. 泛型的特点就是通用；
  2. 泛型的语法：< T >，其中 T 是通配符，常见的通配符还有 K，U 等，上面代码中的 Type 也是通配符；
  3. 在上面执行 identity 时通过泛型束缚了传入类型为 string，那么按函数性能返回的类型也将是 string，能够点击进入演练场验证答案；
function identity<Type>(arg: Type): Type {return arg;}

let output = identity<string>("myString");

应用泛型类型变量：

  1. 当咱们在 identity 函数中间接读取 arg 变量的 length 属性时，编译器将会给咱们抛出谬误，提醒 Type 并不存在一个名为 length 的属性。这是应为咱们应用泛型定义的函数的重要特点就是通用，arg 在理论传入的时候就能够试任意类型，就会呈现传入的变量的类型不肯定存在 length 属性。
  2. 咱们晓得数组是必定存在 length 属性的，上面的例子演示了束缚类型为 number 但传入参数为数组但数组元素的类型为 number，能够点击进入演练场验证答案；
function loggingIdentity<Type>(arg: Type[]): number {return arg.length;}
let output = loggingIdentity<number>([1 , 2, 3]);

泛型类型：

     在后面咱们看到的都是最长将的泛型的应用，这里开始咱们就要学习泛型类型了，请认真看代码，“：”右边的是变量的申明，“：”左边是变量应的类型，肯定要记住。

定义泛型函数 < 类型 >：

  1. 泛型函数和非泛型函数一样，都是先将类型参数列出，泛型类型参数同样能够应用不同的通配符来示意，但类型变量的数量和应用形式要保持一致。
  2. 当然泛型类型定义还能够按对象字面量类型的形式编写，能够点击进入演练场验证答案；
function identity<Type>(arg: Type): Type {return arg;}

let myIdentity1: <Type>(arg: Type) => Type = identity;
//    ^?
let myIdentity2: <Input>(arg: Input) => Input = identity;
//    ^?
let myIdentity3: {<Type>(arg: Type): Type } = identity;
//    ^?

定义泛型接口 < 类型 >：

能够点击进入演练场验证答案，定义泛型类和泛型接口相似，就不过多开展了。

interface GenericIdentityFn<Type> {(arg: Type): Type;
}
 
function identity<Type>(arg: Type): Type {return arg;}
 
let myIdentity: GenericIdentityFn<number> = identity;
//    ^?

泛型通用束缚：

     咱们在最开始有提到在从 arg 参数获取 length 时报错 length 在 arg 中不存在的提醒，咱们过后为了能够失常读取 length 就另创立了一个函数并约定形参为数组并数组元素类型为泛型的 Type。那咱们在不扭转形参的状况下束缚咱们传入的 Type 肯定蕴含一个 length 属性呢？这就体现出了通用束缚的重要作用，在理论开发中也最为常见。

  1. 咱们定义了一个接口，并给定一个 length 属性；
  2. 在尖括号中咱们应用 extends 关键字来束缚将来传入的 Type 肯定是实现过 Lengthwise 接口的，这样咱们就必然能够读取到 length 属性了，能够点击进入演练场验证答案。
interface Lengthwise {length: number;}
 
function loggingIdentity<Type extends Lengthwise>(arg: Type): number {return arg.length;}

泛型束缚时应用类型参数：

  1. 在上面的示例中，咱们发现在尖括号中应用到了逗号；
  2. 逗号后面：仍旧是咱们始终应用的 Type；
  3. 逗号左边：先给出答案，keyof Type 失去的将是 Type 属性 key 的汇合，Key 将是这个汇合中的其中一个，能够点击进入演练场验证答案。
type Types  = keyof {a: 1, b: 2, c: 3, d: 4};
//    ^?

function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {return obj[key];
}
 
let x = {a: 1, b: 2, c: 3, d: 4};

getProperty(x, "a");
getProperty(x, "m"); // Argument of type '"m"' is not assignable to parameter of type ...

Keyof Type Operator：

     这里咱们正式学习 Keyof 类型运算符，它的次要作用在下面的例子中也有提到，那么 keyof 的次要作用就是获取对象类型中属性名 (键，key) 的字符串或数字组成的联结（union）类型。当你想得到一个对象的 key（的字符串）组成的联结类型时就用 keyof。

Keyof 类型运算符：

     咱们不在展现讲述，因为它的作用足够的简略，你能够点击进去演练场验证答案。这里你能够考虑一下，对象的 key 都能够是什么类型呢？什么类型的值能够充当对象的属性名称呢？

type Types  = keyof {a: 1, b: 2, c: 3, d: 4};
//   ^?

type Point = {x: number; y: number};
type P = keyof Point;
//   ^?

type Arrayish = {[n: number]: unknown };
type A = keyof Arrayish;
//   ^?

type Mapish = {[k: string]: boolean };
type M = keyof Mapish;
//   ^?

Typeof Type Operator：

     刚学完 keyof 操作符，这里就学习一个 typeof 操作符，typeof 在 JavaScript 中就有，咱们在查看变量类型的时候就常常应用，那么在 TypeScript 外面 typeof 的作用是什么呢？当咱们在申明一个类型的时候，咱们能够应用 typeof 来将申明的变量、属性转为其类型。什么意思呢？应用 Typeof 来援用咱们 JavaScript 世界的内容转为到类型世界的内容。

Typeof 类型运算符：

     能够应用 typeof 在类型上下文中应用它来援用变量或者属性的类型，能够点击进演练场验证答案。

let str = "hello world";

let type: typeof str;
//  ^?

案例剖析 -【联合 ReturnType<T>】：

     在下面的入门示例中看到 typeof 仿佛施展的作用并不大，所以咱们在理解作用和语法后联合其它类型运算符就能够表白更多的类型。

  1. 在上面的示例中咱们须要通过 ReturnType 来失去 f 函数的返回类型，这里能够看到咱们须要将 JavaScript 世界的 f 转为类型世界，所以须要应用 typeof 来援用 f；
  2. 咱们失去的 P 类型将是{x: number; y: number;}，具体请点击进演练场验证答案。
function f() {return { x: 10, y: 3};
}

type P = ReturnType<typeof f>;
//  ^?

Indexed Access Types：

     索引拜访类型和咱们在编写 JavaScript 代码时的体验一样，也是应用中括号来传入索引值来获取内容，只不过在 JavaScript 中获取的内容是值，在 TypeScript 类型编程中获取的是类型。

索引拜访类型：

     咱们能够应用索引拜访类型来查找另一种类型的特定属性，能够点击进演练场验证答案。

type Person = {age: number; name: string; alive: boolean};
type Age = Person["age"]; // 输入类型 number
//  ^?

案例剖析 -【自身就是类型】：

     因为索引拜访类型自身就是类型，所以反对应用联结、keyof，或其余类型，能够点击进演练场验证答案。

type Person = {name: string, age: number};

type I1 = Person["age" | "name"];       // 输入类型 string | number
//  ^?
type I2 = Person[keyof Person];         // 输入类型 string | number | boolean
//  ^?
type AgeOrName = "age" | "name";    
type I3 = Person[AgeOrName];            // 输入类型 string | number
//  ^?

案例剖析 -【数组元素的类型获取】：

     这里咱们须要通过 number 关键字来配合将数组展平，以便捕捉数组字面量的元素类型，能够进演练场验证答案。

const MyArray = [{ name: "Alice", age: 15},
  {name: "Bob", age: 23},
  {name: "Eve", age: 38},
];
 
type Person = typeof MyArray[number];       // 输入类型 {name: string; age: number;}
//  ^?
type Age = typeof MyArray[number]["age"];   // 输入类型 number
//  ^?
type Age2 = Person["age"];                  // 输入类型 number
//  ^?
type key = "age";
type Age3 = Person[key];                    // 输入类型 number
//  ^?

Conditional Types：

     在咱们学习编程的最开始阶段，当咱们学习完如何输入 HelloWorld，定义变量、函数后，根本就到了逻辑局部，那么上来的第一个将是 IF 比拟逻辑符，也是每个编程语言都必不可少的。那么在 TypeScript 类型编程中也须要进行判断，但不是应用 IF，而是应用类三元表达式，语法模式：SomeType extends OtherType ? TrueType : FalseType;

条件类型：

当 extends 左侧的 SomeType 能够调配给右侧 OtherType 时返回 TrueType 反之返回 FalseType。

  1. 在上面的例子中咱们定义一个 Person 类和继承自 Person 类的 Student 类，咱们晓得 Student 属于 Person，但不是每一个 Person 都属于 Student，因为他 / 她长大了😅，能够点击进演练场验证答案。
  2. 留神，这里在揭示一下，上面代码中的 true、false 间接代表类型而非 Boolean 类型的值。
class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

class Student extends Person {
  classes: string | number;
  constructor(name: string, age: number, classes: string | number) {super(name, age);
    this.classes = classes;
  }
}

type Example1 = Student extends Person ? true : false;
//  ^?
type Example2 = Person extends Student ? true : false;
//  ^?

案例剖析 -【条件类型 + 泛型】：

     通过下面学习的示例同样看起来相当的鸡肋，咱们还是须要联合其余的类型运算符来配合应用。

上面的代码演示了咱们函数重载的罕用做法，咱们须要实现的性能是当咱们传入参数是 number 类型时返回 IdLabel 类型，当传入参数是 string 类型时返回 NameLabel 类型，显然在函数重载时没方法做进一步的限度，并且写起来也是相当的繁琐。

interface IdLabel {id: number}
interface NameLabel {name: string}

function createLable(id: number): IdLabel;
function createLable(name: string): NameLabel;
function createLable(idOrName: number | string): IdLabel | NameLabel {throw "unrealized"}

上面的代码是咱们编写的通用类型工具，来满足重载函数的缺点：

type IdOrName<T extends number | string> = T extends number ? IdLabel : NameLabel;

上面的代码使咱们应用类型工具简化后的后果：

  1. 通过泛型束缚形参类型：<Type extends number | string>；
  2. 通过运行下面编写的 条件类型工具 失去适合的返回类型，可点击进演练场验证答案；
interface IdLabel {id: number}
interface NameLabel {name: string}

type IdOrName<T extends number | string> = T extends number ? IdLabel : NameLabel;

function createLable<Type extends number | string>(idOrName: Type): IdOrName<Type> {throw "unrealized"}

let v1 = createLable("typescript");     // NameLabel
//  ^?
let v2 = createLable(3.1415);           // IdLabel
//  ^?

案例剖析 -【条件类型束缚】：

咱们通过一个案例来演示条件类型束缚，咱们须要设计一个通用的类型工具，当传入的泛型 T 中蕴含一个 message 属性，咱们就返回这个属性的类型，如果不蕴含则返回 never；

上面是咱们编写的通用类型工具：

  1. 应用条件类型来判断当 T 中存在一个 message 能够调配给右侧则返回通过索引拜访类型取出（T[“message”]）的类型；
  2. 当 T 不存在能够调配给右侧一个 message 时返回 never；
type MessageOf<T> = T extends {message: unknown} ? T["message"] : never;

上面是验证的残缺示例，能够进演练场验证答案。

type MessageOf<T> = T extends {message: unknown} ? T["message"] : never;
 
interface Email {message: string;}
 
interface Dog {bark(): void;
}
 
type EmailMessageContents = MessageOf<Email>;
//  ^?
 
type DogMessageContents = MessageOf<Dog>;
//  ^?

案例剖析 -【展平数组失去元素类型】：

     在这个案例中咱们心愿传入的 T 是一个任意类型的数组，输入的是这个数组元素的类型，这里会用到一个非凡的索引拜访“T[number]”，能够进演练场验证答案。

type Flatten<T> = T extends any[] ? T[number] : T;

type Str = Flatten<string[]>;   // string
//  ^?
type Num = Flatten<number>;     // number
//  ^?

案例剖析 -【在条件类型中如何推断】：

     在上一个案例中咱们应用 T[number]来失去数组元素的类型，这里咱们将介绍一个新的关键字infer，它能够不便咱们在条件类型中推断出元素的类型，能够进演练场验证答案。

type Flatten<Type> = Type extends Array<infer Item> ? Item : Type;

type Str = Flatten<string[]>;   // string
//  ^?
type Num = Flatten<number>;     // number
//  ^?

上面这个案例是推断提取返回值的类型，能够进演练场验证答案。

type GetReturnType<Type> = Type extends () => infer Return ? Return : never;
type Num = GetReturnType<() => number>;         // number
//  ^?
type Str = GetReturnType<() => string>;         // string
//  ^?
type Bools = GetReturnType<() => boolean[]>;    // boolean[]
//  ^?

案例剖析 -【分布式条件类型】：

     分布式条件类型（Distributive Conditional Types）来自软件翻译后果，这里我更违心了解为“别离”，因为分布式常在服务端呈现，如分布式部署，简略的了解就是将同一个别离部署到不同的机器上。那么 分布式条件类型指的是传入的类型为联结类型时，则条件类型会别离利用于该联结的每个成员。

例如上面这个是咱们的类型工具，当咱们传入的 Type 是一个联结类型时，咱们将失去一个数组联结类型，且每个数组的类型别离对应 Type 联结类型的每一个类型。

type ToArray<Type> = Type extends any ? Type[] : never;

上面是验证代码，能够进演练场验证答案：

type ToArray<Type> = Type extends any ? Type[] : never;
 
type StrArrOrNumArr = ToArray<string | number>;
//  ^?

当你运行下面的代码后失去的后果正如分布式条件类型的定义那样，传入的是 string 和 number 的联结类型，那么返回的将是 string[]和 number[]的联结类型。这是分布式条件类型的默认行为，但咱们如何示意返回的后果须要是 string 或 number 类型的一个数组呢？这时候就须要应用中括号将 extends 两侧的类型进行包裹来防止默认的行为，能够进演练场验证答案。

type ToArray<Type> = [Type] extends [any] ? Type[] : never;
type StrArrOrNumArr = ToArray<string | number>;
//  ^?

写在最初：

     在这一篇中咱们通过 20 份代码片段学习了 TypeScript 类型编程的前 5 大要害内容，在这里还是倡议各位搭档能够点击对应链接进入在线 IED 以边看代码边看文章学习。TypeScript 类型编程的学习就和咱们初学任何一种编程语言一样，将根底的语法灵便学习后能力在实战中运用自如。这里举荐一个在 Github 上的开源我的项目 type-challenges，点赞高达 15k 之多，由 Vue3 的其中一位贡献者创立的学习和查阅 TypeScript 类型编程的我的项目感兴趣的搭档也能够 Fork 一份本人做做看。剩下的 Mapped Types 和 Template Literal Types 在类型编程中也是很重要的两块内容，咱们将独自再写一篇来具体解说，各位纵情期待吧~

阐明：

  1. 文中的大量案例沿用了官网文档的示例，同样能够参考官网文档，不足之处还请斧正；
  2. 因为平台对外链限度，倡议拜访原文取得更好的浏览体验。

团队介绍

     高灯科技交易合规前端团队（GFE）, 隶属于高灯科技 (北京) 交易合规业务事业线研发部，是一个富裕激情、充斥创造力、保持技术驱动全面成长的团队, 团队平均年龄 27 岁，有在各自畛域深耕多年的大牛, 也有刚刚毕业的小牛, 咱们在工程化、编码品质、性能监控、微服务、交互体验等方向踊跃进行摸索, 谋求技术驱动产品落地的主旨，打造欠缺的前端技术体系。

  • 愿景: 成为最值得信赖、最有影响力的前端团队
  • 使命: 保持客户体验第一, 为业务发明更多可能性
  • 文化: 敢于承当、深刻业务、集思广益、简略凋谢

Github：github.com/gfe-team

团队邮箱：gfe@goldentec.com

作者：GFE- 小鑫同学

著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

退出移动版