TypeScript学习笔记（Part—2）

一、对象

1.1 对象定义

// 匿名方式定义对象。
let a: { name: string; age: number } = { name: "xiaoming", age: 18 };

// 接口命名方式定义对象。
interface B {
name: string;
age: number;
}
let b: B = { name: "xiaoming", age: 18 };

// 类型别名方式定义对象。
type C = { name: string; age: number };
let c: C = { name: "xiaoming", age: 18 };

1.2 可选属性(?)

// 在属性名与冒号之间添加一个问号。
interface ABC {
x: number;
y?: number;
z?: number;
}

let a: ABC = { x: 1 };

/*
若使用了可选属性，在函数中作为参数时，
要么在函数中用if等判断哪些属性没传值，
要么使用解构在参数中设置默认值。
*/

1.3 只读属性(readonly)

1.3.1 基础语法

// 在属性名前添加关键词“readonly”。
interface ABC {
id: number;

readonly name: string;
readonly address: {
a1: string;
a2: string;
};
}

function test(abc: ABC) {
console.log(abc.id, abc.name, abc.address.a1, abc.address.a2);

abc.id = 1;
abc.name = "abc"; // 无法为“name”赋值，因为它是只读属性。
abc.address.a1 = "abc"; // 正确。
abc.address.a2 = "abc"; // 正确。
abc.address = { // 无法为“address”赋值，因为它是只读属性。
a1: "abc",
a2: "abc",
};
}

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

let p1: Person = { name: "Jim", age: 20 };
// ReadonlyPerson兼容Person。
let p2: ReadonlyPerson = p1;

p2.name = "Tom"; // 无法为“name”赋值，因为它是只读属性。
p2.age = 21; // 无法为“age”赋值，因为它是只读属性。

p1.name = "Jimmy";
p1.age = 22;

// p1更改后，p2也会改变。
console.log(p1, p2);
// { name: 'Jimmy', age: 22 } { name: 'Jimmy', age: 22 }。

1.3.2 详细介绍

错误理解：readonly只能用于数组和元组字面量类型（许多文档中关于readonly的介绍）。 正确理解：readonly既可以用于类型定义中的属性（如interface/class），也可以用于类型注解中的数组/元组（如readonly string[]） —— 这是两种不同但相关的用法。

readonly的两种主要用法：

为什么很多文档会有“只能用于数组/元组”的介绍？

可能是因为TypeScript官方文档在介绍readonly类型修饰符（readonly type modifier）时，重点强调了它在数组/元组上的新用法：

• “TypeScript 3.4 introduced a new syntax for ReadonlyArray<T>: readonly T[].”

但这并不意味着旧的readonly属性修饰符被废弃或限制！

实际上，两者共存且用途不同：

readonly属性 vs Readonly<T>：（你还可以用工具类型Readonly<T>让整个对象只读）。

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

type ROUser = Readonly<User>;
// 等价于：
// {
// readonly name: string;
// readonly age: number;
// }

总结：

interface ABC {
id: number;
readonly name: string; // 正确：属性只读（TS 1.0+支持）。
readonly address: { … }; // 正确。
}

• 这不是“仅允许数组/元组”的例外，而是readonly的原始设计用途之一。

• TypeScript中的readonly有两个上下文：

• 成员修饰符（用于interface/class属性）。

• 类型前缀修饰符（用于readonly T[]）。

两者都是官方支持的标准特性，没有冲突，也不互相排斥。

1.4 索引签名

// 使用中括号将属性名括起来。
// 当我们不关心属性名，只关心其属性名称数据类型、属性值数据类型时，我们可以使用索引签名。
interface TestArray {
[index: number]: string;
}

const myArray1: TestArray = ["a", "b", "c"];

const myArray2: TestArray = [1, 2, 3];
// 报错：不能将类型“number”分配给类型“string”。

interface TestString {
[index: string]: number;
}

const myObject1: TestString = { a: 1, b: 2, c: 3 };

const myObject2: TestString = { 1: "a", 2: "b", 3: "c" };
// 报错：不能将类型“string”分配给类型“number”。

interface TestNumberAndString1 {
name1: string;
age1: number;
[index: number]: number;
name2: string;
age2: number;
}

const myObject3: TestNumberAndString1 = {
name1: "a",
age1: 1,
name2: "b",
age2: 2,
0: 1,
1: 2,
2: 3,
8: 4,
"9": 5, // 符合“[index: number]: number;”要求，会隐式类型转换。
a: 6, // 报错：不能将类型“string”分配给类型“number”。
};

interface TestNumberAndString2 {
name1: string; // 报错：类型“string”的属性“name1”不能赋给“string”索引类型“number”。
age1: number;
[index: number | string]: number;
name2: string; // 报错：类型“string”的属性“name2”不能赋给“string”索引类型“number”。
age2: number;
}
/*
“[index: number | string]: number;”
中的
“[index: number | string]”
包含了name1、name2、age1、age2，
但name1、name2的属性值(string)不符合其要求(number)。
*/

