typescript 学习笔记

typescript
Updated: 2025-11-06

模式提取 🔗

推导值类型 🔗

1
2
3

type p = Promise<"hello">;
type MyGetValueResult<P> = P extends Promise<infer S> ? S : never;
type pr = MyGetValueResult<p>;

推导数组元素 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// First
type f = [1, 2, 3];
type MyGetFirst<P extends unknown[]> = P extends [infer F, ...unknown[]]
    ? F
    : never;
type f1 = MyGetFirst<f>;

// Last
type l = [1, 2, 3];
type MyGetLast<P extends unknown[]> = P extends [...unknown[], infer F]
    ? F
    : never;
type f2 = MyGetLast<f>;

数组中的pop和shift方法 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// pop
type MyPop<P extends unknown[]> = P extends [...infer F, unknown]
    ? F
    : never;
type p3 = MyPop<l>

// shift
type MyShift<P extends unknown[]> = P extends [unknown, ...infer F]
    ? F
    : never;
type p4 = MyShift<l>

字符串startWiths、replace、trim方法 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// startWiths
type MyStartWiths<S extends string, P extends string> = S extends `${P}${string}` ? true : false

type p5 = MyStartWiths<"hello world", "hel">

// replace
type MyReplace<S extends string, F extends string, T extends string> = S extends `${infer Start}${F}${infer End}` ? `${Start}${T}${End}` : S

type p6 = MyReplace<"hello world", "ll", "ooo">

// trim
type TrimLeft<Str extends string> = Str extends `${
    | " "
    | "\n"
    | "\t"}${infer Rest}`
    ? TrimLeft<Rest>
    : Str;
type TrimRight<Str extends string> = Str extends `${infer Rest}${
    | " "
    | "\n"
    | "\t"}`
    ? TrimRight<Rest>
    : Str;
type MyTrim<Str extends string> = TrimLeft<TrimRight<Str>>;

type AB = MyTrim<"   boss   ">;

推导函数参数 🔗

1
2
3

// get param
type MyGetParam<F extends Function> = F extends (...args: infer Arg) => unknown ? Arg : never;
type p7 = MyGetParam<(name: string, age: number) => {}>

推导函数返回值 🔗

1
2
3

// get return type
type MyGetReturn<F extends Function> = F extends () => infer T ? T : never;
type p8 = MyGetReturn<() => string[]>

推导构造函数 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// get Constructor type
type Person = {
    name: string
}
type PersonContructor = {
    new(name: string): Person;
}

type MyGetContrucstorType<T extends new(...args: any) => any> = T extends new(...args: any) => infer S ? S : never;
type MyGetContrucstorParamsType<T extends new(...args: any) => any> = T extends new(...args: infer S) => any ? S : never;

type p9 = MyGetContrucstorType<PersonContructor>
type p10 = MyGetContrucstorParamsType<PersonContructor>

提取复合类型中某一个属性的类型 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// get props ref
type MyGetPropsRefType<Props extends {}> = 
    'ref' extends keyof Props 
        ? 
            Props extends {ref ?: infer P | undefined } 
                ? P : never
        :   never

type p11 = MyGetPropsRefType<{ref: number}>
type p12 = MyGetPropsRefType<{ref: undefined}>

重新构造 🔗

push 和 unshift 🔗

对于已有的数组类型进行添加元素

1
2
3
4
5
6
7

// push
type MyPush<Arr extends unknown[], P> = [...Arr, P]
type p13 = MyPush<[1,2,3], 4>

// unshift
type MyUnshift<Arr extends unknown[], P> = [P, ...Arr]
type p14 = MyUnshift<[1,2,3], 4>

zip 🔗

1
2
3
4
5
6
7
8

type MyZip<T extends unknown[], S extends unknown[]> = 
  T extends [infer T1, ...infer T2] ?
      S extends [infer S1, ...infer S2] ?
          [[T1, S1], MyZip<T2, S2>]
          : []
      :[]

