請解釋這個涉及 generics 和類型別名的 typescript 語法

Question

我正在嘗試學習一些教程，但在理解 typescript 語法時遇到了困難。 請提供對以下 typescript 語法的解釋

1

type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;

我在 typescript 手冊的 generics 章節中找不到一個示例，該示例描述了上述語句的<T, U>部分之類的內容-這是什么意思？ 這是否意味着輸入T而U是 output？

我理解 Partial 但似乎無法理解Partial<{ [Key in keyof T]: U }>請解釋一下這是什么意思

2

type Validation<T, U> = (fields: T) => ValidationResult<T, U>; 

上述語句是否為接受類型T並返回ValidationResult<T, U>的 function 定義了類型別名？

U代表什么？

3

const hasLength = <T>(len: number, input: string | Array<T>) =>
input.length >= len;

const hasUserName = (input: string) =>
hasLength(1, input) ? true : "Name is required.";

<T>(len: number, input: string | Array<T>)代表什么？

上述聲明中的前導<T>是什么意思？

你能解釋一下上述兩個聲明的含義嗎？

上面兩個聲明const hasLength和const hasUserName是什么關系？

4

const fieldValues = {
    name: "Test User",
    level: 10,
    description: "Test Description"
};

type FieldValues = typeof fieldValues;

const validationRules = [
    ({ name }: FieldValues) => ({
        name: hasUserName(name)
    }),
    ({ description }: FieldValues) => ({
        description: hasValidDescription(description)
    })
];

我了解const fieldValues分配有 object 文字，因此fieldValues值將是

{
    name: "Test User",
    level: 10,
    description: "Test Description"
}

現在，行type FieldValues = typeof fieldValues;是什么？ 意思是？

在上面的聲明中使用typeof有什么意義呢？

還要解釋該語句后面的代碼塊

蒂亞！

Answer 1

對於初學者，“泛型”也稱為“參數多態性”，第一個類型參數通常稱為“T”（用於 Type），任何附加參數只是按字母順序排列的下一個字符（T、U、V...）。

1) 部分類型

部分類型允許您構造一個新類型，具有 T 的所有屬性，但它們是可選的並且可能會丟失。

type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;

這意味着，“我從 T 創建了一個具有類型 U 的所有屬性的類型”。 例如ValidationResult<MyType, string>將包含來自“MyType”的所有字符串屬性。

注意： [name-expression]: type稱為“計算屬性”。

interface Test{
    foo: string,
    bar: number
}

type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;

let v: Baz<Test, string> = { foo: 't', bar: 1 }; // Error! bar is not a string!

2) Function 型

type Validation<T, U> = (fields: T) => ValidationResult<T, U>; 

“驗證”是一個 function 類型，它采用某種類型 T 並返回一個部分類型，該類型包含 T 中具有類型 U 的所有屬性。

所以返回類型就是我們之前定義的，但是這個 function 只是給了我們這些 ValidationResults 之一。

3) 聯合類型和匿名函數

const hasLength = <T>(len: number, input: string | Array<T>) =>
input.length >= len;

所以這是一個匿名的 function（或“lambda”）：

(len: number, input:string) => input.length >= len

這是從（數字，字符串）到 boolean 的 function。 <T>是一個類型參數，所以它是一個通用的 lambda！

<T>(n: number, T: x) => doSomething...

一種形式的string | number | T string | number | T string | number | T是一個聯合類型，即它可以采用每個列出的類型中允許的任何值：'abc' 或 123 或任何 T 是...

所以'hasLength'是一個（lambda）function，它將'len'與Ts參數的字符串或數組的長度進行比較。

const hasUserName = (input: string) =>
hasLength(1, input) ? true : "Name is required.";

這只是使用上面的 function 並將字符串作為參數傳遞。 您也可以致電：

hasLength(1, ['a', 'b'])

那是'hasLength of number，Array'。

4) 匿名類型

所以就像你說的，我們為我們的常量分配了一個 object 文字。 但是常量的類型是什么？ 最通用的可能是“對象”，但這根本沒有用！

“typeof”運算符為我們提供了 object 的類型。 即使我們從未定義過接口或 class 並且我們沒有給這個 object 命名，我們已經將它的（未命名）類型放入變量“FieldValues”中。 然后我們可以使用該類型：

const validationRules = [
    ({ name }: FieldValues) => ({
        name: hasUserName(name)
    }),
    ({ description }: FieldValues) => ({
        description: hasValidDescription(description)
    })
];

這是一個包含函數的數組（參見[] ）。 function 使用一種公認的奇怪語法來表示，它需要一個名為“name”的“FieldValues”類型的 object，它返回一個 object。

Answer 2

1

type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;

在這個例子中U是一個泛型 - 所以它代表任何類型。 使用類型時定義這些 generics：

type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;

type TestType = {
    a: string,
    b: number,
};

const x: ValidationResult<TestType, string> = {
    a: 'test1',
    b: 'test2',
};

const y: ValidationResult<TestType, string> = {
    a: 'test1',
    // @ts-expect-error
    c: 'test3',
};

游樂場鏈接。 因此類型ValidationResult定義了一個類型，該類型將具有來自類型T的任意數量的鍵，並且這些鍵將具有類型U的值，無論定義為什么。

2

type Validation<T, U> = (fields: T) => ValidationResult<T, U>;

你說的對; Validation是 function 的一個類型，它接受一些T類型的值，並返回一個ValidationResult<T, U> ； 本例中的U定義如上，當使用類型時：

type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;

type TestType = {
    a: string,
    b: number,
};

type Validation<T, U> = (fields: T) => ValidationResult<T, U>;

const f1: Validation<TestType, number> = fields => ({ a: 2, b: 3 });
// @ts-expect-error
const f2: Validation<TestType, number> = fields => ({ c: 4 });

游樂場鏈接。

3

const hasLength = <T>(len: number, input: string | Array<T>) =>
    input.length >= len;

const hasUserName = (input: string) =>
    hasLength(1, input) ? true : "Name is required.";

<T>(len: number, input: string | Array<T>)定義了 function 的 arguments： 1. len是一個數字 2. input是string和Array<T>的聯合類型； 意思是，它要么是字符串，要么是某種類型的數組T ； 這兩種類型都有一個可以使用的length屬性。

前導T是泛型； 它代表某種類型； 我們只是說我們不想在 function 中定義該類型是什么，它可以是任何東西。

hasLength和hasUserName的關系是后者使用前者來檢查用戶名是否至少是一個字符。 Typescript 可以知道，當hasUserName以input作為第二個參數調用hasLength時， hasLength中的T將是一個字符串。

4

const fieldValues = {
    name: "Test User",
    level: 10,
    description: "Test Description"
};

type FieldValues = typeof fieldValues;

const validationRules = [
    ({ name }: FieldValues) => ({
        name: hasUserName(name)
    }),
    ({ description }: FieldValues) => ({
        description: hasValidDescription(description)
    })
];

typeof是一個 typescript 關鍵字，它采用值的類型。 所以FieldValues實際上是一個看起來像這樣的類型：

type FieldValues = {
    name: string;
    level: number;
    description: string;
};

下一個代碼塊定義了一個函數數組，這些函數接受一個FieldValues object，並返回一個 object。 object 上的鍵表示字段Values fieldValues是否對某些屬性有效。 我猜他們用它來驗證一些字段。