TypeScript類型級(jí)別和值級(jí)別如何區(qū)分

這篇文章主要介紹“TypeScript類型級(jí)別和值級(jí)別如何區(qū)分”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“TypeScript類型級(jí)別和值級(jí)別如何區(qū)分”文章能幫助大家解決問題。

對(duì)值級(jí)別編程類型級(jí)別編程區(qū)分

首先，讓我們對(duì)值級(jí)別編程和類型級(jí)別編程進(jìn)行重要區(qū)分。

• 值級(jí)別編程讓我們編寫將在生產(chǎn)中運(yùn)行的代碼即運(yùn)行期，并為我們的用戶提供有用的東西。

• 類型級(jí)別編程幫助我們確保代碼在發(fā)布之前即編譯期不包含錯(cuò)誤，在運(yùn)行期會(huì)被完全刪除

JavaScript沒有類型，所以所有JavaScript都是值級(jí)別的代碼：

// A simple Javascript function:
function sum(a, b) {
  return a + b;
}

TypeScript允許我們將類型注釋添加到JavaScript中，并確保我們編寫的sum函數(shù)永遠(yuǎn)不會(huì)用數(shù)字以外的任何東西調(diào)用：

// Using type annotations:
function sum(a: number, b: number): number {
  return a + b;
}

但TypeScript的類型系統(tǒng)遠(yuǎn)比這強(qiáng)大得多。我們編寫的真實(shí)代碼有時(shí)需要是通用的，并接受我們事先不知道的類型。

在這種情況下，我們可以在尖括號(hào)<A，B，&hellip;>中定義類型參數(shù)然后，我們可以將類型參數(shù)傳遞給一個(gè)類型級(jí)函數(shù)，該函數(shù)根據(jù)輸入類型計(jì)算輸出類型：

// Using type level programming:
function genericFunction<A, B>(a: A, b: B): DoSomething<A, B> {
  return doSomething(a, b);
}

這就是類型級(jí)編程！DoSomething＜A，B> 是一種用特殊編程語言編寫的類型級(jí)函數(shù)，它與我們用于值的語言不同，但同樣強(qiáng)大。讓我們將這種語言稱為類型級(jí)TypeScript。

// This is a type-level function:
type DoSomething<A, B> = ...
// This is a value-level function:
const doSomething = (a, b) => ...

類型級(jí)編程

類型級(jí)TypeScript是一種最小的純函數(shù)語言。

在類型級(jí)別，函數(shù)被稱為泛型類型：它們接受一個(gè)或多個(gè)類型參數(shù)并返回單個(gè)輸出類型。下面是一個(gè)函數(shù)的簡(jiǎn)單示例，該函數(shù)使用兩個(gè)類型參數(shù)并將它們包裝在元組中：

type SomeFunction<A, B> = [A, B];
/*                ----    ------
                   ^         \
                  type        return type
               parameters
     \-------------------------/
                 ^
              Generic
*/

類型級(jí)別的TypeScript沒有很多功能。畢竟，它是專門為你的代碼做類型約束的！也就是說，它確實(shí)有足夠的特性（幾乎）圖靈完備，這意味著你可以用它解決任意復(fù)雜的問題。

• 代碼分支：根據(jù)條件執(zhí)行不同的代碼路徑（相當(dāng)于值級(jí)別if/else關(guān)鍵字）。

• 變量賦值：聲明一個(gè)變量并在表達(dá)式中使用它（相當(dāng)于值級(jí)別var/let關(guān)鍵字）。

• 函數(shù)：可重復(fù)使用的邏輯單位，如我們?cè)谇懊娴氖纠锌吹降摹?/p>

• 循環(huán)：通常通過遞歸。

• 相等檢查：==但適用于類型！

• 還有更多！

這是我們將在接下來的章節(jié)中學(xué)習(xí)的語言類型的簡(jiǎn)要概述。現(xiàn)在，讓我們開始第一次挑戰(zhàn)吧！

