TypeScript類型級別和值級別示例詳解
對值級別編程類型級別編程區(qū)分
首先，讓我們對值級別編程和類型級別編程進(jìn)行重要區(qū)分。
- 值級別編程讓我們編寫將在生產(chǎn)中運行的代碼即運行期，并為我們的用戶提供有用的東西。
- 類型級別編程幫助我們確保代碼在發(fā)布之前即編譯期不包含錯誤，在運行期會被完全刪除
JavaScript沒有類型，所以所有JavaScript都是值級別的代碼：
// A simple Javascript function:
function sum(a, b) {
return a + b;
}
TypeScript允許我們將類型注釋添加到JavaScript中，并確保我們編寫的sum函數(shù)永遠(yuǎn)不會用數(shù)字以外的任何東西調(diào)用：
// Using type annotations:
function sum(a: number, b: number): number {
return a + b;
}
但TypeScript的類型系統(tǒng)遠(yuǎn)比這強大得多。我們編寫的真實代碼有時需要是通用的，并接受我們事先不知道的類型。
在這種情況下，我們可以在尖括號<A，B，…>中定義類型參數(shù)然后，我們可以將類型參數(shù)傳遞給一個類型級函數(shù)，該函數(shù)根據(jù)輸入類型計算輸出類型：
// Using type level programming:
function genericFunction<A, B>(a: A, b: B): DoSomething<A, B> {
return doSomething(a, b);
}
這就是類型級編程！DoSomething＜A，B> 是一種用特殊編程語言編寫的類型級函數(shù)，它與我們用于值的語言不同，但同樣強大。讓我們將這種語言稱為類型級TypeScript。
// This is a type-level function: type DoSomething<A, B> = ... // This is a value-level function: const doSomething = (a, b) => ...
類型級編程
類型級TypeScript是一種最小的純函數(shù)語言。
在類型級別，函數(shù)被稱為泛型類型：它們接受一個或多個類型參數(shù)并返回單個輸出類型。下面是一個函數(shù)的簡單示例，該函數(shù)使用兩個類型參數(shù)并將它們包裝在元組中：
type SomeFunction<A, B> = [A, B];
/* ---- ------
^ \
type return type
parameters
\-------------------------/
^
Generic
*/
類型級別的TypeScript沒有很多功能。畢竟，它是專門為你的代碼做類型約束的！也就是說，它確實有足夠的特性（幾乎）圖靈完備，這意味著你可以用它解決任意復(fù)雜的問題。
- 代碼分支：根據(jù)條件執(zhí)行不同的代碼路徑（相當(dāng)于值級別if/else關(guān)鍵字）。
- 變量賦值：聲明一個變量并在表達(dá)式中使用它（相當(dāng)于值級別var/let關(guān)鍵字）。
- 函數(shù)：可重復(fù)使用的邏輯單位，如我們在前面的示例中看到的。
- 循環(huán)：通常通過遞歸。
- 相等檢查：==但適用于類型！
- 還有更多！
這是我們將在接下來的章節(jié)中學(xué)習(xí)的語言類型的簡要概述?，F(xiàn)在，讓我們開始第一次挑戰(zhàn)吧！
挑戰(zhàn)是如何工作的
在每一章結(jié)束時，你將有一些挑戰(zhàn)需要解決，以將你的新技能付諸實踐。它們看起來像這樣：
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是一個鮮為人知的TypeScript功能，它可以讓我們在專用范圍內(nèi)隔離每個挑戰(zhàn)。TODO是占位符。這是您需要更換的！res1=。。。是泛型為某些輸入類型返回的類型。您可以用鼠標(biāo)將其懸停以檢查其當(dāng)前type test1=Expect<Equal<res1，…>>是類型級單元測試。用于判斷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)備好迎接你的第一個挑戰(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>>;
}以上就是TypeScript類型級別和值級別示例詳解的詳細(xì)內(nèi)容，更多關(guān)于TypeScript類型級別值級別的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
TypeScript之Generics泛型類型學(xué)習(xí)
這篇文章主要為大家介紹了TypeScript之Generics泛型類型學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了js獲得當(dāng)前系統(tǒng)日期時間以及過去系統(tǒng)日期時間的方法,涉及javascript操作日期時間的相關(guān)技巧,示例代碼如下，需要的朋友可以參考下2017-04-04
Typescript是必須要學(xué)習(xí)嗎？如何學(xué)習(xí)TS全棧開發(fā)
Typescript目前在前端，網(wǎng)站，小程序中的位置基本無可替代，同時也可以構(gòu)建完美的CLI應(yīng)用。在移動，桌面，后端方面，性能不是要求很高的情況下完全可以勝任，并且在區(qū)塊鏈，嵌入式，人工智能方面也開始茁壯成長。2022-12-12
Typescript?轉(zhuǎn)換類型操作索引映射類型IIMT模式學(xué)習(xí)
這篇文章主要為大家介紹了Typescript?轉(zhuǎn)換類型操作之索引映射類型IIMT模式學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Typescript編碼規(guī)范ESLint和Prettier使用示例詳解
這篇文章主要介紹了Typescript編碼規(guī)范ESLint和Prettier使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
layui.layer彈出層(子頁面)改變父頁面內(nèi)容（訪問元素和函數(shù)）
當(dāng)前頁面（父框架或父頁面）使用layer以iframe層的方式彈出新的窗口（子框架或子頁面）時，如何在子頁面中訪問父頁面的元素和函數(shù)，從而改變父元素的頁面顯示，給用戶合理舒適的體驗。2023-02-02
xterm.js在web端實現(xiàn)Terminal示例詳解
這篇文章主要為大家介紹了xterm.js在web端實現(xiàn)Terminal示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
TypeScript十大排序算法插入排序?qū)崿F(xiàn)示例詳解
這篇文章主要為大家介紹了TypeScript十大排序算法插入排序?qū)崿F(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了typescript在vue中的入門案例代碼demo,使用技術(shù)棧vue2+typescript+scss入門練手項目，天氣預(yù)報demo，需要的朋友可以參考下。2022-12-12
這篇文章主要為大家介紹了Rollup 簡易入門示例教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02