interface TestReadonly {
readonly [index: number]: string; // 只读索引签名。
}

1.5 扩展类型(继承)

// 使用extends实现继承。
interface A {
name: string;
}

interface B {
age: number;
}

interface Dog extends A, B {
breed: string;
}

1.6 交叉类型(&)

// 使用“&”符号连接多个接口。
interface Circle {
radius: number;
}
interface Colorful {
color: string;
}

type CircleAndColorful = Circle & Colorful;

const circleAndColorful: CircleAndColorful = {
radius: 1,
color: "red",
};

function abc(cc: Circle & Colorful) {
console.log(cc.radius);
console.log(cc.color);
}

二、泛型

2.1 泛型对象类型

interface Box<Type> {
content: Type;
}
let box: Box<string> = {
content: "hello world",
};

type Box<Type> = {
content: Type;
};

// 类型别名在泛型中的另一种用法（编写其它类型的通用的辅助类型）。

type OrNull<Type> = Type | null; // 该类型定义的变量可为"Type"数据类型，也可为"null"。
type OneOrMany<Type> = Type | Type[]; // 该类型定义的变量可为"Type"数据类型，也可为"Type"数据类型数组。
type OneOrManyOrNull<Type> = OrNull<OneOrMany<Type>>; // "OrNull<OneOrMany<Type>>" => "OrNull<Type | Type[]>" => "Type | Type[] | null"。

/*
type OrNull<Type> = Type | null;
这是一种TypeScript中的泛型类型别名（Generic Type Alias）的用法。
这个类型别名的作用是：给任意类型"Type"添加"null"的可能性，从而表示“这个值可能是"Type"类型，也可能是"null"”。
使用示例：
type OrNull<T> = T | null;

let name: OrNull<string> = "Alice"; // OK。
name = null; // OK。

let age: OrNull<number> = 25; // OK。
age = null; // OK。

let user: OrNull<{ id: number }> = { id: 1 }; // OK。
user = null; // OK。
这种模式在以下场景中非常有用：
1、表示API返回的数据可能为空。
2、处理可选的中间状态（比如加载中尚未获取到数据）。
3、与后端或数据库交互时，字段可能为"null"。
类似内置工具类型：
TypeScript内置了类似的工具类型，比如：
1、NonNullable<T>：从T中移除"null"和"undefined"。
2、虽然没有内置 OrNull<T>，但你可以自己定义，如上所示。
总结：
type OrNull<Type> = Type | null;
是一个自定义的泛型类型别名，用于让任意类型"Type"可以为"null"，提高代码的可读性和类型安全性。
*/

2.2 泛型类型

function identity<Type>(arg: Type): Type {
return arg;
}

// ………………………………………………………………………………….

// 函数类型表达式声明（函数类型语法）。
let myIdentity1 = identity;
let myIdentity2: <Type>(arg: Type) => Type = identity;
// myIdentity1和myIdentity2是等价的。
// 前者使用的是TS自动类型推断，后者使用的是显示声明变量类型（通过函数类型表达式，特别的是该函数类型表达式用了泛型）。

// ………………………………………………………………………………….

// 调用签名声明（对象字面量语法）。
let myIdentity3: { <Type>(arg: Type): Type } = identity;

interface GenericIdentityFn1 {
<Type>(arg: Type): Type;
}
let myIdentity4: GenericIdentityFn1 = identity;
console.log(myIdentity4(1)); // <1>(arg: 1) => 1。
console.log(myIdentity4<number>(1)); // <number>(arg: number) => number。

interface GenericIdentityFn2<Type> {
(arg: Type): Type;
}
let myIdentity5: GenericIdentityFn2<number> = identity;
console.log(myIdentity5(1)); // (arg: number) => number。

// 注意：当类型字面量只包含调用签名时，应该使用函数类型语法而不是对象字面量语法来定义函数类型。

2.3 泛型类

class GenericNumber<NumType> {
constructor(zero: NumType, add: (x: NumType, y: NumType) => NumType) {
this.zeroValue = zero;
this.add = add;
}

zeroValue: NumType;
add: (x: NumType, y: NumType) => NumType;
}

let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);
console.log(myGenericNumber.zeroValue, myGenericNumber.add(1, 5)); // 0 6。

myGenericNumber.zeroValue = 8;
myGenericNumber.add = function (x, y) {
return x * y;
};
console.log(myGenericNumber.zeroValue, myGenericNumber.add(2, 5)); // 8 10。

2.4 泛型约束

2.4.1 基本语法

// 使用extends。

interface Lengthwise {
length: number;
}