type p15 = MyZip<["a", "b", "c"], [1, 2, 3]>

字符串Uppercase、camelCase

1
2
3
4
5
6
7
8

// uppercase
type MyUpperCase<S extends string> = S extends `${infer F}${infer Rest}` ? `${Uppercase<F>}${Rest}` : S
type p16 = MyUpperCase<"hello">

// camelCase
type MyCamelCase<S extends string> = S extends `${infer Left}_${infer R}${infer Rest}` ? `${Left}${Uppercase<R>}${MyCamelCase<Rest>}` : S

type p17 = MyCamelCase<'hello_hello_hello_world'>

删除部分字符串 🔗

1
2
3
4

// dropsubstr
type MyDropStr<S extends string, D extends string> = S extends `${infer Left}${D}${infer L}` ? MyDropStr<`${Left}${L}`, D> : S

type p18 = MyDropStr<"hello_hello_hello_world", "l">

函数参数添加其他参数 🔗

1
2
3
4

// append function args
type MyAppendArgs<F extends Function, Arg> = F extends (...args: infer Args) => infer ReturnType ? (...args: [...Args, Arg]) => ReturnType : never;

type p19 = MyAppendArgs<(a: number, b: string) => any, boolean>

索引类型 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// index object
type obj = {
    readonly name: string;
    age?: number;
    gender: boolean;
}

type MyMapping<Obj extends object> = {
    [K in keyof Obj]: [Obj[K], K]
}

type p20 = MyMapping<{ a: 1, b: 2 }>

类型对象key转大写 🔗

1
2
3
4
5

// uppercase key
type MyUpperCaseKey<Obj extends object> = {
    [K in keyof Obj as Uppercase<K & string>]: Obj[K]
}
type p21 = MyUpperCaseKey<{ acc: 1, b: 2 }>

改变类型readonly、partial 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// readonly
type MyReadonly<T> = {
    readonly [K in keyof T] : T[K]
}
type p22 = MyReadonly<obj>

// partial

type MyPartial<T> = {
    [K in keyof T] ?: T[K]
}
type p23 = MyPartial<obj>

修改部分类型的只读、必填 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// mutable
type MyMutable<T> = {
    -readonly [K in keyof T] ?: T[K]
}
type p24 = MyMutable<obj>

// required
type MyRequired<T> = {
    [K in keyof T] -?: T[K]
}
type p25 = MyRequired<obj>

过滤出索引类型中指定的类型 🔗

1
2
3
4
5

// filterValueType
type MyFilterByType<T extends MyRecord<string, any>, ValueType> = {
    [K in keyof T as T[K] extends ValueType ? K : never] : T[K]
}
type p26 = MyFilterByType<obj, string>

推断出Promise的返回类型 🔗

1
2
3
4
5

type MyPromiseValueType<T> = T extends Promise<infer S>
    ? MyPromiseValueType<S>
    : T;

type p27 = MyPromiseValueType<Promise<Promise<Promise<string>>>>;

数组类型反转 🔗

1
2
3
4
5
6
7

type MyReverse<T extends unknown[]> = T extends [infer First, ...infer Rest]
    ? [...MyReverse<Rest>, First]
    : [];
type p28 = MyReverse<[1, 2, 3, 4, 5]>;

type IsEqual<A, B> = (A extends B ? true : false) &
    (B extends A ? true : false);

递归判断数组中是否含有指定类型 🔗

1
2
3
4
5
6
7
8

type MyInclude<T extends unknown[], S> = T extends [infer First, ...infer Rest]
    ? IsEqual<S, First> extends true
        ? true
        : MyInclude<Rest, S>
    : false;

type p29 = MyInclude<[1, 2, 3, 4], 4>;
type p30 = MyInclude<[1, 2, 3, 4], 5>;

删除数组类型中某一个元素 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

type MyRemoveItem<
    T extends unknown[],
    S,
    R extends unknown[] = []
