極客江南： 一個對開發(fā)技術(shù)特別執(zhí)著的程序員，對移動開發(fā)有著獨(dú)到的見解和深入的研究，有著多年的iOS、Android、HTML5開發(fā)經(jīng)驗，對NativeApp、HybridApp、WebApp開發(fā)有著獨(dú)到的見解和深入的研究, 除此之外還精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多種Web前端技術(shù)及Java、PHP等服務(wù)端技術(shù)。

初學(xué)者玩轉(zhuǎn) TypeScript系列，總計 10 期，本文為第 4 期，點贊、收藏、評論、關(guān)注、三連支持！

一期知識點擊這里

二期知識點擊這里

三期知識點擊這里

四期目錄

• • • • 1.數(shù)字枚舉和字符串枚舉
      • 2. 枚舉成員類型和聯(lián)合類型
      • 3.運(yùn)行時和常量枚舉
      • 4. 類型推論
      • 5. 類型兼容性
      • 6. 函數(shù)兼容性
      • 7. 枚舉兼容性
      • 8. 類兼容性
      • 9. 泛型兼容性

對于初學(xué)者來說，學(xué)習(xí)編程最害怕的就是，難。

那么，Typescript 是不是很難？

首先，我可以肯定地告訴你，你的焦慮是多余的。新手對學(xué)習(xí)新技術(shù)有很強(qiáng)的排斥心理，主要是因為基礎(chǔ)不夠扎實，然后自信心不夠強(qiáng)。

1.數(shù)字枚舉和字符串枚舉

• TS中支持兩種枚舉, 一種是數(shù)字枚舉, 一種是字符串枚舉
• 數(shù)字枚舉
• 默認(rèn)情況下就是數(shù)字枚舉

enum Gender{Male,Female } console.log(Gender.Male); console.log(Gender.Female);

• 數(shù)字枚舉注意點
• 數(shù)字枚舉的取值默認(rèn)從0開始遞增
• 數(shù)字枚舉的取值可以是字面量, 也可以是常量, 也可以是計算的結(jié)果