挑戰(zhàn)是如何工作的

在每一章結(jié)束時(shí)，你將有一些挑戰(zhàn)需要解決，以將你的新技能付諸實(shí)踐。它們看起來像這樣：

namespace challenge {
  // 1. implement a generic to get the union
  // of all keys in an object type.
  type GetAllKeys<Obj> = TODO;
  type res1 = GetAllKeys<{ a: number }>;
  type test1 = Expect<Equal<res1, "a">>;
}

• namespace 是一個(gè)鮮為人知的TypeScript功能，它可以讓我們?cè)趯Ｓ梅秶鷥?nèi)隔離每個(gè)挑戰(zhàn)。

• TODO 是占位符。這是您需要更換的！

• res1=。。。 是泛型為某些輸入類型返回的類型。您可以用鼠標(biāo)將其懸停以檢查其當(dāng)前

• type test1=Expect<Equal<res1，&hellip;>> 是類型級(jí)單元測(cè)試。用于判斷TODO部分的代碼是否正確

在此之前你要先定義好Expect和Equal

type Expect<T extends true> = T;
type Equal<X, Y> = (<T>() => T extends { [k in keyof X]: X[k]; } ? 1 : 2) extends <T>() => T extends { [k in keyof Y]: Y[k]; } ? 1 : 2 ? true : false;

挑戰(zhàn)

準(zhǔn)備好迎接你的第一個(gè)挑戰(zhàn)了嗎？出發(fā)：

/**
 * 1. The `identity` function takes a value of any type
 *    and returns it. Make it generic!
 */
namespace genericFunction {
  function identity(a: TODO): TODO {
    return a;
  }
  let input1 = 10;
  let res1 = identity(input1);
  type test1 = Expect<Equal<typeof res1, number>>;
  let input2 = "Hello";
  let res2 = identity(input2);
  type test2 = Expect<Equal<typeof res2, string>>;
}

/**
 * 2. `safeHead` takes an array, a default value
      and returns the first element of the array
      if it isn't empty. Make it generic!
 */
namespace safeHead {
  function safeHead(array: TODO[], defaultValue: TODO): TODO {
    return array[0] ?? defaultValue;
  }
  let input1 = [1, 2, 3];
  let res1 = safeHead(input1, 0);
  type test1 = Expect<Equal<typeof res1, number>>;
  let input2 = ["Hello", "Hola", "Bonjour"];
  let res2 = safeHead(input2, "Hi");
  type test2 = Expect<Equal<typeof res2, string>>;
}

/**
 * 3. `map` transforms all values in an array to a value of
 *    different type. Make it generic!
 */
namespace map {
  function map(array: TODO[], fn: (value: TODO) => TODO): TODO[] {
    return array.map(fn);
  }
  let input1 = [1, 2, 3];
  let res1 = map(input1, value => value.toString());
  type test1 = Expect<Equal<typeof res1, string[]>>;
  let input2 = ["Hello", "Hola", "Bonjour"];
  let res2 = map(input2, str => str.length);
  type test2 = Expect<Equal<typeof res2, number[]>>;
}

/**
 * 4. `pipe2` takes a value and pipes it into 2 functions
 *    sequentially. For example, `pipe2(x, f1, f2)` will
 *    result in `f2(f1(x))`. Make it generic!
 *    
 */
namespace pipe2 {
  function pipe2(
    x: TODO,
    f1: (value: TODO) => TODO,
    f2: (value: TODO) => TODO
  ): TODO {
    return f2(f1(x));
  }
  let res1 = pipe2(
    [1, 2, 3],
    arr => arr.length,
    length => `length: ${length}`
  );
  type test1 = Expect<Equal<typeof res1, string>>;
  let res2 = pipe2(
    { name: 'Alice' },
    user => user.name,
    name => name.length > 5
  );
  type test2 = Expect<Equal<typeof res2, boolean>>;
}

關(guān)于“TypeScript類型級(jí)別和值級(jí)別如何區(qū)分”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。