TypeScript实用类

May 28, 2022

在 typescript 的 playground 测试，观察其编译结果
https://www.typescriptlang.org/play

namespace, declare

namespace test {
    let inside: 111;
    let outside: 222;
    export const _const = 333;
    export let _let = 444;
    export var _var = 555;
    // export outside; // 不行！！！
    // Variable 'outside' is used before being assigned
}
// 编译成如下代码
// "use strict";
// var test;
// (function (test) {
//     let inside;
//     let outside;
//     test._const = 333;
//     test._let = 444;
//     test._var = 555;
// })(test || (test = {}));
// 可以看出，export 的 const,let,var 是由 typescript 进行检查的

declare namespace jQuery {
    // declare 仅仅是环境声明，不会编译成任何代码
    export const jquery1: string;
    let jquery2: string;
}

https://jkchao.github.io/typescript-book-chinese/typings/ambient.html
https://jkchao.github.io/typescript-book-chinese/project/namespaces.html

Conditional

extends 操作符用于条件表达式中（的条件部分），仅用于 ts 判断，不返回类型
extends 也可以用于限制泛型参数
infer 通过占位匹配一个类型

SomeType extends OtherType ? TrueType : FalseType;

type test1 = "a" | "b" extends "a" | "b" | "c" ? true : false; // => true
type test2 = "a" | "b" | "c" extends "a" | "b" ? true : false; // => false
type test3 = Function extends Object ? true : false; // => true

type ElementOf<T> = T extends Array<infer E> ? E : never;
// ElementOf<ArrType>
// 相当于
// ArrType[number]

Utility

阅读https://www.typescriptlang.org/docs/的 Handbook 部分

快速回顾

interface P {
    name: string;
    age: number;
    alive?: boolean;
}

type a = P["name"]; // string
type b = P["age"]; // number
type c = P["alive"]; // boolean
type d = keyof P; // "name" | "age" | "alive"
type e = P[keyof P]; // string | number | boolean
type f = { [K in keyof P]: P[K] }; // { name: string; age: number; alive?: boolean; }
type g = { [K in keyof P]?: P[K] }; // { name?: string; age?: number; alive?: boolean; }
type h = { [K in keyof P]+?: P[K] }; // { name?: string; age?: number; alive?: boolean; }
type i = { [K in keyof P]-?: P[K] }; // { name: string; age: number; alive: boolean; }

type anyKey = keyof any; //  string | number | symbol
type anyFunction = (...args: any[]) => any;
type anyConstructor = new (...args: any[]) => any;
type test1 = anyConstructor extends anyFunction ? true : false; // false
type test2 = anyFunction extends anyConstructor ? true : false; // false

Utility Types

// 这里加上 $ 前缀防止与自带的类型冲突
type $Awaited<T> = 略;
type $Partial<T> = { [P in keyof T]?: T[P] };
type $Required<T> = { [P in keyof T]-?: T[P] }; // 这里的 - 表示移除 ? 标识，也就是全部设置为必选项。
type $Readonly<T> = { readonly [P in keyof T]: T[P] };
type $Record<K extends keyof any, T> = { [P in K]: T };
type $Pick<T, K extends keyof T> = { [P in K]: T[P] };
type $Exclude<T, U> = T extends U ? never : T;
type $Omit<T, K extends keyof any> = $Pick<T, $Exclude<keyof T, K>>;
type $Extract<T, U> = T extends U ? T : never;
type $NonNullable<T> = T extends null | undefined ? never : T;
type $NonNullable<T> = T & {};
type $Parameters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : never; // infer P 表示推断出参数的类型为 P (这里当然是所有参数构成的具名元组)
type $ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any
    ? P
    : never;
type $ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any; // infer R 表示推断出函数的返回类型为 R
type $InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any;
type $ThisParameterType<T> = T extends (this: infer U, ...args: any[]) => any ? U : unknown;
type $OmitThisParameter<T> =
    unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;
interface $ThisType<T> {}

// 配合模版字面量类型使用，intrinsic 表示是内部实现（通过 toLowerCase 和 toUpperCase 实现）
type Uppercase<S extends string> = intrinsic; // 字符串转为全大写
type Lowercase<S extends string> = intrinsic; // 字符串转为全小写
type Capitalize<S extends string> = intrinsic; // 字符串第一个字符转为大写
type Uncapitalize<S extends string> = intrinsic; // 字符串第一个字符转为小写

拓展阅读

https://www.typescriptlang.org/docs/handbook/utility-types.html
https://github.com/zhongsp/TypeScript/blob/dev/zh/reference/utility-types.md
https://jkchao.github.io/typescript-book-chinese/typings/neverType.html
https://jkchao.github.io/typescript-book-chinese/tips/infer.html
https://github.com/sindresorhus/type-fest
https://learntypescript.dev/

←Back to home