日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
【前端】你好，我叫TypeScript01──數(shù)據(jù)類型

前言

TypeScript是強類型語言，所以相比于JavaScript而言有著更強的語言規(guī)范約束能力，能夠讓我們的代碼可讀性更高。同時可以在編譯過程中進行錯誤校驗，提升了我們代碼的開發(fā)效率。

公司主營業(yè)務：網(wǎng)站制作、成都網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出咸寧免費做網(wǎng)站回饋大家。

1.什么是Typescript?

TypeScript并不是一門新的編程語言，它是Javscript的超集，即在JavaScript語言的基礎(chǔ)上添加了語言約束：可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭Ｆ鋵嵕褪翘砑恿遂o態(tài)類型檢查，有了約束可以讓我們在開發(fā)過程中減少錯誤代碼的書寫。

TypeScript和JavaScript的關(guān)系如下：

TypeScript和JavaScript的區(qū)別：

2.兩分鐘上手TS開發(fā)

“工欲行其事,必先利其器”，說的就是在做事情之前，要做好所有的準備。同樣的，我們要學習TS開發(fā)，必須先安裝語言環(huán)境和編輯器工具。

安裝TypeScript

有兩種方式可以獲取TypeSscript工具:

  • 通過NPM進行安裝
  • 安裝VScode的TypeScript插件

(1)NPM安裝:

 
 
 
 
    
  
  
  
  
  1. npm install -g typescript
    2.

(2)驗證TS安裝

 
 
 
 
    
  
  
  
  
  1. tsc -v
    2. 
  
  
  
  
  2. # Version 4.2.4
    3.