// 限制Type类型必须包含length属性。
function loggingIdentity<Type extends Lengthwise>(arg: Type): Type {
console.log(arg.length); // 3。
return arg;
}

console.log(loggingIdentity([1, 2, 3])); // [ 1, 2, 3 ]。

2.4.2 使用类型参数(keyof)

// 使用keyof关键词。

function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key): Type[Key] {
return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };
console.log(getProperty(x, "a")); // 1。
let y = [1, 2, 3, 4, 5, 6];
console.log(getProperty(y, 2)); // 3。

在TypeScript中，keyof是一个类型操作符（type operator），用于获取某个类型的所有公共属性名（键）组成的联合类型（union type）。

基本语法：

type Keys = keyof T;

• T必须是一个对象类型（如interface、type、class等）。

• keyof T的结果是：所有属性名的字符串字面量联合类型。

举例说明：

注意事项：

实际应用场景：

总结：

• keyof T → 获取类型T的所有属性名组成的联合类型。

• 常与泛型、extends、T[K]（索引访问类型）配合使用。

• 是TypeScript类型安全和元编程能力的核心之一。

• 编译后消失，零运行时开销。

2.5 使用类类型

// 工厂函数，专门创建类的（使用了构造签名）。
function create<Type>(c: { new (): Type }): Type {
return new c();
}

/*
"c: { new (): Type }"中只包含构造签名。
注意：当类型字面量只包含构造签名时，应该使用函数类型语法而不是对象字面量语法来定义函数类型。
*/

eg：

class Animal {
numLegs: number;
constructor(numLegs: number) {
this.numLegs = numLegs;
}
}

class Bird extends Animal {
keeper: Animal = new Animal(2);
}

class House {
numBedrooms: number;
constructor(numBedrooms: number) {
this.numBedrooms = numBedrooms;
}
}

// "new (v: number): T"要与类的构造函数参数匹配。
function create<T extends Animal>(c: { new (v: number): T }, val: number): T {
return new c(val);
}

console.log(create(Bird, 6).keeper.numLegs); // 输出2。因为Bird类中"keeper: Animal = new Animal(2);"。

2.6 typeof类型操作符

2.6.1 基础语法

function f() {
return {
a: 1,
b: 2,
};
}
type F = ReturnType<typeof f>;
/*
等价于：
type F = {
a: number;
b: number;
}
*/
/*
ReturnType<typeof f>是TS内置数据类型。其中f为函数（无返回值时，返回void）。
作用：获取函数类型的返回类型。
源码：type ReturnType<T extends (…args: any) => any> = T extends (…args: any) => infer R ? R : any;
有关"infer"关键词，详情请看2.8节。
*/

// ……………………………………………………………………………………….

let d = {
x: 1,
y: 2,
};

type D = typeof d;
/*
等价于：
type D = {
x: number;
y: number;
}
*/

// ……………………………………………………………………………………….

function abc() {}

type F = typeof abc;
// 等价于：type F = () => void。

// ……………………………………………………………………………………….

type A = 'a';
// 等价于：type A = 'a'。即变量类型为A时，只能为该变量赋值'a'。

// 区别于JS的typeof，TS中的typeof并不会只返回function、object。

2.6.2 索引访问类型

interface Abc1 {
name: string;
}
type A = Abc1["name"];
// 等价于：type A = string。

type Abc2 = {
name: string;
};
type B = Abc2["name"];
// 等价于：type B = string。

// ……………………………………..

type Abc3 = {
name: string;
age: number;
};
type C = Abc3["name" | "age"];
// 等价于：type C = string | number。

// ……………………………………..

const myArray = [
{ name: "Alice", age: 18 },
{ name: "Bob", isAdult: true },
{ name: "Eve", childName: ["Alice", "Bob"] },
];

type D = (typeof myArray)[number];
// 也可写成"typeof myArray[number];"。下面的也一样，可以把小括号去掉。
/*
等价于：
type D = {
name: string;
age: number;
isAdult?: never;
childName?: never;
} | {
name: string;
isAdult: boolean;
age?: never;
childName?: never;
} | {
name: string;
childName: string[];
age?: never;
isAdult?: never;
}
*/
type E = typeof myArray;
/*
等价于：
type E = ({
name: string;
age: number;
isAdult?: never;
childName?: never;
} | {
name: string;
isAdult: boolean;
age?: never;
childName?: never;
} | {
name: string;
childName: string[];
age?: never;
isAdult?: never;
})[]
*/
type F = (typeof myArray)[number]["age"];
/*
等价于：
type F = number | undefined。
*/
type G = (typeof myArray)[2]["isAdult"];
/*
等价于：
type G = boolean | undefined。
*/
type H = (typeof myArray)[2]["name"];
/*
等价于：
type H = string。
因为数组中的所有对象都有该属性且都为string类型。
*/