> = T extends [infer First, ...infer Rest]
    ? IsEqual<S, First> extends true
        ? MyRemoveItem<Rest, S, R>
        : MyRemoveItem<Rest, S, [...R, First]>
    : R;

type p31 = MyRemoveItem<[1, 2, 3, 4], 3>;

创建一个指定长度的数组类型 🔗

1
2
3
4
5
6
7

type MyBuildArray<
    L extends number,
    El extends unknown = unknown,
    Result extends unknown[] = []
> = Result["length"] extends L ? Result : MyBuildArray<L, El, [...Result, El]>;

type p32 = MyBuildArray<6, 1>;

替换字符串类型中指定类型 🔗

1
2
3
4
5
6
7
8
9

type MyReplaceAll<
    Str extends string,
    From extends string,
    To extends string
> = Str extends `${infer Prefix}${From}${infer Suffix}`
    ? `${Prefix}${To}${MyReplaceAll<Suffix, From, To>}`
    : Str;

type p33 = MyReplaceAll<"hello_world", "l", "a">;

字符串类型转换成元组类型 🔗

1
2
3
4
5
6

type MyStrToUnion<Str extends string> =
    Str extends `${infer First}${infer Rest}`
        ? `${First}` | `${MyStrToUnion<Rest>}`
        : never;

type p34 = MyStrToUnion<"hello">;

递归反转字符串类型 🔗

1
2
3
4
5
6
7
8

type MyReverseStr<
    Str extends string,
    R extends string = ""
> = Str extends `${infer First}${infer Rest}`
    ? MyReverseStr<Rest, `${First}${R}`>
    : R;

type p35 = MyReverseStr<"hello">;

嵌套对象类型转换成readonly 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

type MyDeepReadonly<Obj extends Record<string, any>> = Obj extends any
    ? {
          readonly [k in keyof Obj]: Obj[k] extends object
              ? Obj[k] extends Function
                  ? Obj[k]
                  : MyDeepReadonly<Obj[k]>
              : Obj[k];
      }
    : never;

type obj1 = {
    a: {
        b: {
            c: {
                f: () => "dong";
                d: {
                    e: {
                        guang: string;
                    };
                };
            };
        };
    };
};

type p36 = MyDeepReadonly<obj1>;

类型中的加法 🔗

1
2
3
4
5

type MyAdd<A extends number, B extends number> = [
    ...MyBuildArray<A>,
    ...MyBuildArray<B>
]["length"];
type p37 = MyAdd<12, 34>;

类型中的减法 🔗

1
2
3
4
5
6
7
8

// substract
type MySubStract<A extends number, B extends number> = MyBuildArray<A> extends [
    ...MyBuildArray<B>,
    ...infer Rest
]
    ? Rest["length"]
    : never;
type p38 = MySubStract<34, 12>;

类型中的乘法 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// mutiply
type MyMutiply<
    A extends number,
    B extends number,
    Result extends unknown[] = []
> = B extends 0
    ? Result["length"]
    : MyMutiply<A, MySubStract<B, 1>, [...MyBuildArray<A>, ...Result]>;

type p39 = MyMutiply<2, 5>;

类型中的除法 🔗

1
2
3
4
5
6
7
8
9

type MyDivide<
    Num1 extends number,
    Num2 extends number,
    Count extends unknown[] = []
> = Num1 extends 0
    ? Count["length"]
    : MyDivide<MySubStract<Num1, Num2>, Num2, [unknown, ...Count]>;

type p40 = MyDivide<20, 5>;

字符串长度 🔗

1
2
3
4
5
6
7
8

type MyStrLength<
    S extends string,
    Count extends unknown[] = []
> = S extends `${string}${infer Rest}`
    ? MyStrLength<Rest, [unknown, ...Count]>
    : Count["length"];

type p41 = MyStrLength<"hello">;

比较两个数的大小 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

type MyGreaterThen<
    Num1 extends number,
    Num2 extends number,
    Count extends unknown[] = []