(3)構(gòu)建TS文件 在編輯器中構(gòu)建一個TS文件test.ts：

 
 
 
 
    
  
  
  
  
  1. function addNum(num1:num,num2:num){
    2. 
  
  
  
  
  2.   return num1 + num2;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. console.log(addNum(1,2));
    5. 
  
  
  
  
  5. //3
    6.

(4)編譯代碼：

 
 
 
 
    
  
  
  
  
  1. tsc test.ts
    2.

編譯得到JS代碼：

 
 
 
 
    
  
  
  
  
  1. "use strict";
    2. 
  
  
  
  
  2. function addNum(num1, num2) {
    3. 
  
  
  
  
  3.     return num1 + num2;
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. console.log(addNum(1, 2));
    6.

3.基礎(chǔ)類型

3.1 Boolean類型

只有兩個值：true和false。

 
 
 
 
    
  
  
  
  
  1. let isTrue: boolean = true;
    2.

3.2 Number類型

所有的數(shù)字都是浮點型,支持二進制、八進制、十進制以及十六進制字面量。

 
 
 
 
    
  
  
  
  
  1. // 數(shù)字類型，所有數(shù)字都是浮點型
    2. 
  
  
  
  
  2. let decLiteral: number = 10;
    3. 
  
  
  
  
  3. let hexLiteral: number = 0xf00d;
    4.

3.3 String類型

TS可以使用雙引號( ")或單引號(')表示字符串。

 
 
 
 
    
  
  
  
  
  1. // 字符串，表示文本數(shù)據(jù)類型
    2. 
  
  
  
  
  2. let username: string = "yichuan";
    3. 
  
  
  
  
  3. let like: string = `${yichuan} + FE`;
    4.

3.4 Array類型

數(shù)組操作有兩種方式可以聲明：

  • 可以在元素類型后面接上 []，表示由此類型元素組成的一個數(shù)組。
  • 使用數(shù)組泛型，Array<元素類型>。
 
 
 
 
    
  
  
  
  
  1. let list: number[] = [1, 2, 3];
    2. 
  
  
  
  
  2. let list: Array = [1, 2, 3];
    3.

3.5 Tuple類型

元組類型允許表示一個已知元素數(shù)量和類型的數(shù)組，各元素的類型不必相同。

 
 
 
 
    
  
  
  
  
  1. // 元組 
    2. 
  
  
  
  
  2. let tuple: [string,number];
    3. 
  
  
  
  
  3. tuple = ["wenbo",1];
    4.

TS元組和數(shù)組其實大致一樣，唯一的區(qū)別就是數(shù)組中的元素類型必須相同，而元組可以存儲不同類型的元素。甚至可以說元組是any類型的數(shù)組。

3.6 Enum類型

enum類型是對JavaScript標準數(shù)據(jù)類型的一個補充。枚舉類型提供的一個便利是你可以由枚舉的值得到它的名字。

 
 
 
 
    
  
  
  
  
  1. // 枚舉 
    2. 
  
  
  
  
  2. // 默認情況下，枚舉的元素編號是從0開始，也可以進行手動編號。
    3. 
  
  
  
  
  3. enum Color {Red, Green, Blue};
    4. 
  
  
  
  
  4. let c:Color = Color.Red;
    5.

3.7 Any類型

any表示任意類型。有時候，我們會想要為那些在編程階段還不清楚類型的變量指定一個類型。

 
 
 
 
    
  
  
  
  
  1. // Any 
    2. 
  
  
  
  
  2. let notSure:any = 100.002;
    3. 
  
  
  
  
  3. notSure.toFixed();
    4. 
  
  
  
  
  4. let list3:any[] = ["zhaoshun","male",12];
    5.

其實，any類型是類型系統(tǒng)的頂級類型，因為任何類型都歸結(jié)于any類型，是不是很自由。自由過了火，一個不恰當?shù)谋扔鳎琂S是any類型的TS，允許對any類型的值進行各種操作，而無需編譯校驗。

3.8 Void類型

void類型它表示沒有任何類型。當一個函數(shù)沒有返回值時，你通常會見到其返回值類型是 void。

聲明一個void類型的變量沒有什么大用，因為你只能為它賦予null和undefined。

 
 
 
 
    
  
  
  
  
  1. function showName():void {
    2. 
  
  
  
  
  2.   console.log("your name is wenbo");
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 聲明一個void類型的變量
    6. 
  
  
  
  
  6. let unusable: void = undefined;
    7.

3.9 Null 和 Undefined

TypeScript里，undefined和null兩者各自有自己的類型分別叫做undefined和null。默認情況下null和undefined是所有類型的子類型，可以把 null和undefined賦值給number類型的變量。

 
 
 
 
    
  
  
  
  
  1. let u: undefined = undefined;
    2. 
  
  
  
  
  2. let n: null = null;
    3.

但是，當指定了--strictNullChecks標記，null和undefined只能賦值給void和它們各自。

3.10 Object

object表示非原始數(shù)據(jù)類型(除number，string，boolean，symbol，null或undefined之外的類型)。

 
 
 
 
    
  
  
  
  
  1. declare function create(o: object | null): void;
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. create({ prop: 0 }); // OK
    4. 
  
  
  
  
  4. create(null); // OK
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. create(42); // Error
    7. 
  
  
  
  
  7. create("string"); // Error
    8. 
  
  
  
  
  8. create(false); // Error
    9. 
  
  
  
  
  9. create(undefined); // Error
    10.

3.11 Never

never類型表示的是那些永不存在的值的類型。

never類型是任何類型的子類型，也可以賦值給任何類型;然而，沒有類型是never的子類型或可以賦值給never類型(除了never本身之外)。即使 any也不可以賦值給never。

 
 
 
 
    
  
  
  
  
  1. // 返回never的函數(shù)必須存在無法達到的終點
    2. 
  
  
  
  
  2. function error(message: string): never {
    3. 
  
  
  
  
  3.     throw new Error(message);
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. // 推斷的返回值類型為never
    7. 
  
  
  
  
  7. function fail() {
    8. 
  
  
  
  
  8.     return error("Something failed");
    9. 
  
  
  
  
  9. }
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. // 返回never的函數(shù)必須存在無法達到的終點
    12. 
  
  
  
  
  12. function infiniteLoop(): never {
    13. 
  
  
  
  
  13.     while (true) {
    14. 
  
  
  
  
  14.     }
    15. 
  
  
  
  
  15. }
    16.

3.12 Unknown 類型

任何類型都可以被歸為unknow類型，因此unknow也是ts類型中的頂級類型。

 
 
 
 
    
  
  
  
  
  1. let value: unknown;
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. value = true;             // OK
    4. 
  
  
  
  
  4. value = 18;               // OK
    5. 
  
  
  
  
  5. value = "yichuan";    // OK
    6. 
  
  
  
  
  6. value = [];               // OK
    7. 
  
  
  
  
  7. value = {};               // OK
    8. 
  
  
  
  
  8. value = Math.random;      // OK
    9. 
  
  
  
  
  9. value = null;             // OK
    10. 
  
  
  
  
  10. value = undefined;        // OK
    11. 
  
  
  
  
  11. value = new TypeError();  // OK
    12. 
  
  
  
  
  12. value = Symbol("type");   // OK
    13.

我們看到對于value變量而言，所有的賦值都是正確的，就會感覺是不是發(fā)現(xiàn)和any好像沒啥區(qū)別，真的是這樣嗎。當我們給賦值其他類型時，就會出現(xiàn)意想不到的問題，發(fā)現(xiàn)unknow類型只能被賦值給any類型和unknow類型本身，這就是跟any的區(qū)別。

 
 
 
 
    
  
  
  
  
  1. let value: unknown;
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. let value1: unknown = value;   // OK
    4. 
  
  
  
  
  4. let value2: any = value;       // OK
    5. 
  
  
  
  
  5. let value3: boolean = value;   // Error
    6. 
  
  
  
  
  6. let value4: number = value;    // Error
    7. 
  
  
  
  
  7. let value5: string = value;    // Error
    8. 
  
  
  
  
  8. let value6: object = value;    // Error
    9. 
  
  
  
  
  9. let value7: any[] = value;     // Error
    10. 
  
  
  
  
  10. let value8: Function = value;  // Error
    11.

所以得到：只有能夠保存任意類型值的容器才能保存 unknown類型的值。

值得注意的是，TS不允許我們對unknow類型的值執(zhí)行任何操作，必須得先執(zhí)行類型校驗后來確定使用值的范圍。那么如何縮小unknow值的范圍呢?

很簡單，有請我們的老朋友typeof、instanceof運算符和自定義類型保護函數(shù)，通過使用縮小類型范圍的技術(shù)都有助于 TypeScript 的基于控制流的類型分析。

例如，通過if語句分支

 
 
 
 
    
  
  
  
  
  1. function stringifyForLogging(value: unknown): string {
    2. 
  
  
  
  
  2.   if (typeof value === "function") {
    3. 
  
  
  
  
  3.     const functionName = value.name || "(anonymous)";
    4. 
  
  
  
  
  4.     return `[function ${functionName}]`;
    5. 
  
  
  
  
  5.   }
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.   if (value instanceof Date) {
    8. 
  
  
  
  
  8.     return value.toISOString();
    9. 
  
  
  
  
  9.   }
    10. 
  
  
  
  
  10.   return String(value);
    11. 
  
  
  
  
  11. }
    12.

通過使用自定義類型保護函數(shù)縮小 unknown 類型范圍。

 
 
 
 
    
  
  
  
  
  1. function isNumberArray(value: unknown): value is number[] {
    2. 
  
  
  
  
  2.   return (
    3. 
  
  
  
  
  3.     Array.isArray(value) &&
    4. 
  
  
  
  
  4.     value.every(element => typeof element === "number")
    5. 
  
  
  
  
  5.   );
    6. 
  
  
  
  
  6. }
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. const unknownValue: unknown = [15, 23, 8, 4, 42, 16];
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. if (isNumberArray(unknownValue)) {
    11. 
  
  
  
  
  11.   const max = Math.max(...unknownValue);
    12. 
  
  
  
  
  12.   console.log(max);
    13. 
  
  
  
  
  13. }
    14.

盡管 unknownValue 已經(jīng)被歸為 unknown 類型，請注意它如何依然在 if分支下獲取到 number[] 類型。

參考文章

阿寶哥的《重學TS》

《ts中文文檔》

本文轉(zhuǎn)載自微信公眾號「前端萬有引力」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端萬有引力公眾號。


新聞標題：【前端】你好，我叫TypeScript01──數(shù)據(jù)類型
當前地址：http://www.dlmjj.cn/article/djciigj.html