TypeScript 入门简单进阶难，梳理下要攻克的重难点

「keyof 是索引类型操作符」。用于获取一个“常量”的类型,这里的“常量”是指任何可以在编译期确定的东西，例如 const 、 function 、 class 等。它是从 「实际运行代码」 通向 「类型系统」 的单行道。理论上，任何运行时的符号名想要为类型系统所用，都要加上 typeof 。

在使用 class 时， class 名表示实例类型， typeof class 表示 class 本身类型。是的，这个关键字和 js 的 typeof 关键字重名了 。

假设 T 是一个类型，那么 keyof T 产生的类型就是 T 的属性名称字符串字面量类型构成的联合类型(联合类型比较简单，和交叉类型对立相似，这里就不做介绍了)。

「注意！上述的 T 是数据类型，并非数据本身」。

interface IQZQD{
    cnName:string;
    age:number;
    author:string;
}
type ant = keyof IQZQD;

在 vscode 上，我们可以看到 ts 推断出来的 ant ：

注意，如果 T 是带有字符串索引的类型，那么 keyof T 是 string 或者 number 类型。

索引签名参数类型必须为 “string” 或 “number”

interface Map {
  [key: string]: T;
}

//T[U]是索引访问操作符;U是一个属性名称。
let keys: keyof Map; //string | number
let value: Map['antzone'];//number

泛型可能是对于前端同学来说理解起来有点困难的知识点了。通常我们说，泛型就是指定一个表示类型的变量，用它来代替某个实际的类型用于编程，而后再通过实际运行或推导的类型来对其进行替换，以达到一段使用泛型程序可以实际适应不同类型的目的。说白了， 「泛型就是不预先确定的数据类型，具体的类型在使用的时候再确定的一种类型约束规范」 。

泛型可以应用于 function 、 interface 、 type 或者 class 中。但是注意， 「泛型不能应用于类的静态成员」

几个简单的例子，先感受下泛型

function log(value: T): T {
    console.log(value);
    return value;
}

// 两种调用方式
log(['a', ',b', 'c'])
log(['a', ',b', 'c'])
log('Nealyang')

• 泛型类型、泛型接口

type Log = (value: T) => T
let myLog: Log = log

interface Log {
    (value: T): T
}
let myLog: Log = log // 泛型约束了整个接口，实现的时候必须指定类型。如果不指定类型，就在定义的之后指定一个默认的类型
myLog(1)

「我们也可以把泛型变量理解为函数的参数，只不过是另一个维度的参数，是代表类型而不是代表值的参数。」

class Log { // 泛型不能应用于类的静态成员
    run(value: T) {
        console.log(value)
        return value
    }
}

let log1 = new Log() //实例化的时候可以显示的传入泛型的类型
log1.run(1)
let log2 = new Log()
log2.run({ a: 1 }) //也可以不传入类型参数，当不指定的时候，value 的值就可以是任意的值

类型约束，需预定义一个接口

interface Length {
    length: number
}
function logAdvance(value: T): T {
    console.log(value, value.length);
    return value;
}

// 输入的参数不管是什么类型，都必须具有 length 属性
logAdvance([1])
logAdvance('123')
logAdvance({ length: 3 })

泛型的好处：

• 函数和类可以轻松的支持多种类型，增强程序的扩展性

• 不必写多条函数重载，冗长的联合类型声明，增强代码的可读性

• 灵活控制类型之间的约束

泛型，在 ts 内部也都是非常常用的，尤其是对于容器类非常常用。而对于我们，还是要多使用，多思考的，这样才会有更加深刻的体会。同时也对塑造我们类型思维非常的有帮助。

小试牛刀

function pluck(o: T, names: K[]): T[K][] {
    return names.map(n => o[n]);
}

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

let person: Person = {
    name: 'Jarid',
    age: 35
};
let strings: string[] = pluck(person, ['name', 'name', 'name']); //["Jarid", "Jarid", "Jarid"]

所谓的小试牛刀，就是结合上面我们说的那几个点，分析下 pluck 方法的意思

• 约束了这是一个泛型函数
• keyof T 就是取 T 中的所有的常量 key（这个例子的调用中）,即为：
  "name" | "age"

• K extends keyof Person
  "name"
  "age"
  

• 结合以上泛型解释，再看形参

• K[]
  "name"
  "age"
  

• 再看返回值

• T[K][]
  []
  T[K]
  key
  K
  value
  

infer 关键字最早出现在 PR 里面， 「表示在 extends 条件语句中待推断的类型变量」

是在 ts2.8 引入的，在条件判断语句中，该关键字用于 「替换手动获取类型」 。

type PramType = T extends (param : infer p) => any ? p : T;

在上面的条件语句中， infer P 表示待推断的函数参数，如果 T 能赋值给 (param : infer p) => any ,则结果是 (param: infer P) => any 类型中的参数 P ,否则为 T .

interface INealyang{
  name:'Nealyang';
  age:'25';
}

type Func = (user:INealyang) => void;

type Param = ParamType; // Param = INealyang
type Test = ParamType; // string

工具泛型

所谓的工具泛型，其实就是泛型的一些语法糖的实现。完全也是可以自己的写的。我们也可以在 lib.d.ts 中找到他们的定义

