這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前期準備 本篇文章的編寫目的是為了提升TS類型的書寫質量，高質量的類型可以提高項目的可維護性並避免一些潛在的漏洞; 在學習本篇之前需要有一定的TS基礎知識，在此基礎上可以更好的完成各種類型的挑戰，編寫出屬於自己的類型工具； 這裡推薦我之前 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
前期準備
本篇文章的編寫目的是為了提升TS類型的書寫質量，高質量的類型可以提高項目的可維護性並避免一些潛在的漏洞;
在學習本篇之前需要有一定的TS基礎知識，在此基礎上可以更好的完成各種類型的挑戰，編寫出屬於自己的類型工具；
這裡推薦我之前梳理的基礎知識點 一份夠用的TS常用特性總結 或 TS中文文檔 ;
目前只完成了easy類型和部分medium類型的訓練，後續會持續補充;
easy
readonly
實現Readonly，接收一個泛型參數，並返回一個完全一樣的類型，只是所有屬性都會被readonly所修飾。
type MyReadonly<T> = {
readonly [P in keyof T] : T[P]
}
interface Todo {
title: string;
description: string;
}
const todoObj: MyReadonly<Todo> = {
title: "Hey",
description: "foobar",
};
console.log(todoObj.title)
todoObj.description = "barFoo"; // Error: cannot reassign a readonly property
first-of-array
實現First，他接受一個數組 T 並返回它的第一個元素類型
type First<T extends any[]> = T extends [] ? never : T[0]; type arr1 = ['a', 'b', 'c'] type arr2 = [3, 2, 1] type head1 = First<arr1> // expected to be 'a' type head2 = First<arr2> // expected to be 3
tuple-to-object
實現TupleToObject，傳入元組類型，將元組類型轉換為對象類型，這個對象類型的鍵/值都是從元組中遍歷出來。
type TupleToObject<T extends readonly any[]> = {
[P in T[number]]: P;
};
const tuple = ["tesla", "model 3", "model X", "model Y"] as const;
type result = TupleToObject<typeof tuple>; // expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}
length of tuple
創建一個通用的Length，接受一個readonly的數組，返回這個數組的長度。
type Length<T extends readonly unknown[]> = T["length"]; type tesla = ["tesla", "model 3", "model X", "model Y"]; type spaceX = [ "FALCON 9", "FALCON HEAVY", "DRAGON", "STARSHIP", "HUMAN SPACEFLIGHT" ]; type teslaLength = Length<tesla>; // expected 4 type spaceXLength = Length<spaceX>; // expected 5
Exclude
從聯合類型T中排除U的類型成員，來構造一個新的類型。
type MyExclude<T, U> = T extends U ? never : T; type Result = MyExclude<"a" | "b" | "c", "a">; // 'b' | 'c'
Awaited
假如我們有一個 Promise 對象，這個 Promise 對象會返回一個類型。在 TS 中，我們用 Promise 中的 T 來描述這個 Promise 返回的類型。請你實現一個類型，可以獲取這個類型。 例如：Promise，請你返回 ExampleType 類型。
type MyAwaited<T> = T extends PromiseLike<infer R> ? MyAwaited<R> : T type ExampleType = Promise<string> type Results = MyAwaited<ExampleType> // string
IF
實現一個 IF 類型，它接收一個條件類型 C ，一個判斷為真時的返回類型 T ，以及一個判斷為假時的返回類型 F。 C 只能是 true 或者 false， T 和 F 可以是任意類型。
type If<C extends boolean, T, F> = C extends true ? T : F; type A = If<true, "a", "b">; // expected to be 'a' type B = If<false, "a", "b">; // expected to be 'b'
Concat
在類型系統里實現 JavaScript 內置的 Array.concat 方法，這個類型接受兩個參數，返回的新數組類型應該按照輸入參數從左到右的順序合併為一個新的數組。
type Concat<T extends any[], U extends any[]> = [...T, ...U]; type ResultConcat = Concat<[1], [2]>; // expected to be [1, 2]
Include
實現 Array.includes 方法，這個類型接受兩個參數，返回的類型要麼是 true 要麼是 false。
type Includes<T extends readonly any[], U> = U extends T[number] ? true : false type isPillarMen = Includes<['Kars', 'Esidisi', 'Wamuu', 'Santana'], 'Esidisi'> // expected to be `false`
Push
實現通用的Array.push類型。
type Push<T extends readonly unknown[], U> = [...T, U]; type Resulted = Push<[1, 2], "3">; // [1, 2, '3']
Unshift
實現類型 Array.unshift類型。
type Unshift<T extends readonly unknown[], U> = [U, ...T]; type UnshiftList = Unshift<[1, 2], 0>; // [0, 1, 2,]
Parameters
實現內置的 Parameters 類型。
type MyParameters<T extends (...args: any[]) => any> = T extends (
...args: infer U
) => any
? U
: never;
const foo = (arg1: string, arg2: number): void => {};
type FunctionParamsType = MyParameters<typeof foo>; // [arg1: string, arg2: number]
edium
ReturnType
不使用 ReturnType 實現 TypeScript 的 ReturnType 泛型。
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
const fn = (v: boolean) => {
if (v) return 1;
else return 2;
};
type a = MyReturnType<typeof fn>; // 應推導出 "1 | 2"
Omit
不使用 Omit 實現 TypeScript 的 Omit<T, K> 泛型。Omit 會創建一個省略 K 中欄位的 T 對象。
type MyOmit<T, K extends keyof any> = {
[key in Exclude<keyof T, K>]: T[key];
};
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = MyOmit<Todo, "description" | "title">;
const todo: TodoPreview = {
completed: false,
};
ReadOnly2
實現一個通用MyReadonly2<T, K>，它帶有兩種類型的參數T和K。 K指定應設置為Readonly的T的屬性集。如果未提供K，則應使所有屬性都變為只讀，就像普通的Readonly一樣。
type MyReadonly2<T, K extends keyof T = keyof T> = {
readonly [P in K]: T[P];
} & {
[P in Exclude<keyof T, K>]: T[P];
};
interface Todo {
title: string;
description: string;
completed: boolean;
}
const todos: MyReadonly2<Todo, "title" | "description"> = {
title: "Hey",
description: "foobar",
completed: false,
};
todos.title = "Hello"; // Error: cannot reassign a readonly property
todos.description = "barFoo"; // Error: cannot reassign a readonly property
todos.completed = true; // OK
DeepReadonly
實現一個通用的DeepReadonly，它將對象的每個參數及其子對象遞歸地設為只讀。
type DeepReadonly<T> = T extends Function
? T
: {
readonly [K in keyof T]: K extends Object ? DeepReadonly<T[K]> : T[K];
};
type X = {
x: {
a: 1;
b: "hi";
};
y: "hey";
};
type Expected = {
readonly x: {
readonly a: 1;
readonly b: "hi";
};
readonly y: "hey";
};
type Todo = DeepReadonly<X>; // should be same as `Expected`
TupleToUnion
實現泛型TupleToUnion，它返回元組所有值的合集。
type TupleToUnion<T extends unknown[]> = T[number] type Arr = ['1', '2', '3'] type Test = TupleToUnion<Arr> // expected to be '1' | '2' | '3'
LastOfArray
實現一個Last，它接受一個數組T並返回其最後一個元素的類型。
type Last<T extends unknown[]> = T extends [...unknown[], infer R] ? R : never type arr1 = ['a', 'b', 'c'] type arr2 = [3, 2, 1] type tail1 = Last<arr1> // expected to be 'c' type tail2 = Last<arr2> // expected to be 1
https://juejin.cn/post/7193917621069152311
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