2.7 条件类型

2.7.1 基础语法

// 使用三元表达式。
interface Animal {
live(): void;
}
interface Dog extends Animal {
woof(): void;
}

type Example1 = Dog extends Animal ? number : string;
// 等价于：type Example1 = number。
type Example2 = RegExp extends Animal ? number : string;
// 等价于：type Example2 = string。

eg：（可取代部分函数重载实例，简化函数）

interface Idlabel {
id: number;
}
interface Namelabel {
name: string;
}

// 函数重载，很麻烦，不宜阅读，且函数参数更多时，重载签名也会更多。
function createLabel1(id: number): Idlabel;
function createLabel1(name: string): Namelabel;
function createLabel1(nameOrId: string | number): Idlabel | Namelabel {
throw "unimplemented";
}

// 条件类型直接搞定。
type NameOrId<T extends number | string> = T extends number ? Idlabel : Namelabel;

function createLabel2<T extends number | string>(idOrName: T): NameOrId<T> {
throw "unimplemented";
}

2.7.2 条件类型约束

// 条件类型 + 泛型约束。

type MessageOf<T> = T extends { message: unknown } ? T["message"] : never;
/*
也可写成：type MessageOf<T> = T extends { message: infer P } ? P : never;
有关"infer"关键词，详情请看2.8节。
*/

interface Email {
message: string;
}
interface Dog {
bark(): void;
}

type EmailMessageContents = MessageOf<Email>;
const email: EmailMessageContents = "hello";

type DogMessageContents = MessageOf<Dog>;
const dog: DogMessageContents = "woof";
// 报错：不能将类型“"woof"”分配给类型“never”。

2.8 infer类型操作符

在TypeScript中，infer是一个用于在条件类型（Conditional Types）中“推断”并捕获类型变量的关键字。它的核心作用是：从一个复杂类型中“提取”出你关心的部分，并将其绑定到一个类型参数上，供后续使用。

简单说：infer就像类型层面的“模式匹配 + 解构赋值”。

基本语法：

type MyType<T> = T extends (infer U) ? U : never;

• infer U出现在条件类型的extends子句的右侧。

• 当T满足某种结构时，TypeScript会自动推断出U的具体类型。

• 推断出的U可以在true分支中使用。

核心用途：从类型结构中“提取”子类型。

infer的工作原理（关键点）：

实际应用场景：

常见误区：

总结：

2.9 分布式条件类型

type ToArray1<Type> = Type extends any ? Type[] : never;
type ToArray2<Type> = Type extends { message: unknown } ? Type[] : never;

interface A {
message: string;
}
interface B {
message: number;
}

type StrArrOrNumArr = ToArray1<string | number>;
// type StrArrOrNumArr = string[] | number[]。

type StrObjOrNumObj = ToArray2<A | B>;
// type StrObjOrNumObj = A[] | B[]。

问题：

为何"StrArrOrNumArr"数据类型是string[] | number[]而不是(string | number)[]？

"StrObjOrNumObj"也一样，为什么是A[] | B[]而不是(A | B)[]？

注意：

string[] | number[]与(string | number)[]是两个完全不同的类型。

解答：

因为ToArray1<T>和ToArray2<T>是一个分布式条件类型（distributive conditional type），当T是联合类型（如string | number）时，TypeScript会自动将条件类型分别应用到联合类型的每个成员上，然后再把结果union起来。

ToArray1<string | number>
// 等价于
ToArray1<string> | ToArray1<number>
// 即
string[] | number[]

而不是(string | number)[]。

详细解释：

验证实验：

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

type Result = ToArray<string | number>;
// Hover查看类型：string[] | number[]。

// 手动展开：
type Manual = ToArray<string> | ToArray<number>; // string[] | number[]。
// Result和Manual完全等价！

如何得到 (string | number)[]？

如果你不希望条件类型分布（即想把联合类型当作一个整体处理），你需要打破分布式条件类型的规则。

• 方法：用方括号[]包裹类型参数。

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

  type Result2 = ToArrayNonDistributive<string | number>;
  // 结果：(string | number)[]。

• 原理：

  • [Type] extends [any]中，Type被包裹在元组中，不再是“裸类型参数”。

  • 因此不触发分布式行为。

    （不满足条件：T被直接用在extends左侧（没有被包裹在其他结构中））。

  • 整个string | number被当作一个整体传入，结果就是(string | number)[]。

实际意义：

• 分布式条件类型是很多内置工具类型的基础，例如：

  type Exclude<T, U> = T extends U ? never : T;
  type E = Exclude<"a" | "b" | "c", "a">; // "b" | "c"。

  正是靠分布式行为，才能逐个过滤联合类型成员。

• 如果你不小心写出了分布式条件类型，但本意是整体处理，就会出现“意外拆解”的问题。

最佳实践建议：