> = Num1 extends Num2
    ? false
    : Count["length"] extends Num2
    ? true
    : Count["length"] extends Num1
    ? false
    : MyGreaterThen<Num1, Num2, [unknown, ...Count]>;


type p42 = MyGreaterThen<20, 21>
type p43 = MyGreaterThen<20, 19>

联合类型中指定字符大写 🔗

1
2
3
4

// union
type a1 = "a" | "b" | "c";
type MyUpperCaseA<T extends string> = T extends "a" ? MyUpperCase<T> : T;
type p44 = MyUpperCaseA<a1>;

删除置顶位置字符串，并且指定字符大写 🔗

1
2
3
4
5
6
7

// camelCase
type MyCamelCaseNext<T extends string> =
    T extends `${infer L}_${infer R}${infer Rest}`
        ? `${L}${Uppercase<R>}${MyCamelCaseNext<Rest>}`
        : T;

type p45 = MyCamelCaseNext<"aa_bb_cc">;

数组元素中每个元素都进行处理 🔗

1
2
3
4
5
6
7
8

type MyCamelCaseArr<Arr extends unknown[]> = Arr extends [
    infer Item,
    ...infer Rest
]
    ? [MyCamelCaseNext<Item & string>, ...MyCamelCaseArr<Rest>]
    : [];

type p46 = MyCamelCaseArr<['aa_aa_aa', 'bb_bb_bb', 'cc_cc_cc']>

联合类型处理

1

type p47 = MyCamelCaseNext<'aa_aa_aa' | 'bb_bb_bb' | 'cc_cc_cc'>

是否是联合类型 🔗

1
2
3
4
5
6

type IsUnion<A, B = A> = A extends A ? 
    [B] extends [A] ? false : true
    : never

type p48 = IsUnion<'aa_aa_aa' | 'bb_bb_bb' | 'cc_cc_cc'>
type p49 = IsUnion<'aa'>

数组转联合类型 🔗

1

type MyUnionTest = ['aaa', 'bbb'][number]

1
2
3
4
5
6

// 数组转Union
type MyUnionTest = ['aaa', 'bbb'][number]

type MyBEM<Block extends string, Element extends string[], Modifiers extends string[]> = `${Block}__${Element[number]}--${Modifiers[number]}`

type bemResult = MyBEM<'hello', ['aaa', 'bbb'], ['warning', 'success']>;

联合类型两两组合问题 🔗

1
2
3
4
5
6
7
8

// combination
type Combination<A extends string, B extends string> = A | B | `${A}${B}`| `${B}${A}`

type p50 = Combination<'a', 'b'>

type MyAllCombination<A extends string, B extends string = A> = A extends A ? Combination<A, MyAllCombination<Exclude<B, A>>> : never;

type p51 = MyAllCombination<'a'| 'b'|'c'>

IsAny 🔗

1
2
3

// is any
type MyIsAny<T> = 'a' extends ('b' & T) ? true : false
type p52 = MyIsAny<any>

IsEqual 🔗

1
2
3
4
5

// isEqual
type MyIsEqual<A, B> =  (<T>() => T extends A ? 1 : 2) extends (<T>() => T extends B ? 1 : 2) ? true : false

type p53 = MyIsEqual<'a', 'a'>
type p54 = MyIsEqual<'a', any>

IsNever 🔗

1
2
3
4

// isNever
type MyIsNever<T> = [T] extends [never] ? true : false;
type p55 = MyIsNever<never>
type p56 = MyIsNever<'123'>

IsTuple 🔗

1
2
3
4
5

// isTuple
type MyNotEqual<A, B> = MyIsEqual<A, B> extends true ? false : true
type MyIsTuple<T> = T extends readonly [...params: infer Eles] ? MyNotEqual<Eles['length'], number> :false
type p57 = MyIsTuple<number[]>
type p58 = MyIsTuple<[1,2,3]>

Tags

typescript