const num = 666; function getNum() {return 888; } enum Gender{// Male = 6,// Male = num, // 注意點: 如果使用常量給前面的枚舉值賦值了, 那么后面的枚舉值也需要手動的賦值// Female = 8Male = getNum(), // 注意點: 如果使用計算結(jié)果給前面的枚舉值賦值了, 那么后面的枚舉值也需要手動的賦值Female = 123 }

• 枚舉反向映射

// 可以根據(jù)枚舉值獲取到原始值 // 也可以根據(jù)原始值獲取到枚舉值 enum Gender{Male,Female } console.log(Gender.Male); // 0 console.log(Gender[0]); // Male

• 字符串枚舉

enum Gender{Male = 'www.it666.net',Female = 'www.itzb.net' // 注意點: 如果使用字符串給前面的枚舉值賦值了, 那么后面的枚舉值也必須手動賦值 } console.log(Gender.Male); console.log(Gender.Female);

• 字符串枚舉注意點
• 注意點: 如果使用字符串給前面的枚舉值賦值了, 那么后面的枚舉值也必須手動賦值
• 注意點: 和數(shù)字枚舉不一樣, 字符串枚舉不能使用常量或者計算結(jié)果給枚舉值賦值
• 注意點: 雖然字符串枚舉不能夠使用常量或者計算結(jié)果給枚舉值賦值, 但是它可以使用內(nèi)部的其它枚舉值來賦值

const str = 'lnj'; function getStr() {return 'abc'; } enum Gender{Male = 'www.it666.net',// Male = str,// Male = getStr(),Female = 'www.itzb.net',Yao = Female } console.log(Gender.Female); console.log(Gender.Yao);

• 異構(gòu)枚舉
• 枚舉中既包含數(shù)字又包含字符串, 我們就稱之為異構(gòu)枚舉

enum Gender{Male = 6,Female = 'nv' }console.log(Gender.Male); console.log(Gender.Female); console.log(Gender[6]); // 注意點: 如果是字符串枚舉, 那么無法通過原始值獲取到枚舉值 // console.log(Gender['nv']); console.log(Gender);

2. 枚舉成員類型和聯(lián)合類型

• 枚舉成員類型

• 我們就可以把枚舉成員當(dāng)做類型來使用

enum Gender{Male = 'www.it666.com',Female = 'www.itzb.com' } interface TestInterface {age: Gender.Male } class Person implements TestInterface{age: Gender.Male// age: Gender.Female // 由于類型不匹配, 所以會報錯// age: 0 // 注意點: 由于數(shù)字枚舉的本質(zhì)就是數(shù)值, 所以這里寫一個數(shù)值也不會報錯// age: Gender.Male// age: Gender.Female// age: 'www.it666' // 注意點: 如果是字符串枚舉, 那么只能是枚舉成員的值, 不能是其它的值// age: string }

• 聯(lián)合枚舉類型
• 什么是聯(lián)合類型?
• 聯(lián)合類型就是將多種數(shù)據(jù)類型通過|連接起來
• 我們可以把枚舉類型當(dāng)做一個聯(lián)合類型來使用

let value:(number | string); // (number | string)聯(lián)合類型 value = 1; value = 6; value = "123";enum Gender{Male ,Female } interface TestInterface {age: Gender // age: (Gender.Male | Gender.Female) } class Person implements TestInterface{// age: Gender.Maleage: Gender.Female }

3.運(yùn)行時和常量枚舉

// 運(yùn)行時枚舉 // 枚舉在編譯之后是一個真實存儲的對象, 所以可以在運(yùn)行時使用 // 而像接口這種只是用來做約束做靜態(tài)檢查的代碼, 編譯之后是不存在的interface TestInterface {name:string;age:number; } enum Gender{Male,Female }

• 常量枚舉

// 普通枚舉和常量枚舉的區(qū)別 // 普通枚舉會生成真實存在的對象 // 常量枚舉不會生成真實存在的對象, 而是利用枚舉成員的值直接替換使用到的地方 enum Gender1{Male,Female } console.log(Gender1.Male === 0);const enum Gender2{Male,Female } console.log(Gender2.Male === 0);

4. 類型推論

• 什么是自動類型推斷?
• 不用明確告訴編譯器具體是什么類型, 編譯器就知道是什么類型

// 1.根據(jù)初始化值自動推斷 // 如果是先定義在初始化, 那么是無法自動推斷的 // let value; // value = 123; // value = false; // value = 'abc';// 如果是定義的同時初始化, 那么TS就會自動進(jìn)行類型推薦 // let value = 123; // let value:number = 123; // value = 456; // value = false; // value = 'abc';let arr = [1, 'a']; // let arr:(number | string) = [1, 'a']; arr = ['a', 'b', 'c', 1, 3, 5, false] // 2.根據(jù)上下文類型自動推斷 window.onmousedown = (event)=>{console.log(event.target); }

5. 類型兼容性

// 基本兼容性 /* interface TestInterface {name:string; }let p1 = {name:'lnj'}; let p2 = {age:18}; let p3 = {name:'lnj', age:18};let t:TestInterface; t = p1; t = p2; t = p3; // 可多不可少*/ /* interface TestInterface {name:string;children:{age:number}; }let p1 = {name:'lnj', children:{age:18}}; let p2 = {name:'lnj',children:{age:'abc'}};let t:TestInterface; t = p1; t = p2; // 會遞歸檢查*/

6. 函數(shù)兼容性

// 參數(shù)個數(shù) /* let fn1 = (x:number, y:number)=>{}; let fn2 = (x:number)=>{}; fn1 = fn2; fn2 = fn1; // 可少不可多*/// 參數(shù)類型 /* let fn1 = (x:number)=>{}; let fn2 = (x:number)=>{}; let fn3 = (x:string)=>{}; fn1 = fn2; fn2 = fn1; fn1 = fn3; // 必須一模一樣 fn3 = fn1;*/// 返回值類型 /* let fn1 = ():number=> 123; let fn2 = ():number=> 456; let fn3 = ():string=> 'abc'; fn1 = fn2; fn2 = fn1; fn1 = fn3; // 必須一模一樣 fn3 = fn1;*/// 函數(shù)雙向協(xié)變 /* // 參數(shù)的雙向協(xié)變 // let fn1 = (x:(number | string)) =>{}; // let fn2 = (x:number) =>{}; // fn1 = fn2; // fn2 = fn1;// 返回值雙向協(xié)變 let fn1 = (x:boolean):(number | string) => x ? 123 : 'abc'; let fn2 = (x:boolean):number => 456; // fn1 = fn2; // 但是可以將返回值是具體類型的賦值給聯(lián)合類型的 fn2 = fn1; // 不能將返回值是聯(lián)合類型的賦值給具體類型的*/// 函數(shù)重載 function add(x:number, y:number):number; function add(x:string, y:string):string; function add(x, y) {return x + y; }function sub(x:number, y:number):number; function sub(x, y) {return x - y; }// let fn = add; // fn = sub; // 不能將重載少的賦值給重載多的let fn = sub; fn = add; // 可以將重載多的賦值給重載少

7. 枚舉兼容性

// 數(shù)字枚舉與數(shù)值兼容 /* enum Gender{Male,Female } let value:Gender; value = Gender.Male; value = 1*/// 數(shù)字枚舉與數(shù)字枚舉不兼容 /* enum Gender{Male, // 0Female // 1 } enum Animal{Dog, // 0Cat // 1 } let value:Gender; value = Gender.Male; value = Animal.Dog; // 報錯 */// 字符串枚舉與字符串不兼容 /* enum Gender{Male = 'abc',Female = 'def' } let value:Gender; value = Gender.Male; value = 'abc';*/

8. 類兼容性

// 只比較實例成員, 不比較類的構(gòu)造函數(shù)和靜態(tài)成員 /* class Person {public name:string;// public age:number;public static age:number;constructor(name:string, age:number){} } class Animal {public name:string;constructor(name:string){} } let p: Person; let a: Animal; p = a; a = p; // 可多不少*/// 類的私有屬性和受保護(hù)屬性會響應(yīng)兼容性 /* class Person {protected name:string; } class Animal {protected name:string; } let p: Person; let a: Animal; p = a; a = p; // 可多不少*/

9. 泛型兼容性

// 泛型只影響使用的部分, 不會影響聲明的部分 interface TestInterface<T> {// age:T; } let t1: TestInterface<number>; // age:number let t2: TestInterface<string>; // age:string t1 = t2; t2 = t1;

碼字不易，在線求個三連支持。

大家記得收藏前，先點個贊哦！好的文章值得被更多人看到。

推薦閱讀：

13萬字C語言保姆級教程2021版

10萬字Go語言保姆級教程

2 萬字 Jquery 入門教程

3 萬字 html +css 入門教程

169集保姆級C語言視頻

最后，再多一句，粉絲順口溜，關(guān)注江哥不迷路，帶你編程上高速。

版權(quán)所有，請勿轉(zhuǎn)載，轉(zhuǎn)載請聯(lián)系本人授權(quán)

總結(jié)

以上是生活随笔為你收集整理的5万字 TypeScript入门系列（第四期）（建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。