TypeScript全面指南（四）
索引类型
索引类型分为如下三个部分：
索引签名类型
// 通过以下语法，快速声明一个类型结构：
interface Impl {
[key: string]: number;
}
const foo: Impl = {
age: 18,
name: 'reimu747', // 编译错误，Type 'string' is not assignable to type 'number'
};索引类型查询
interface Foo {
name: 'reimu747';
18: 68;
}
// 通过 keyof 关键字，将对象中的所有键转换为对应字面量类型，然后再组合成联合类型。
type FooKeys = keyof Foo; // "name" | 18
// keyof any 由所有可用作对象键值的类型组成
type keys = keyof any; // string | number | symbolkeyof 的产物必定是一个联合类型
索引类型访问
interface Foo {
propA: number;
propB: boolean;
}
// 通过键的字面量类型（'propA'）访问这个键对应的键值类型（number）。
type PropAType = Foo['propA']; // number
type PropBType = Foo['propB']; // boolean
// 注意，在未声明索引签名类型的情况下，只能通过键名的字面量类型来进行访问。
type PropAType = Foo[string]; // 编译错误，类型“Foo”没有匹配的类型“string”的索引签名。映射类型
通过 in 关键字，配合索引类型生成新的类型：
type Stringify<T> = {
[K in keyof T]: string;
};
interface Foo {
prop1: string;
prop2: number;
prop3: boolean;
prop4: () => void;
}
type StringifiedFoo = Stringify<Foo>;
// 等价于
// interface StringifiedFoo {
// prop1: string;
// prop2: string;
// prop3: string;
// prop4: string;
// }通过索引类型和映射类型，能方便的生成很多有用的工具类型：
// 克隆一个类型
type Clone<T> = {
[K in keyof T]: T[K];
};
// 将 T 中的所有属性变为可选
type Partial<T> = {
[K in keyof T]?: T[K];
};
// 从类型 T 中选择出属性 K，构造成一个新的类型。
type Pick<T, P extends keyof T> = {
[K in keyof T & P]: T[K];
};typeof 关键字
TypeScript 存在两种功能不同的 typeof 操作符。在 JavaScript 中，用于检查变量类型的 typeof ，它会返回 “string” / “number” / “object” / “undefined” 等值。除此以外， TypeScript 还新增了用于类型查询的 typeof ，这个 typeof 返回的是一个 TypeScript 类型：
const str = '';
const obj = { age: 18 };
const nullVar = null;
const undefinedVar = undefined;
const func = (input: string) => {
return input.length > 10;
};
// 注意 typeof 的推导，会精确到到字面量类型的级别
type Str = typeof str; // ''
type Obj = typeof obj; // { age: number; }
type Null = typeof nullVar; // null
type Undefined = typeof undefined; // undefined
type Func = typeof func; // (input: string) => boolean不必担心混用了这两种 typeof，TypeScript 编译器会自动判断代码中是哪一种 typeof。
类型守卫
TypeScript 中提供了强大的类型推导能力：
function foo(input: string | number): any {
if (typeof input === 'string') {
// 这里 input 一定为 string
console.log(input.repeat(2));
} else if (typeof input === 'number') {
// 这里 input 一定为 number
console.log(input.toFixed(2));
} else {
// 这里 input 一定为 never
// 下面的代码不会走到
throw new Error('error');
}
}如果 if 条件中的表达式，被提取到了外部会发生什么？
function isString(input: unknown): boolean {
return typeof input === 'string';
}
function foo(input: string | number): any {
if (isString(input)) {
console.log(input.repeat(2)); // 编译错误，类型 'string | number' 上不存在属性 'repeat'
} else if (typeof input === 'number') {
// 这里 input 一定为 number
console.log(input.toFixed(2));
} else {
// 这里 input 一定为 never
// 下面的代码不会走到
throw new Error('error');
}
}因为 isString 这个函数在另外一个地方，内部的判断逻辑并不在函数 foo 中。这里的类型控制流分析做不到跨函数上下文来进行类型的信息收集。为了解决这一类型控制流分析的能力不足， TypeScript 引入了 is 关键字来显式地提供类型信息：
function isString(input: unknown): input is string {
return typeof input === 'string';
}
function foo(input: string | number): any {
if (isString(input)) {
// 没有问题了，不会报错
console.log(input.repeat(2));
} else if (typeof input === 'number') {
// 这里 input 一定为 number
console.log(input.toFixed(2));
} else {
// 这里 input 一定为 never
// 下面的代码不会走到
throw new Error('error');
}
}isString 函数称为类型守卫，在它的返回值中，我们不再使用 boolean 作为类型标注，而是使用 input is string :
input函数的某个参数；is string，即is关键字 + 预期类型，即如果类型守卫成功返回为true，那么is关键字前这个入参的类型，就会被这个类型守卫调用方后续的类型控制流分析收集到。
TypeScript全面指南（四）
https://www.reimu747.ink/post/20210302.html