Merge 2022 summer doc TS complex types

Author: abmfy

docs/languages/typescript/type.md

@@ -0,0 +1,234 @@
+# TypeScript 的复杂类型
+
+## 泛型
+
+与其他一些支持泛型的语言不同，TypeScript 的泛型并不会为每一种类型生成一份代码，只是检查是否每一种可能的类型都可以兼容，在运行中仍然使用同一份代码。
+
+可以在声明函数、类、接口和类型时声明泛型：
+
+```typescript
+function identity<Type>(arg: Type): Type {
+    return arg;
+}
+
+const identity = <Type>(arg: Type): Type => arg;
+
+class GenericNumber<NumType> {
+    zeroValue: NumType;
+    add: (x: NumType, y: NumType) => NumType;
+}
+
+interface Request<ReqBody, ResBody> {
+    request: ReqBody;
+    response: ResBody;
+}
+
+type MaybeArray<Value> = Value | Value[];
+```
+
+可以通过以下方式使用前面定义的泛型：
+
+```typescript
+identity<number>(1);
+
+const num = new GenericNumber<number>();
+
+const req: Request<{ action: string }, { result: string }> = {
+    request: {
+        action: 'update system',
+    },
+    response: {
+        result: 'succeeded',
+    },
+};
+
+let nums: MaybeArray<number> = 0;
+nums = [0, 1, 2];
+```
+
+可以为泛型添加限制和默认值，也可以由编译器推断泛型类型：
+
+```typescript
+function identity<Type = number>(arg: Type): Type {
+    return arg;
+}
+
+identity(1);
+
+function identity<Type extends { data: string }>(arg: Type): string {
+    return arg.data;
+}
+
+identity({ data: '' });  // inferred Type = { data: string }
+```
+
+需要注意的是泛型只能使用类型作为参数，如果需要某个值的类型，可以使用 `typeof`。
+
+## `keyof` 和 `typeof` 关键字
+
+`typeof` 除了可以作为运算符获取变量类型以外，用作类型标注时，可以获取变量的具体类型（而非作为运算符时的有限种类）：
+
+```typescript
+const someObj = {
+    foo: 1,
+    bar: '2',
+};
+
+// inferred arg: { foo: number; bar: string }
+function f(arg: typeof someObj) {
+    /* do something */
+}
+```
+
+而 `keyof` 可以获取**类型**的键的类型（作为枚举）：
+
+```typescript
+const someObj = {
+    foo: 1,
+    bar: '2',
+};
+
+// inferred arg: 'foo' | 'bar'
+function f(arg: keyof typeof someObj) {
+    /* do something */
+}
+```
+
+但 TypeScript 的一个缺陷是，使用 `for...in` 语法时并不会自动推断为 `keyof`，例如：
+
+```typescript
+const someObj = {
+    foo: 1,
+    bar: '2',
+};
+
+for (const key in someObj) {
+    // inferred key: string, value: any
+    const value = someObj[key];
+}
+```
+
+## 访问类型内部
+
+通过这种方式可以获取一个类型中的部分内容：
+
+```typescript
+interface SomeComplexType {
+    foo: {
+        bar: string;
+    }[];
+}
+
+type Foo = SomeComplexType['foo']; // Foo = { bar: string }[]
+// 以下两种等价
+type Bar = Foo[number];            // Bar = { bar: string }
+type Bar = Foo[0];                 // Bar = { bar: string }
+```
+
+## 条件类型
+
+可以使用类似三目运算符的语法来编写条件类型：
+
+```typescript
+interface Animal {
+    live(): void;
+}
+
+interface Dog extends Animal {
+    woof(): void;
+}
+ 
+type Example1 = Dog extends Animal ? number : string;    // Example1 = number
+ 
+type Example2 = RegExp extends Animal ? number : string; // Example2 = string
+```
+
+这种语法与泛型结合尤为有用：
+
+```typescript
+type MessageOf<T> = T extends { message: any } ? T['message'] : unknown;
+
+interface Email {
+    message: string;
+}
+ 
+interface Dog {
+    bark(): void;
+}
+ 
+type EmailMessageContents = MessageOf<Email>;  // EmailMessageContents = string
+ 
+type DogMessageContents = MessageOf<Dog>;      // DogMessageContents = unknown
+```
+
+## 只读、可选
+
+通过以下方式标记某一属性为只读或可选：
+
+```typescript
+interface SomeType {
+    readonly readonlyProperty: string;
+    optionalProperty?: string;
+}
+```
+
+需要注意的是，这些修饰只会在编译时检查是否违反，在编译后运行时你仍然可能打破这些限制，在使用 JavaScript 调用 TypeScript 库时尤其可能存在。
+
+## 实用内置类型
+
+TypeScript 内置了多种实用类型，可以帮助我们更简洁地标注一些复杂类型，以下仅做部分展示：
+
+```typescript
+interface Data {
+    key1?: string;
+    key2: string;
+}
+
+// 以下相同名称的类型内容相同
+
+// 全部属性变为可选
+type PartialData = Partial<Data>;
+type PartialData = {
+    key1?: string;
+    key2?: string;
+};
+
+// 全部属性变为必选
+type FullData = Required<PartialData>;
+type FullData = {
+    key1: string;
+    key2: string;
+};
+
+// 全部属性变为只读
+type ReadonlyData = Readonly<Data>;
+type ReadonlyData = {
+    readonly key1?: string;
+    readonly key2: string;
+};
+
+// 特定类型之间的映射
+type DataDict = Record<string, Data>;
+type DataDict = {
+    // 这种语法表示任意 string 的值 key 都可以作为键
+    [key: string]: Data;
+};
+
+// 选择部分属性
+type DataKey1 = Pick<Data, 'key1'>;
+// 忽略部分属性
+type DataKey1 = Omit<Data, 'key2'>;
+type DataKey1 = {
+    key1?: string;
+};
+
+function f(a: number, b: string, c: number[]): number {
+    return 0;
+}
+// 获取参数列表
+type Args = Parameters<typeof f>;
+type Args = [a: number, b: string, c: number[]];
+
+type Ret = ReturnType<typeof f>;
+type Ret = number;
+```

mkdocs.yml

@@ -125,6 +125,7 @@ nav:
       - TypeScript 的变量与变量类型: languages/typescript/variable.md
       - TypeScript 的函数: languages/typescript/function.md
       - TypeScript 的面向对象: languages/typescript/oop.md
+      - TypeScript 的复杂类型: languages/typescript/type.md
     - Rust 语言基础: 
       - languages/rust/index.md
       - Rust 入门的一点经验: languages/rust/whyrust.md