初學者這樣玩 TypeScript,遲早進大廠系列(第六期)

極客江南 2021-08-15 20:35:59 阅读数:615

本文一共[544]字,预计阅读时长:1分钟~
typescript 系列 第六期 第六 六期

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

初學者玩轉 TypeScript系列,總計 10 期,本文為第 6 期,點贊、收藏、評論、關注、三連支持!

一期知識點擊這裏

二期知識點擊這裏

三期知識點擊這裏

四期知識點擊這裏

五期知識點擊這裏

對於初學者來說,學習編程最害怕的就是,

那麼,Typescript 是不是很難?

首先,我可以肯定地告訴你,你的焦慮是多餘的。新手對學習新技術有很强的排斥心理,主要是因為基礎不够紮實,然後自信心不够强。

1.可辨識聯合

  • 什麼是可辨識聯合
  • 具有共同的可辨識特征。
  • 一個類型別名, 包含了具有共同的可辨識特征的類型的聯合。
interface Square {

kind: "square"; // 共同的可辨識特征
size: number;
}
interface Rectangle {

kind: "rectangle"; // 共同的可辨識特征
width: number;
height: number;
}
interface Circle {

kind: "circle"; // 共同的可辨識特征
radius: number;
}
/* Shape就是一個可辨識聯合 因為: 它的取值是一個聯合 因為: 這個聯合的每一個取值都有一個共同的可辨識特征 */
type Shape = (Square | Rectangle | Circle);
function aera(s: Shape) {

switch (s.kind) {

case "square": return s.size * s.size;
case "rectangle": return s.width * s.height;
case "circle": return Math.PI * s.radius ** 2; // **是ES7中推出的幂運算符
}
}

2. 可辨識聯合完整性檢查

interface Square {

kind: "square"; // 共同的可辨識特征
size: number;
}
interface Rectangle {

kind: "rectangle"; // 共同的可辨識特征
width: number;
height: number;
}
interface Circle {

kind: "circle"; // 共同的可辨識特征
radius: number;
}
/* Shape就是一個可辨識聯合 因為: 它的取值是一個聯合 因為: 這個聯合的每一個取值都有一個共同的可辨識特征 * */
type Shape = (Square | Rectangle | Circle);
/* 在企業開發中如果相對可辨識聯合的完整性進行檢查, 那麼我們可以使用 方式一: 給函數添加返回值 + 開啟strictNullChecks 方式二: 添加default + never * */
function MyNever(x: never):never {

throw new Error('可辨識聯合處理不完整' + x);
}
function aera(s: Shape):number{

switch (s.kind) {

case "square": return s.size * s.size;
case "rectangle": return s.width * s.height;
case "circle": return Math.PI * s.radius ** 2; // **是ES7中推出的幂運算符
default:return MyNever(s)
}
}

3. 索引類型

// 通過[]索引類型訪問操作符, 我們就能得到某個索引的類型
// class Person {

// name:string;
// age:number;
// }
// type MyType = Person['name'];
// 應用場景
// 需求: 獲取指定對象, 部分屬性的值, 放到數組中返回
/* let obj = { name:'lnj', age:18, gender:true } function getValues<T, K extends keyof T>(obj:T, keys:K[]):T[K][] { let arr = [] as T[K][]; keys.forEach(key=>{ arr.push(obj[key]); }) return arr; } let res = getValues(obj, ['name', 'age']); console.log(res); */
// 索引訪問操作符注意點
// 不會返回null/undefined/never類型
interface TestInterface {

a:string,
b:number,
c:boolean,
d:symbol,
e:null,
f:undefined,
g:never
}
type MyType = TestInterface[keyof TestInterface];

4. 映射類型

/* 1.什麼是映射類型? 根據舊的類型創建出新的類型, 我們稱之為映射類型 * */
/* interface TestInterface1{ name:string, age:number } interface TestInterface2 { readonly name:string, readonly age:number } */
interface TestInterface1{

name:string,
age:number
}
interface TestInterface2{

readonly name?:string,
readonly age?:number
}
type ReadonlyTestInterface<T> = {

// [P in keyof T]作用: 遍曆出指定類型所有的key, 添加到當前對象上
// readonly [P in keyof T]: T[P]
// readonly [P in keyof T]?: T[P]
-readonly [P in keyof T]-?: T[P]
}
type MyType = ReadonlyTestInterface<TestInterface2>
// 我們可以通過+/-來指定添加還是删除 只讀和可選修飾符
// 由於生成只讀屬性和可選屬性比較常用, 所以TS內部已經給我們提供了現成的實現
// Readonly / Partial
type MyType2 = Readonly<TestInterface1>
type MyType3 = Partial<TestInterface1>
type MyType4 = Partial<Readonly<TestInterface1>

5. 映射類型

  • 什麼是字面量?
    字面量就是源代碼中一個固定的值
    例如數值字面量: 1,2,3,…
    例如字符串字面量: ‘a’,‘abc’,…

  • 在TS中我們可以把字面量作為具體的類型來使用
    當使用字面量作為具體類型時, 該類型的取值就必須是該字面量的值

type MyNum = 1;
let value1:MyNum = 1;
let value2:MyNum = 2;

// Pick映射類型
// 將原有類型中的部分內容映射到新類型中
/* interface TestInterface { name:string, age:number } type MyType = Pick<TestInterface, 'name'> */
// Record映射類型
// 他會將一個類型的所有屬性值都映射到另一個類型上並創造一個新的類型
type Animal = 'person' | 'dog' | 'cat';
interface TestInterface {

name:string;
age:number;
}
type MyType = Record<Animal, TestInterface>
let res:MyType = {

person:{

name:'zs',
age:18
},
dog:{

name:'wc',
age:3
},
cat:{

name:'mm',
age:2
}
}

6. 分布式條件類型


/* 1.條件類型(三目運算) 判斷前面一個類型是否是後面一個類型或者繼承於後面一個類型 如果是就返回第一個結果, 如果不是就返回第二個結果 語法: T extends U ? X : Y; * */
// type MyType<T> = T extends string ? string : any;
// type res = MyType<boolean>
/* 2.分布式條件類型? 被檢測類型是一個聯合類型的時候, 該條件類型就被稱之為分布式條件類型 */
// type MyType<T> = T extends any ? T : never;
// type res = MyType<string | number | boolean>;
// 從T中剔除可以賦值給U的類型。 Exclude
// type MyType<T, U> = T extends U ? never : T;
// type res = MyType<string | number | boolean, number>
// type res = Exclude<string | number | boolean, number>
// 提取T中可以賦值給U的類型。 Extract
// type res = Extract<string | number | boolean, number | string>
// 從T中剔除null和undefined。 NonNullable
// type res = NonNullable<string | null | boolean | undefined>
// 獲取函數返回值類型。 ReturnType
// type res = ReturnType<(()=>number)>
// 獲取一個類的構造函數參數組成的元組類型。 ConstructorParameters
// class Person {

// constructor(name:string, age:number){}
// }
// type res = ConstructorParameters<typeof Person>;
// 獲得函數的參數類型組成的元組類型。 Parameters
function say(name:string, age:number, gender:boolean) {

}
type res = Parameters<typeof say>;

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

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

推薦閱讀:

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

10萬字Go語言保姆級教程

2 萬字 Jquery 入門教程

3 萬字 html +css 入門教程

169集保姆級C語言視頻

最後,再多一句,粉絲順口溜,關注江哥不迷路,帶你編程上高速。

版權所有,請勿轉載,轉載請聯系本人授權

版权声明:本文为[極客江南]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/08/20210815203548711P.html