Partial

Partial 的作用就是将传入的属性变为可选。

由于 keyof 关键字已经介绍了。其实就是可以用来取得一个对象接口的所有 key 值。在介绍 Partial 之前，我们再介绍下 in 操作符:

type Keys = "a" | "b"
type Obj =  {
  [p in Keys]: any
} // -> { a: any, b: any }

然后再看 Partial 的实现：

type Partial = { [P in keyof T]?: T[P] };

翻译一下就是 keyof T 拿到 T 所有属性名, 然后 in 进行遍历, 将值赋给 P , 最后 T[P] 取得相应属性的值,然后配合 ?: 改为可选。

Required

Required 的作用是将传入的属性变为必选项, 源码如下

type Required = { [P in keyof T]-?: T[P] };

Readonly

将传入的属性变为只读选项, 源码如下

type Readonly = { readonly [P in keyof T]: T[P] };

该类型可以将 K 中所有的属性的值转化为 T 类型，源码实现如下：

/**
 * Construct a type with a set of properties K of type T
 */
type Record = {
    [P in K]: T;
};

可以根据 K 中的所有可能值来设置 key ，以及 value 的类型，举个例子：

type T11 = Record; // -> { a: Person; b: Person; c: Person; }

从 T 中取出 一系列 K 的属性

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick = {
    [P in K]: T[P];
};

Exclude

Exclude 将某个类型中属于另一个的类型移除掉。

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude = T extends U ? never : T;

以上语句的意思就是 如果 T 能赋值给 U 类型的话，那么就会返回 never 类型，否则返回 T ，最终结果是将 T 中的某些属于 U 的类型移除掉

举个栗子：

type T00 = Exclude;  // -> 'b' | 'd'

可以看到 T 是 'a' | 'b' | 'c' | 'd' ，然后 U 是 'a' | 'c' | 'f' ，返回的新类型就可以将 U 中的类型给移除掉，也就是 'b' | 'd' 了。

Extract

Extract 的作用是提取出 T 包含在 U 中的元素，换种更加贴近语义的说法就是从 T 中提取出 U ，源码如下：

/**
 * Extract from T those types that are assignable to U
 */
type Extract = T extends U ? T : never;

Demo:

type T01 = Extract;  // -> 'a' | 'c'

Pick 和 Exclude 进行组合, 实现忽略对象某些属性功能, 源码如下:

/**
 * Construct a type with the properties of T except for those in type K.
 */
type Omit = Pick<T, Exclude>;

Demo:

// 使用
type Foo = Omit // -> { age: number }

更多工具泛型

其实常用的工具泛型大概就是我上面介绍的几种。更多的工具泛型，可以通过查看 lib.es5.d.ts 里面查看。

毕竟。。。搬运几段声明着实没啥意思。

类型断言

断言这种东西还是少用。。。。不多对于初学者，估计最快熟练掌握的就是类型断言了。毕竟 「any 大法好」

Typescript 允许我们覆盖它的推断（毕竟代码使我们自己写的），然后根据我们自定义的类型去分析它。这种机制，我们称之为 「类型断言」

const nealyang = {};
nealyang.enName = 'Nealyang'; // Error: 'enName' 属性不存在于 ‘{}’
nealyang.cnName = '一凨'; // Error: 'cnName' 属性不存在于 '{}'

interface INealyang = {
  enName:string;
  cnName：string;
}

const nealyang = {} as INealyang; // const nealyang = {};
nealyang.enName = 'Nealyang';
nealyang.cnName = '一凨';

类型断言比较简单，其实就是“纠正” ts 对类型的判断,当然，是不是纠正就看你自己的了。

需要注意一下两点即可：

• 推荐类型断言的预发使用
  as 关键字，而不是
  ,防止歧义

• 类型断言并非类型转换，类型断言发生在编译阶段。类型转换发生在运行时

函数重载

❝

在我刚开始使用 ts 的时候，我一直困惑。。。为什么会有函数重载这么鸡肋的写法，可选参数它不香么？

❞

函数重载的基本语法：

declare function test(a: number): number;
declare function test(a: string): string;

const resS = test('Hello World');  // resS 被推断出类型为 string；
const resN = test(1234);           // resN 被推断出类型为 number;

这里我们申明了两次？！为什么我不能判断类型或者可选参数呢？后来我遇到这么一个场景，

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

declare function test(para: User | number, flag?: boolean): number;

在这个 test 函数里，我们的本意可能是当传入参数 para 是 User 时，不传 flag，当传入 para 是 number 时，传入 flag。TypeScript 并不知道这些，当你传入 para 为 User 时，flag 同样允许你传入：

const user = {
  name: 'Jack',
  age: 666
}

// 没有报错，但是与想法违背
const res = test(user, false);

使用函数重载能帮助我们实现：

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

declare function test(para: User): number;
declare function test(para: number, flag: boolean): number;

const user = {
  name: 'Jack',
  age: 666
};

// bingo
// Error: 参数不匹配
const res = test(user, false);

Ts 的一些实战

我之前在公众号里面发表过两篇关于TS在实战项目中的介绍：